Create, build and deploy MERN stack applications with breeze.
MERN App Generator is a CLI-based tool that simplifies the process of creating, building and deploying MERN stack applications.
Below is a quick overview of how to install MERN App Generator and how to create, build and deploy a MERN stack application from ground.
MERN App Generator is truly unopinionated and doesn't force you to follow a specific way to build and deploy your application. But some settings are default on the basis of what I think is better and simple to get start. MERN App generator assumes by defualt:
- MongoDB database server deployed to mLab.
- Application (both front-end React and back-end Express based API) is deployed to Heroku.
- React based front-end development server is hosted on port 4000 by default.
- ExpressJS based back-end development server is hosted on port 8000 by default.
- In development, there are two development servers, while in production, there's one server which listens for API related requests at
\api\and React application at base
Install it once globally:
npm install -g mern-app-generator
Creating an App
To create a new app, run:
mern-app-generator my-appcd my-app
It will create a directory called
my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-app ├── webpack.config.js ├── node_modules ├── package.json ├── .gitignore ├── .babelrc ├── .npmignore ├── .env ├── package-lock.json ├── deploy ├── build └── app └── client └── public └── favicon.ico └── index.html └── index.js └── logo.svg └── src └── App └── App.js └── App.css └── server └── public └── server.js └── src
No need to do manual configuration and folder structure is very simple and intuitive, just the files you need to build your app.
But note that all the configuration files are available with some default settings so that you can enhance your application according to your needs.
Once the installation is done, you can run some commands inside the project folder:
Run client development server
In order to run the client-development server:
npm run client-dev
This will automatically open the local development server at http://localhost:4000.
The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.
Run back-end development server
In order to run the back-end development server:
npm run server-dev
This will automatically open the back-end Express.js server at http://localhost:8000.
This back-end development server will communicate the client development server running at port 4000.
Build an application
In order to make a production build of your application:
npm run build
This will produce an optimized build of your application in
Deploy your application
In order to produce a ready-to-deploy version of your application to deploy to Heroku:
npm run deploy
This will produce a ready-to-deploy version of your application in
Now you can deploy your application by running few handful commands:
cd deployheroku logingit initgit add *git commit -m "deploying my-app"heroku create my-appgit push heroku master
And within a few seconds, your application will be live at https://my-app.herokuapp.com/.
Why Use This?
If you're getting started with MERN stack, you'll find that it's somewhat troublesome to bring together all the pieces of your application. You'd likely use MERN App Generator, because it excludes you of:
- Manually creating your application skeleton
- Manually configuring your application
- Manually installing necessary packages
- Manually preparing your application production build
- Manually preparing your application for deployment
If you find any error at any stage of use, please consider opening issues.
This project aims at covering wide areas related to whole MERN ecosystem and thus requires active contributors to maintain the project efficiently. If you want to contribute, write to me at
MERN App Generator is licensed under the MIT License.
Copyright (c) 2017 Shahzaib Khalid