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.
Note : Please make sure your MongoDB is running. For MongoDB installation guide see this. Also npm6
is required to install dependencies properly.
-
npm run start
- starts the development server with hot reloading enabled -
npm run bs
- bundles the code and starts the production server -
npm run test
- start the test runner -
npm run watch:test
- start the test runner with watch mode -
npm run cover
- generates test coverage report -
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
-
blueprint-path
- location of the blueprint file -
target-path
- location where the file should be generated -
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,
-
name
-<component-name>
input from user -
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 asparent
and<component-name>
will be passed as<name>
. -
helpers
- an helper object is passed which include common utility functions. For now, it containscapitalize
. 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.