mern-app-generator

Create, build and deploy MERN stack applications with breeze.

Introduction

MERN App Generator is a CLI-based tool that simplifies the process of creating, building and deploying MERN stack applications.

Getting Started

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.

Initial assumptions

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 \ path.

Installation

Install it once globally:

npm install -g mern-app-generator

Creating an App

To create a new app, run:

mern-app-generator my-app
cd 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 build folder.

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 deploy folder. Now you can deploy your application by running few handful commands:

cd deploy
heroku login
git init
git add *
git commit -m "deploying my-app"
heroku create my-app
git 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

Report Bugs

If you find any error at any stage of use, please consider opening issues.

Contributing

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 me@shahzaibkhalid.com.

License

MERN App Generator is licensed under the MIT License.

npm