Email: [email protected] to [email protected]
$ meteor run
- Installing Mantra CLI
- Creating a mantra project via Mantra CLI
- Running Mantra using Bash
- Creating a module in Mantra CLI
- Creating a file inside container, actions and compontents in a modules in mantra CLI
- Naming Convention
- Data Subscription Non-Global
- Filaname Prefix and Suffix
- Event Names to be used
- Adding a custom CSS file
- Adding a 3rd party scripts/codes such as Boostrap, JS, Fonts and CSS
- Adding Routes
- Adding a schema
- Adding User Authentication
- Using StoryBook
- Adding content inside the
<head></head>
tag using NPM React-Helmet - ESLint Rules
npm install -g mantra-cli
mantra create <project name>
bash ./meteor.sh run
.- This will allow you to run multiple projects in different ports and mongo by updating the
meteor.sh
file.
mantra g module modulename
- module name should be Pascal case Example:
mantra g module PostAddd
mantra g <folder inside module> <module name>: filename
- Example:
mantra g container core:PostAdd
. - Example:
mantra g container Favorites:FavoritesAdd
. - NOTE: When you create a file inside container this will create the same file inside components automatically.
- NOTE: You have to create the files inside actions manually by typing:
mantra g actions Favorites:FavoritesAdd
.
-
Names such as route names, modules and filenames should be plural
-
Filename Example: PostsAdd, PostsView, FavoritesList, InterestsAdd, MessagesView and so on.
-
Route Example:
- /posts/list,
- /posts/view/
id
, - /favorites/list,
- /interests/delete/
data
, - /interests/add,
- /messages/view/
data
and soon...
-
In creating a module it should be all lower case. Example:* "products".
(folder would be products)
. -
In creating an action it should be all lower case. Example: "products".
(file would be products.js)
. -
In creating a container and component it should be Pascal case. Example: "ProductsList" files would be
(containers/products_list.js)
and(components/products_list.jsx)
.
- In creating a non-global subscription you need to add it inside the
context.js
under/client/configs/
. - See the sample code through the link: http://master.snapzio.com/snapzio/mantraboilerplate/blob/prod/client/configs/context.js
- See the function name
authCommon
and the variableuserSubReady
. - Using the non-global subscription:
- You can directly use the subscription inside the module container by calling the exported function from the context.js. Example:
const {authCommon} = context();
- See the sample code through the link: http://master.snapzio.com/snapzio/mantraboilerplate/blob/prod/client/modules/users/containers/auth_checker.js
- You can now use it in the component by calling the props from the container:
const {MainLayout, content, userId} = this.props;
.
- You can directly use the subscription inside the module container by calling the exported function from the context.js. Example:
- Note: this is still subject for improvement or changes.
- The filename prefix should be the
module name
and the suffix should beevent name
. - Example: If the module name is
Favorites
and the event is toadd
favorite users, the filename should beFavoritesAdd
. - Example: If the module name is
Interests
and the event is toview
users you added in your interest list, then the filename should beInterestsView
.
- Add
- View
- Update
- List
- Delete
- it should be added inside the assets folder inside the client. Example:
/client/assets/stylesheets/style.css
.
- they should all be in Pascal Case
- these files should be in Public
- it should be added in the head tag
- Please refer to the topic below Adding content inside the tag using NPM React-Helmet
- Each module should have its own
routes.jsx
.
- In adding a schema it should be added under
/lib/collections/<collection file>.js
. - Click the link for the sample format: http://master.snapzio.com/snapzio/mantraboilerplate/blob/prod/lib/collections/products.js
- The Kadirah DocHead needs to be added inside the app loader
/client/main.js
. - Just import the package inside the file
import {DocHead} from 'meteor/kadira:dochead';
. - Then use it, here are the syntax:
//Site Title
var title = 'Sample DocHead';
DocHead.setTitle(title);
// Loading Javascript
var gaScript = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js';
DocHead.loadScript(gaScript);
// Loadintg CSS
var cssLink = {rel: "stylesheet", href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'};
DocHead.addLink(cssLink);
// Loading Meta tag
var metaInfo = {name: "description", content: "FlowRouter SSR is Awesome"};
DocHead.addMeta(metaInfo);
- There should be a space after if condition and before parentheses. Example:
if< space >(condition){arguments}
. - If Else should be avoided
if(err) {
return throw new Meteor.Error(e);
} else {
return 'Success';
}
if(err) {
return throw new Meteor.Error(e);
}
return 'success';
- import should be relative meaning to say import path should not point to root directory like
/client/path/and/so/on.jsx
instead you have to use../path/to/the/exact/file.jsx
.