MERN stack boilerplate

mern

It goes without saying that the MERN stack is one of the most popular stacks for modern web development and, as a result, there exist many boilerplates. However, in my opinion most of these boilerplates include more than is necessary to get started. While it is nice to have what is included I prefer to take a more additive approach when developing. Therefore, I desired something more minimal.

For this project I distilled down whats included to what I always find myself using throughout all my MERN projects. For my build tools I've included Webpack 4 and Babel. On the front-end I've included Redux, Redux-saga, Axios and Styled Components. For the back-end the only extra library that is added,aside from Mongoose, is Morgan for logging. Finally, for testing I've included Mocha, Chai and Enyzme.

GitHub repo:

Project structure

client/
    components/
    constants/
    containers/
    dist/
    reducers/
    styles/
    app.js
    index.html
    reducer.js
    store.js
    testSetup.js

sever/
    controllers/
    logs/
    models/
    routes/
    services/
    app.js

The client

The client is where the React project resides. The purpose of each folder and file is the following:

  • components - where all presentational components go. Here I like to give each component its own folder and in the folder have the following files
ComponentName/
    index.js
    test.js
    styles.scss (if not using styled components)
  • constants - Where the action types for redux are places.
  • containers - For any components that provide data and behavior to any presentational component. These are usually reserved for components that interface with Redux.
  • reducers - For Redux reducers.
  • styles - Any global styles go here.
  • dist - Where the project is built when calling npm run deploy:client.
  • app.js - The entry point for the react app.
  • index.html - The HTML file, pretty standard.
  • reducer.js - Where reducers are combined.
  • store.js - The store code for Redux.
  • testSetup.js - Sets up js-dom and enzyme for unit testing.

Included components

I've included in this project some useful components I created and find myself reusing quite a lot. Below is a picture of all the components in action together:

included components

  • Navbar - Just a simple Navbar with the option to add a logo and include links.
  • Card - Standard card component, Allows one to set the image, title, paragraph and button link.
  • Billboard - A card-like component that allows one to set the background and display a call to action styled message along with a link as a button. For an example see the first row middle column in the image above.
  • Masonry - A 3 column masonry grid for displaying cards. I found myself displaying card grids throughout may of my projects and often times than not the images are of different heights. Using a traditional grid, this will result in extra whitespace and miss-alignment. So I decided to implement my own Masonry component. While it is not as flexible as something like Masonry.js, it gets the job done for what I want.

The server

Nothing really fancy here, I've just included the typical directories:

  • models - Mongoose models.
  • controllers - Functions for fetching and preparing data from models.
  • logs - Self explanatory.
  • routes - Endpoints in the app.
  • services - Bits of code that can be reused by controllers. For for example a function to fetch data that is used in multiple places.