Hi guys, my name is An. I’m a Vietnamese dump guy who is kinda new to Meteor. I did a couple tutorial with Meteor like Creating a To-do List with Reactjs and i did some small features with my company Web App, however i still have not used much of Meteor features/fundamental stuffs . Personally, i’m suck at designing UI/UX and stuff but i want to try to create something nice for my website and I found some template Themes on Creative-tim
and i would like to use it for my next project.
Currently, i did some research on how to use this theme but i hardly found any suggestions or solutions to use it with Meteorjs instead of seperating it down into small components and bring it into Meteor project.
If you guys have any experience working with creative-tim and meteor please help me to solve this problem. I’m really appreciate .
Welcome to the Meteor community!
If your Meteor app uses React, you should be able to just drop in a pre-made theme.
All the work will be where you want to load data in, or send data back from the server. At which point you can wrap that component in a withTracker HOC (Higher Order Component) to tie it to Meteor’s reactive data system. And you can use Meteor.methods and Meteor.call to send data back to the server for processing
Looking at the website and the templates there isn’t one solution. And you are correct, in regards to separating into smaller components and bringing it into Meteor. That would be the same with every project unless you are starting with their starter/template and nothing else.
For you particular template case it all comes down to using the individual components and within other components. Subscribe to data using the following package:
https://atmospherejs.com/meteor/react-meteor-data
Given that it is React you should just be able to place all the components into one place and then import them where you need them. Be careful about what packages the original template uses as you will need to use some of them too, in order to get things working.
Thank you @coagmano, i did understand those concepts that when you create a Meteor methods in server and use Meteor.calls to call it from client.
However ,as i understand, when you want to start a meteor project you need to run in Terminal a command: meteor create myapp . I’m kind of confused that Can i install an meteor package inside the current template that i’m using or i need to use meteor create myapp to create a new meteor folder then move my Creative-Tim template theme inside the Meteor folder?
Thank you @storyteller,
I did try to start with the template folder but i did not understand how to install the meteor packages inside the Template folder, and also vice versa, if i want to start with the meteor starter by using meteor create myapp how do i use the react-material UI template together with it or how to install the needed packages from the template.
I would run meteor create --react and then copy the template files in
We developed a couple apps using Creative Tim Material Kit template. We found easier to use the vanilla HTML/SCSS template than using their pre-maid vue template. The only thing to be aware is that some of their page layouts require specific classes in the body tag, which is a hassle.
Okay, i will try that.
I would like to try the HTML/SCSS template but personally i think it would be better if i use the React - Bootstrap template for SPA development. And also when i move the whole Material admin dashboard template inside the meteor folder and try to run it with meteor it show tons of error in the template folder which i have no idea how to deal with . I dont know if using HTML/SCSS is a good idea or not because with React frameworks it would be easier just by import the needed class.
Currently, i did try to move the template folder to the meteor project folder and put it inside the
imports/ui folder. Then i try to use a component in the template folder from my component and it return with a tons of errors about TraversalContext like this:
[object Object]
at Object.isSpreadProperty (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/types/lib/validators/generated/index.js:4272:11)
at hasSpread (/home/phucan/Desktop/bTaskee/Doing/admin-dashboard/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:38:13)
at PluginPass.ObjectExpression (/home/phucan/Desktop/bTaskee/Doing/admin-dashboard/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:234:14)
at newFn (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/index.js:94:17)
at traverse (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/traverse/lib/index.js:76:12)
at transformFile (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/core/lib/transformation/index.js:88:29)
at runSync (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/core/lib/transformation/index.js:45:3)
at Object.transformSync (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/core/lib/transform.js:43:38)
at transform (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:110:26)
at compile (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:120:5)
at Cache.Cp.get (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/cache.js:101:26)
at Object.exports.compile (/home/phucan/.meteor/packages/ecmascript/.0.12.7.1vfyutn.7xrm++os+web.browser+web.browser.legacy+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:53:9)
this is my package.json file:
{
"name": "admin-dashboard",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
"dependencies": {
"@babel/runtime": "^7.3.4",
"@material-ui/core": "4.3.2",
"@material-ui/icons": "4.2.1",
"assets": "^3.0.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"components": "^0.1.0",
"history": "4.9.0",
"meteor-node-stubs": "^0.4.1",
"perfect-scrollbar": "1.4.0",
"prop-types": "15.7.2",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-google-maps": "9.4.5",
"react-router-dom": "5.0.1",
"react-scripts": "3.1.0",
"react-swipeable-views": "0.13.3",
"routes.js": "0.0.1"
},
"meteor": {
"mainModule": {
"client": "client/main.jsx",
"server": "server/main.js"
},
"testModule": "tests/main.js"
},
"optionalDependencies": {
"@types/googlemaps": "3.37.3",
"@types/markerclustererplus": "2.1.33",
"ajv": "6.10.2",
"typescript": "3.5.3"
},
"devDependencies": {
"eslint-config-prettier": "6.0.0",
"eslint-plugin-prettier": "3.1.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "1.18.2"
}
}
The error seems to be coming from babel 
I’m assuming the react templates assume they are in an environment with a specific config (likely webpack with a custom .babelrc). Meaning that they’re not actually generic templates.
Can you post the code of one of the templates you’re importing and the code where you’re importing it?
And see if there is a .babelrc file in the template bundle?
Sure thing.
This is the code of the Template that i imported.
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
// import styles from "assets/jss/material-dashboard-react/components/buttonStyle.js";
const style={
// borderStyle:"solid"
}
const useStyles = makeStyles(style);
export default function RegularButton(props) {
const classes = useStyles();
const {
color,
round,
children,
disabled,
simple,
size,
block,
link,
justIcon,
className,
muiClasses,
...rest
} = props;
const btnClasses = classNames({
[classes.button]: true,
[classes[size]]: size,
[classes[color]]: color,
[classes.round]: round,
[classes.disabled]: disabled,
[classes.simple]: simple,
[classes.block]: block,
[classes.link]: link,
[classes.justIcon]: justIcon,
[className]: className
});
return (
<Button {...rest} classes={muiClasses} className={btnClasses}>
{children}
</Button>
);
}
RegularButton.propTypes = {
color: PropTypes.oneOf([
"primary",
"info",
"success",
"warning",
"danger",
"rose",
"white",
"transparent"
]),
size: PropTypes.oneOf(["sm", "lg"]),
simple: PropTypes.bool,
round: PropTypes.bool,
disabled: PropTypes.bool,
block: PropTypes.bool,
link: PropTypes.bool,
justIcon: PropTypes.bool,
className: PropTypes.string,
// use this to pass the classes props from Material-UI
muiClasses: PropTypes.object,
children: PropTypes.node
};
I did try an custom button from the Documentation of the material-ui offical page and it worked well.
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
// The `withStyles()` higher-order component is injecting a `classes`
// prop that is used by the `Button` component.
const StyledButton = withStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
label: {
textTransform: 'capitalize',
},
})(Button);
export default function ClassesShorthand() {
return <StyledButton>classes shorthand</StyledButton>;
}
and this is the code where i’m importing the template component.
HelloPage.js file:
import React,{Component} from 'react';
import StyledButton from './StyledButton';
import Button from './template/src/components/CustomButtons/Button';
export default class HelloPage extends Component{
onConsoleLog(){
console.log("I'm here");
}
render(){
return (
<div>
<Button className={round}>Hello</Button>
<StyledButton onClick={this.onConsoleLog}/>
</div>
)
}
}
Finally is the main.jsx file where i use the HelloPage.js to render the main page.
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import HelloPage from '../imports/ui/HelloPage';
Meteor.startup(() => {
render(
<HelloPage/>
,
document.getElementById('react-target'));
});
and also , because i don’t know what does the .babelrc file is used for so i try to copy it to the main folder with the package.json file and also keep 1 in the template folder.
The code looks fine, no webpack aliases being used there.
What’s in the .babelrc?
The .babelrc file in main folder i did some change to the root folder link.
{
"presets": ["es2015"],
"plugins": [
"transform-class-properties",
"transform-react-jsx",
"transform-object-rest-spread",
["module-resolver", {
"root": ["./imports/ui/template/src"]
}],
["import-rename", {"^(.*)\\.jsx$": "$1"}]
]
}
and i did not change anything in the .babelsrc file in the template folder.
{
"presets": ["es2015"],
"plugins": [
"transform-class-properties",
"transform-react-jsx",
"transform-object-rest-spread",
["module-resolver", {
"root": ["./src"]
}],
["import-rename", {"^(.*)\\.jsx$": "$1"}]
]
}
Does it work if you remove the transform plugins? Those should already be included by Meteor’s default config, and if the versions are different it can cause issues.
I’m wary of the module-resolver as well, but don’t think it’s an issue
I’m also pretty sure that only th .babelrc in the root will be used for compilation.
Yes,it still works well when i remove the transform plugins.I mean it still gets the same errors from before but there is no additional error happen because of it.
And btw, there is one thing happened when i’m using the components from the template that it’s cannot display the style of the component and it logs the error in the Teminal.
Unable to resolve some modules:
"assets/jss/material-dashboard-react/components/customInputStyle.js" in
/home/phucan/Desktop/bTaskee/Doing/admin-dashboard/imports/ui/template/src/components/CustomInput/CustomInput.js
(web.browser.legacy)
If you notice problems related to these missing modules, consider running:
meteor npm install --save assets
I did check the link and it is corrected but it always logs this error .I did try to run the command it shows but nothing happened.Every single time i import the components it always run into this problem.