Boilerplate for creating fullstack apps using following technologies:
- React
- Redux
- React router V4
- Node.js
- Express.js
- MongoDB
- Mongoose
- Passport.js
The frontend and the backend are completely independent of each other.
- navbar provided with options such as sign in, sign out, sign up, user's settings, sign out
- registration system with JWT
- 3 CSS framework boilerplates included, just choose one you are going to use
First download the repo on local machine:
git clone https://github.com/alan2207/MERN-starter.git
cd MERN-starter
Install dependencies for the client:
cd client
npm install
There are currently 3 CSS frameworks included within the boilerplate:
- Bootstrap
- Bulma
- Materialize
The src
folders look like this:
src-bootstrap
src-bulma
src-materialize
To pick one do following:
- remove all
src
folders except thesrc
folder with the desired CSS framework - rename the remaining
src
folder to justsrc
- in
client/config.js
folder, setROOT_URL
to the servers URL.
Install dependencies for the server:
- if in client folder:
cd ../server
, elsecd server
npm install
Make sure to modify your config.js
file in server folder to set the database, port etc.
client
|-- node_modules // installed packages
|-- src
| |-- actions
| | `-- index.js // all action creators go here
| | `-- types.js // descriptions of action types
| |-- components // dumb components - unaware of the app state
| | `-- About.js
| | `-- App.js
| | `-- Footer.js
| | `-- InputField.js
| | `-- Settings.js
| |-- containers // smart components - aware of the app state
| | |-- auth
| | | `-- Changepassword.js
| | | `-- RequireAuth.js // hoc - authenticated users only components
| | | `-- RequireUnauth.js // hoc - unauthenticated users only components
| | | `-- Signin.js
| | | `-- Signup.js
| | `-- EditInfo.js
| | `-- Header.js
| | `-- Home.js
| |-- reducers
| | `-- auth_reducer.js // reducer for authentication
| | `-- index.js // combining of all reducers happen here
| |-- styles // styles for the app
| | `-- style.css
| `-- index.html // main html file
| `-- index.js // main js file
|-- test
| |-- components
| `-- test_helper.js
`-- .babelrc
`-- .gitignore
`-- config.js
`-- package.json
`-- webpack.config.js
server
|-- controllers
| `-- authentication.js
|-- models
|-- `-- User.js
|-- node_modules
|-- services
| `-- passport.js
`-- config.js
`-- package.json
`-- router.js
`-- server.js