An easy to use full-stack MERN project: MongoDB, Express, React, Node.js
Client React app scaffolded with create-react-app
Monorepo project components (client, server, shared) integrated with Yarn workspaces
Install Node.js
Install Yarn
Install nodemon package globally:
yarn global add nodemon
Install server and client packages:
yarn install
Install MongoDB
Ensure MongoDB is running on mongodb://localhost:27017
(or change the const mongoUrl
line in server/src/index.js
to point to your MongoDB server)
In the project root directory, start the server and client:
yarn start
Note: In development the client app will be served by create-react-app (webpack dev server) and the proxy entry in the client app's package.json
will pass any api requests to the node server.
Build project:
yarn build
Deploy build
directory
Start node server:
node main.js
Navigate your browser to http://localhost:5000
I have included some helper scripts as part of the package.json
to reduce the need to cd
in and out of the client and server directories:
Script | Result |
---|---|
yarn run client |
starts the client app |
yarn run server |
starts the server |
yarn start |
starts the server and client app concurrently |
yarn client-build |
builds the client app |
yarn server-build |
builds the server app |
yarn build |
builds the server and client app, then copies both to the root build directory for deployment |
yarn client-add <package> |
adds a package to the client app |
yarn server-add <package> |
adds a package to the server |
yarn shared-add <package> |
adds a package to the shared module |
yarn client-remove <package> |
removes a package from the client app |
yarn server-remove <package> |
removes a package from the server |
yarn shared-remove <package> |
removes a package from the shared module |
+-- .vscode # vs code configuration
|
+-- build/ # project builds to here
+-- packages/ # yarn workspaces
| +-- app/ # react client app
| | +-- build/ # client builds to here
| | +-- public/ # static resources
| | +-- src/ # client source
| | | +-- apis/ # apis for models to communicate with server
| | | +-- components/ # react components
| | |
| | +-- .env # allows absolute paths for imports
| | +-- jsconfig.json # vscode config for js project
| | +-- package.json # yarn package config
| | +-- README.md # create-react-app generated readme
| | +-- yarn.lock # yarn package lock file
| |
| +-- server/ # node web server + api
| | +-- build/ # server builds to here
| | +-- src/ # server source
| | | +-- apis/ # registers api endpoints
| | | +-- models/ # mongoose data models
| | | +-- index.js # server config
| | |
| | +-- package.json # server yarn package config
| |
| +-- shared/ # shared project modules
| +-- api-endpoints/ # describes api endpoints (urls)
|
+-- tools/ # project build tools
+-- LICENSE # MIT license
+-- package.json # project yarn package config
+-- README.md # this readme file
+-- yarn.lock # yarn package lock file
This project is licensed under the MIT open source license.