MERN Stack with Docker

MongoDB - Express - React - Redux - React Native - NodeJS

Source Code Demo

CI Testing code style: prettier license

mern-logo

MERN Stack with Docker

MERN stack is intended to provide a starting point for building full-stack JavaScript applications, including dynamic web and mobile apps. The stack is made of MongoDB, Express, React, Redux, React Native and NodeJS.

mern-workflow

Demo

  • Web app demo
  • Mobile app demo
  • Dummy accounts:
    • email: admin@tdev.app - password: password
    • email: user@tdev.app - password: password

Project Breakdown

1. API Server

2. React Client

3. React Native - Mobile

  • Directory mobile
  • Created by using expo-cli. To switch to bare workflow, please see docs here
  • Todo:
    • Redux store - react-redux
    • Router - react-navigation
    • Material design - react-native-paper
    • Authentication screens
      • Sign up screen
      • Sign in screen with email, Facebook or Google account
      • Request password reset email screen
      • Request verification email screen
      • Settings screen

4. Nginx Proxy

5. CI and CD

  • Directory .github/workflows
  • Todo:
    • Testing workflow
    • Building and deploying workflow

Getting started

1. Install expo-cli

To develop the mobile app, install expo-cli globally:

npm install -g expo-cli

2. Clone the mern-stack repository

git clone https://github.com/t-ho/mern-stack.git
cd mern-stack
cp .env.example .env
cp client/.env.example client/.env
cp mobile/.env.example mobile/.env
# Edit all three .env files to meet your requirements

3. Install package dependencies

In the root directory, run:

npm install

4. Start development servers

To start server, client, and mobile, run:

# In the root directory (mern):
npm start
# Server API is running at http://localhost:SERVER_PORT (http://localhost:8861 by default)
# Web client is running at http://localhost:PORT (http://localhost:3000 by default)
# Mobile - Expo DevTools is running at http://localhost:19002

NOTE:

  • For the sake of simplicity, we use free service ngrok to create a public API URL for mobile development. The downside of this approach is that the public URL is only available for 8 hours, so we need to restart the npm process every 8 hours.
  • After 8 hours, the mobile process will be terminated, and a warning message will be displayed in your terminal to remind you to restart npm process.

To restart npm process (If you don’t start the mobile development process, ignore this step):

# In your current terminal, press Ctrl + C to exit. Then run
npm start # start server, client and mobile dev process
# or
npm run server:mobile # start server and mobile dev process

Or to start server and client only, run:

# In the root directory (mern):
npm run server:client
# Server API is running at http://localhost:SERVER_PORT (http://localhost:8861 by default)
# Web client is running at http://localhost:PORT (http://localhost:3000 by default)

Or to start server and mobile only, run:

# In the root directory (mern):
npm run server:mobile
# Server API is running at http://localhost:SERVER_PORT (http://localhost:8861 by default)
# Mobile - Expo DevTools is running at http://localhost:19002

5. Run the mobile app on your mobile devices

  • On iOS devices, install Expo Client
  • On Android devices, install Expo
  • Then scan QR code displayed on your terminal to launch the app.

6. Debug mobile app with react-native-debugger

  • Install react-native-debugger.
  • Open React Native Debugger window instance with port 19001 (Debugger > New Window).
  • Enable Debugging mode on your iOS simulator or Android emulator.

7. Debug web app with Redux DevTools

8. Docker

You can start the MERN stack (server and client only) using docker-compose:

Development mode

git clone https://github.com/t-ho/mern-stack.git
cd mern-stack
cp .env.example .env
cp client/.env.example client/.env

# Edit the .env file to meet your requirements
docker-compose up
# The mongoDB service listen on port 27018

The nginx-proxy server will listen on port 8080 (NGINX_PROXY_PORT) by default.

Production mode

git clone https://github.com/t-ho/mern-stack.git
cd mern-stack
cp .env.example .env.prod

# Edit the .env.prod file to meet your requirements
docker-compose -f docker-compose.prod.yml  --env-file ./.env.prod up -d

Testing

In the root (mern-stack) directory, run:

npm run test

Testing frameworks: