we use MERN as our seed.

MERN is a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS. It minimises the setup time and gets you up to speed using proven technologies.

• Website
• Documentation
• Discussions

Note : Please make sure your MongoDB is running. For MongoDB installation guide see this. Also npm6 is required to install dependencies properly.

1. npm run start - starts the development server with hot reloading enabled

2. npm run bs - bundles the code and starts the production server

3. npm run test - start the test runner

4. npm run watch:test - start the test runner with watch mode

5. npm run cover - generates test coverage report

6. npm run lint - runs linter to check for lint errors

Assets can be kept where you want and can be imported into your js files or css files. Those fill be served by webpack in development mode and copied to the dist folder during production.

We use babel to transpile code in both server and client with stage-0 plugin. So, you can use both ES6 and experimental ES7 features.

There are docker configurations for both development and production.

To run docker for development:

docker-compose build # re-run after changing dependencies
docker-compose up

or, if you want to override the web port:

WEB_PORT=<your_custom_port> docker-compose up

To run docker for production:

docker-compose -f docker-compose-production.yml up --build

To reset the database:

docker-compose down --volumes

It contains a blueprints array. Each object in it is the config for a generator. A blueprint config contains the name, description, usage, and files array. An example blueprint config

{
  "name": "dumb-s",
  "description": "Generates a dumb react component in shared components",
  "usage": "dumb-s [component-name]",
  "files": [
    {
      "blueprint-path": "config/blueprints/dumb-component.ejs",
      "target-path": "client/components/<%= helpers.capitalize(name) %>.js"
    }
  ]
}

A file object contains

1. blueprint-path - location of the blueprint file

2. target-path - location where the file should be generated

3. parent-path - optional parameter, used if you want to generate the file inside an already existing folder in your project.

Also, target-path supports ejs and the following variables will be passed while rendering,

1. name - <component-name> input from user

2. parent - in particular special cases where you need to generate files inside an already existing folder, you can obtain this parent variable from the user. A config using that will look like,

   {
     "name": "dumb-m",
     "description": "Generates a dumb react component in a module directory",
     "usage": "dumb-m <module-name>/<component-name>",
     "files": [
       {
         "blueprint-path": "config/blueprints/dumb-component.ejs",
         "parent-path": "client/modules/<%= helpers.capitalize(parent) %>",
         "target-path": "components/<%= helpers.capitalize(name) %>/<%= helpers.capitalize(name) %>.js"
       }
     ]
   }

   Here, notice the usage. In <module-name>/<component-name>, <module-name> will be passed as parent and <component-name> will be passed as <name>.

3. helpers - an helper object is passed which include common utility functions. For now, it contains capitalize. If you want to add more, send a PR to mern-cli.

Blueprints are basically ejs templates which are rendered with the same three variables (name, optional parent and helpers object) as above.

To make the hot reloading of CSS work, we are not extracting CSS in development. Ideally, during server rendering, we will be extracting CSS, and we will get a .css file, and we can use it in the html template. That's what we are doing in production.

In development, after all scripts get loaded, react loads the CSS as BLOBs. That's why there is a second of FOUC in development.

This warning is visible only on development and totally harmless. This occurs to hash difference in react-router. To solve it, react router docs asks you to use match function. If we use match, react-hot-reloader stops working.