DEV Community: Sujay Kundu

Create a Portfolio/Blog/Website using Devlopr

Sujay Kundu — Sat, 15 May 2021 15:21:41 +0000

Hello everyone ! 🤠

In this article, I would like to share on how you can create a website easily using Devlopr- A Jekyll built for Developers - devlopr-jekyll (built by me !), and you can host it for free using Github Pages or Netlify by using only 5 simple steps. Since devlopr is Open Source. One can easily contribute in improving it too :)

Devlopr Jekyll Theme (Demo) - https://devlopr.netlify.com

Step 1. Fork the repo - click here

Step 2. Use your-github-username.github.io as the new repo ( Replace your-github-username with yours). Remember if you use the name other than your-github-username.github.io , your blog will be built using gh-pages branch.

Step 3. Clone the repo Locally :

Using browser, go to your repo and copy the clone url :

 $ git clone https://github.com/yourusername/yourusername.github.io
 $ cd yourusername.github.io
 $ code .

Step 4. Edit _config.yml file (Configuration Settings)

Updating Config Settings :

This is a sample config settings, replace the values for your Blog (accordingly):

_config.yml


title: My Blog  # Title of the Blog goes here
subtitle: Blog built using devlopr  # Sub-title of the Blog goes here
description: >- # Description goes here 

url: "" # the base hostname & protocol for your site, e.g. https://example.github.io or https://example.com
baseurl: "" # the subpath of your site, e.g. /blog 

urls:     # Navigation Links
    - text: About
      url: /about
    - text: Blog
      url: /blog
    - text: Gallery
      url: /gallery
    - text: Shop
      url: /shop
    - text: Contact
      url : /contact


# Author Details
author_logo: profile.png  # Author Logo
author: John Doe # Author Name
author_bio: Hi, my name is John Doe. # Author Bio
author_email: "mail@johndoe.com"  # Author Email
author_location: India # Author Location
author_website_url: "https://johndoe.com" # Author Website URL
typewrite-text: Hi, Welcome to my Blog # Homepage Type Text 
author_work_experiences: # Experiences  (Companies you have worked with)
            - company_name: Google
              company_logo: google.png
              company_url: https://google.com
              designation: Software Engineer
              description: Worked on various Google Products
              visibility: true
            - company_name: Microsoft
              company_logo: microsoft.png
              company_url: https://microsoft.com
              designation: Azure Developer
              description: Worked on various Azure Cloud Products
              visibility: true
author_education_details: # Education Details Goes here 
              - college_logo: mit.png
                college_name: MIT
                college_url: https://mit.org
                college_degree: CS Engineer
                description: Bachelor of Technology
                visibility: true
author_project_details: # Project Details Goes Here
              - project_thumbnail: gamershub.png
                project_title: Gamers Hub
                project_description: A Platform built for Gamers and Game Devs
                project_url: https://gamershub.in
                visibility: true
              - project_thumbnail: hack4r.PNG
                project_title: Hack4r
                project_description: A Platform built for Hackers and Penetration Testers
                project_url: https://hack4r.com
                visibility: true

# social links
twitter_username: johndoe
github_username:  johndoe 
facebook_username: johndoe
linkedin_username: johndoe
behance_username: johndoe
instagram_username: johndoe
medium_username: johndoe
telegram_username: johndoe
dribbble_username: johndoe
flickr_username: johndoe

#for comments ( we got Disqus and Hyvor Commenting, uncomment the one you want to use )
disqus_shortname: john-doe 
hyvor_talk_website_id: 244 

# wakatime username (for coding activity tracking)
wakatime_username: johndoe

# mailchimp embedded form url (newsletter):
mailchimp_form_url: https://johndoe.us10.list-manage.com/subscribe/post?u=asfsaagd

# formspree (contact form)
formspree_email: johndoe@gmail.com

# syntax highlighter
markdown: kramdown
highlighter: rouge
permalink: pretty

# Choose what to show ( can be true or false)
show_author_work_experiences: true
show_author_education_details: true
show_author_project_details: true

# pagination of posts
paginate: 4
per_page: 4
paginate_path: "/blog/page/:num/"

# minify
# compress_html:
#   clippings: all
#   comments: ["<!-- ", " -->"]
#   endings: all
#   ignore:
#     envs: ['development']

# Archives
# jekyll-archives:
#   enabled:
#     - categories
#   layout: archive
#   permalinks:
#     category: '/category/:name/'

# Shop   (Snipcart settings)
collections: 
 - products

# Gallery
defaults:
  -
    scope:
      path: "gallery"
    values:
      permalink: /:path/:basename:output_ext

# Build settings
plugins:
  - jekyll-paginate
  - jekyll-gist
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-menus


# Exclude from processing.
# The following items will not be processed, by default.
# Any item listed under the `exclude:` key here will be automatically added to
# the internal "default list".
#
# Excluded items can be processed by explicitly listing the directories or
# their entries' file path in the `include:` list.
#
exclude:
  - .sass-cache/
  - .jekyll-cache/
  - gemfiles/
  - Gemfile
  - Gemfile.lock
  - node_modules/
  - vendor/bundle/
  - vendor/cache/
  - vendor/gems/
  - vendor/ruby/

destination: ./build  # setting build as default

Once you have done all the changes, its time to push the changes - commit to Github with config setting changes :

 $ git add .
 $ git commit -m "my new blog using devlopr-jekyll"
 $ git push origin master

Step 5 - Enable Github Pages for Deployment

Visit your Github Repo settings ! Enable master branch as Github Pages Branch :

Your new blog will be ready in few minutes ! You can visit your site using [https://yourusername.github.io].

Guide - Managing Website Locally - Install the development requirements:

Set up local development environment

We need ruby and bundler to build our site locally. After installation check if its working:

For ruby :

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]

For bundler :

$ gem install bundler
$ bundler -v
Bundler version 2.1.4

Add jekyll :

$ bundle add jekyll

This command will add the Jekyll gem to our Gemfile and install it to the ./vendor/bundle/ folder.

You can check the jekyll version

$ bundle exec jekyll -v
jekyll 4.0.0

Step 6. Install the gem dependencies by running the following command

$ bundle update
$ bundle install

Step 7. Serve the site locally by running the following command below:

$ bundle exec jekyll serve --watch

or you can also serve using :

$ jekyll serve

Visit http://localhost:4000 for development server

Creating Blog Posts

Start populating your blog by adding your .md files in _posts. devlopr-jekyll already has a few examples.

YAML Post Example:

---
layout: post
title: "Sample Post"
author: Sujay Kundu
date: '2019-05-21 14:35:23 +0530'
category:
        - jekyll
summary: This is the summary for the sample post
thumbnail: sample.png
---

Hi ! This is sample post.

YAML Page Example:

---
layout: page
title: Sample Page
menus: header
permalink: /sample-page/
---

Hi ! This is sample page.

Editing stylesheet - Customizations

You’ll only work with a single file to edit/add theme style: assets/css/main.scss.

Deploy your Changes

Once happy with your blog changes. Push your changes to master branch and in few minutes your Blog is up and running !

Javascript : Concatenating Arrays

Sujay Kundu — Thu, 13 Feb 2020 16:12:28 +0000

There are 3 methods to concatenate arrays using Javascript :

Method 1: using Spread Operator (...)

Assume you have two arrays of numbers, and you want to join the two arrays :

const array1 = [1,2,3];
const array2 = [3,4,5];

// join the two arrays using spread operater '...'

const resultArray = [...array1, ...array2] 

console.log(resultArray);

//  O/P : [1,2,3,3,4,5]

Don't forget, one can do this too:

const array1 = [1,2,3];
const array2 = [...array1, 4];

console.log(array2);

// O/P : [1,2,3,4]

Now what if we want to concatenate three arrays ?

const array1 = [1,2,3]
const array2 = [4,5,6]
const array3 = [7,8,9]

const resultArray = [...array1, ...array2, ...array3];

console.log(resultArray);

// O/P : [1, 2, 3, 4, 5, 6, 7, 8, 9]

Now what will happen if we try to concatenate two different arrays with different data types ?


let array1 = "letters";
let array2 =  [1, 2, 3, 4];

let resultArray = [...array1, ...array2];

console.log(resultArray );

// O/P: ["l", "e", "t", "t", "e", "r", "s", 1, 2, 3, 4]

But why ? why not ["letters", 1, 2, 3 ,4]. This happens because if we use spread our string, it will split the word in to seperate letters. You can probably use the method 2 for that.

Lets now see on how we can do concat operation using array objects :


const array1 =  [ 
                   {
                     "id": 1,
                     "name": "John",
                    },
                    {
                      "id": 2,
                      "name": "Ron"
                    }
                 ];

const array2  = [ 
                   {
                     "id": 3,
                     "name": "Harry",
                    },
                    {
                      "id": 4,
                      "name": "Hermione"
                    }
                 ]

const resultArray = [...array1, ...array2];

console.log(resultArray);

Method 2: Using Array.prototype.concat()

Let's use the same example, but this time using concat() method. This method does not change the existing arrays, but instead returns a new array.


const array1 = [1,2,3];
const array2 = [3,4,5];

// join the two arrays using concat()

const resultArray = array1.concat(array2);

console.log(resultArray);

// O/P : [1, 2, 3, 3, 4, 5]

But what If we want to concatenate three arrays ?

const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = [7,8,9];

const resultArray = array1.concat(array2, array3);

console.log(resultArray);

// O/P : [1,2,3,4,5,6,7,8,9]

now let's check for concatenating arrays of two different types:



const array1 = [1,2,3,4];
const array2 = 'letters';

const resultArray = array1.concat(array2);

console.log(resultArray);

// O/P : [1, 2, 3, 4, "letters"]

Method 3: using Array.prototype.push()

when using push, its important to remember that it won't create a new array, and change existing array data. so use this by keeping this in mind.

Using Spread and push()


const array1 = [1,2,3];
const array2 = [4,5,6];

const resultArray = array1.push(...array2);

// when you use push, it returns the LENGTH of the combined array

console.log(resultArray);  // 6

console.log(array1); // [1, 2, 3, 4, 5, 6]

console.log(array2); // [4, 5, 6]

Using forEach and push() :


const array1 = [1,2,3];
const array2 = [4,5,6];

const resultArray = array2.forEach(item => array1.push(item));

console.log(array1); // [1,2,3,4,5,6]

Using for and push() :


const array1 = [1,2,3];
const array2 = [4,5,6];

for(let x=0; x<array2.length; x++) { 
     array1.push(array2[x]);
} 

console.log(array1); // 1,2,3,4,5,6

Zipper Merge ( Merging two sorted arrays )

Let's think of a scenario, where we have two arrays (both sorted) like :

const array1 = [1, 3, 5];
const array2 = [2, 4, 6];

and the output we want is also sorted ! something like :

const resultArray = [1, 2, 3, 4, 5, 6];

This can be solved easily using spread operator :


// function to return zipped array
function zip(array1, array2) {

      // merge the two sorted arrays 
      let result = [...array1, ...array2];  // [1, 3, 5, 2, 4, 6]

      // sort the result array again 
      return result.sort((a,b) => a-b);  // [1, 2, 3, 4, 5, 6]
}


const array1 = [1, 3, 5];
const array2 = [2, 4, 6];

const resultArray = zip(array1, array2);

console.log(resultArray); // [1, 2, 3, 4, 5, 6]

Unique Array from Two Arrays

Now let's think of a scenario, where you have two arrays (with some elements in common ) like:


const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

and the output we want is a new array with unique elements only :


const resultArray = [1, 2, 3, 4, 5, 6];

So what should we do ? We can create a unique array using spread operator and sets like this:


const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray) // [1, 2, 3, 4, 3, 4, 5, 6]

const resultArray = [...new Set(mergedArray)]; 

console.log(resultArray) // [1, 2, 3, 4, 5, 6]

Utilizing the power of Docker while building MERN Apps using mern-docker

Sujay Kundu — Sun, 09 Feb 2020 14:20:28 +0000

In this article we will learn to build a MERN (Mongodb, Express, React, Nodejs) app using Docker and Docker Compose for both development and production build.

The Source Code of the project is open source and any contributions are most welcome - mern-docker. You can just clone or fork the repo to get started in seconds ! 🚀

1. Creating our App (Folder Structure)

Let's create a new directory for our App.

mkdir myapp

We will be separating our server with client, Let's create our server folder:

cd myapp
mkdir server

Now lets switch to building our Server first :

cd server

2. Building Express Server

Let's now create our Node App inside the server directory. I am using VS Code as editor

Let's initialize our app using:

npm init

It will ask some questions about you app, just hit enter to save the defaults, to create a package.json file.

Installing Dependencies

Since we will be using express and mongodb, lets install the required dependencies :

npm i -S express

and our development dependencies :

npm i -D nodemon

Since we will be using Nodemon to watch our changes, lets add a command to run our server using nodemon in our package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  }

Creating our server

Lets now create our Express server

Create a new file server.js :


// server.js
const express = require('express');
const app = express();
const PORT = 8080;

app.get('/', (req, res) => {
    res.send("Hello World ! ");
});

app.listen(PORT, function () {
    console.log(`Server Listening on ${PORT}`);
});

Cool ! We created a server, which will be listening to PORT 8080. Let's run it :

npm run dev // runs the app in nodemon (watch) mode for any changes to reflect

It should run the app :

Server Listening on 8080

So now, if we visit http://localhost:8080 in our browser, it should show

Hello World !

Connecting to Mongodb

Cool ! Let's now create our mongodb database connection :

We need to install mongoose a ODM for mongodb and dotenv to use environment variables,

npm install -S mongoose dotenv

Create a new folder "src" where we will host our rest of our files, Inside it create a database.js

const mongoose = require('mongoose');
const dotenv = require('dotenv');
dotenv.config();

// mongoose options
const options = {
  useNewUrlParser: true,
  useFindAndModify: false,
  useCreateIndex: true,
  useUnifiedTopology: true,
  autoIndex: false,
  poolSize: 10,
  bufferMaxEntries: 0
};

// mongodb environment variables
const {
    MONGO_HOSTNAME,
    MONGO_DB,
    MONGO_PORT
} = process.env;

const dbConnectionURL = {
    'LOCALURL': `mongodb://${MONGO_HOSTNAME}:${MONGO_PORT}/${MONGO_DB}`
};
mongoose.connect(dbConnectionURL.LOCALURL, options);
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Mongodb Connection Error:' + dbConnectionURL.LOCALURL));
db.once('open', () => {
     // we're connected !
     console.log('Mongodb Connection Successful');
});

We need to create a .env file to store our database varibles (in the server directory)

MONGO_HOSTNAME=localhost
MONGO_DB=myapp_db
MONGO_PORT=27017

Also to use the connection in our express app , call the database connection inside server.js

// Our DB Configuration
require('./src/database');

Now if we run our app, (remember - your local mongodb should be available) :

npm run dev

Your App should be running at PORT 8080 with Mongodb connection at PORT 27017

Creating our Post Model

Before we create our first api endpoint, we need a model for our Blog Posts. Simply say what a blog post will have - title, description, author etc. Let's describe that in our Post Model

Create a new folder models inside src folder and create a new file post.model.js

// Post.model.js
const mongoose = require('mongoose');
const postSchema = new mongoose.Schema({
   title: {
       type: String,
       required: true
   },
   body: {
       type: String
   },
   author: {
       type: String
   }
});

const Post = mongoose.model("Post", postSchema);
module.exports = Post;

Great ! We defined a model for our Post document. Post model has title, body and author all of them are string. Enough for now :)

Creating our Blog API Routes

Let's create our routes : Create a new folder routes inside src folder. Inside it create a file post.router.js

const express = require('express');
const postRouter = express.Router();
const Post = require('../models/post.model'); // post model

/* Get all Posts */
postRouter.get('/', (req, res, next) => {
    Post.find({} , function(err, result){
        if(err){
            res.status(400).send({
                'success': false,
                'error': err.message
            });
        }
        res.status(200).send({
            'success': true,
            'data': result
        });
    });
});

/* Get Single Post */
postRouter.get("/:post_id", (req, res, next) => {
    Post.findById(req.params.post_id, function (err, result) {
        if(err){
             res.status(400).send({
               success: false,
               error: err.message
             });
        }
        res.status(200).send({
            success: true,
            data: result
        });
     });
});


/* Add Single Post */
postRouter.post("/", (req, res, next) => {
  let newPost = {
    title: req.body.title,
    body: req.body.body,
    author: req.body.author
  };
   Post.create(newPost, function(err, result) {
    if(err){
        res.status(400).send({
          success: false,
          error: err.message
        });
    }
      res.status(201).send({
        success: true,
        data: result,
        message: "Post created successfully"
      });
  });
});

/* Edit Single Post */
postRouter.patch("/:post_id", (req, res, next) => {
  let fieldsToUpdate = req.body;
  Post.findByIdAndUpdate(req.params.post_id,{ $set: fieldsToUpdate }, { new: true },  function (err, result) {
      if(err){
          res.status(400).send({
             success: false,
            error: err.message
            });
      }
      res.status(200).send({
        success: true,
        data: result,
        message: "Post updated successfully"
        });
  });
});

/* Delete Single Post */
postRouter.delete("/:post_id", (req, res, next) => {
  Post.findByIdAndDelete(req.params.post_id, function(err, result){
      if(err){
        res.status(400).send({
          success: false,
          error: err.message
        });
      }
    res.status(200).send({
      success: true,
      data: result,
      message: "Post deleted successfully"
    });
  });
});

module.exports = postRouter;

Now let's now use this route in our app. In server.js add the below code :

we need to install body-parser module :

npm install -S body-parser

const bodyParser = require('body-parser');

// Routes
const postRouter = require('./src/routes/post.router');

app.use(
  bodyParser.urlencoded({
    extended: true
  })
);
app.use(bodyParser.json());

app.use('/posts', postRouter);

Great ! All set, let's run our server and check if everything works fine :

npm run dev

Now lets open Postman app to test our API's that we created :

    GET -      /         - Get all posts
    POST -     /         - Create a new Post
    GET -      /:post_id - Get a Single Post using Post Id
    PATCH -    /:post_id - Edit a Single Post using Post Id
    DELETE -   /:post_id - Delete a single Post using Post Id

Great ! All our API's are working fine !

Dockerize Express and Mongodb

Add Dockerfile to the root folder :


#  Dockerfile for Node Express Backend api (development)

FROM node:10.16-alpine

# ARG NODE_ENV=development

# Create App Directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install Dependencies
COPY package*.json ./

RUN npm ci

# Copy app source code
COPY . .

# Exports
EXPOSE 8080

CMD ["npm","start"]

We can simply build our express app with this command

docker build -t node-app .

But.. this will only run our express app, but not together with MongoDb. That’s why we need a docker-compose file. 🐳

Now create another file called docker-compose.yml and paste this:

version: '3.7'

services:
    webapp-server:
      build:
        context: .
        dockerfile: Dockerfile
      image: myapp-server-img
      container_name: myapp-node-express
      volumes:
       - .:/usr/src/app
       - /usr/src/app/node_modules
      ports:
        - "8080:8080"
      depends_on:
        - mongo
      env_file: .env
      environment:
        - MONGO_HOSTNAME=$MONGO_HOSTNAME
        - MONGO_PORT=$MONGO_PORT
        - MONGO_DB=$MONGO_DB
    mongo:
      image: mongo
      container_name: myapp-mongodb
      ports:
        - "27017:27017"

Also we need to change our connection url from localhost to mongo !

Edit your MONGO_HOSTNAME=mongo in .env file

Let's run our App using docker-compose :

Build the images :

docker-compose build

Run the containers :

docker-compose up

Great ! Everything Works :D

3. Building React Client

Let's now build and setup our frontend for our App, Initialize a react-app using npx.

npx create-react-app client

This will create a react-app inside a folder named "client". Let's run the app :

yarn start

This will start a development server at port 3000. You can open browser at http://localhost:3000

Great ! we got our development server up, lets now dockerize our react app

Let's now create our Dockerfile


# Dockerfile for client

# Stage 1: Build react client
FROM node:10.16-alpine

# Working directory be app
WORKDIR /usr/app

COPY package*.json ./

# Install dependencies
RUN yarn install

# copy local files to app folder
COPY . .

EXPOSE 3000

CMD ["yarn","start"]

Let's start building our container using command :

docker build -t myapp-react:v1 .

To verify everything is fine, we run our newly built container using command:

docker run -p 3000:3000 myapp-react:v1

Lets now visit http://localhost:3000 . Great our client is

Okay ! We got our independent containers both for client and server, but they are not currently interacting each other. Let's solve this problem by using docker-compose

4. Connecting Client and Server using Docker Compose

To do this, we need to tell our server about our client !

In our /server/server.js add this :

// will redirect all the non-api routes to react frontend
router.use(function(req, res) {
    res.sendFile(path.join(__dirname, '../client','build','index.html'));
});

And we need to tell our React Client to proxy the API requests at port 8080 (where our server is running):

In our /client/package.json add this :

 "proxy": "http://server:8080"

Cool, let's create a new docker-compose.yml at the root of our project, which will interact with individual Dockerfile's of the client and server and create a network between this containers:

Add this code in docker-compose.dev.yml

version: '3.7'

services:
  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    image: myapp-server
    container_name: myapp-node-server
    command: /usr/src/app/node_modules/.bin/nodemon server.js
    volumes:
      - ./server/:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - "8080:8080"
    depends_on:
      - mongo
    env_file: ./server/.env
    environment:
      - NODE_ENV=development
    networks:
      - app-network
  mongo:
    image: mongo
    volumes:
      - data-volume:/data/db
    ports:
      - "27017:27017"
    networks:
      - app-network
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    image: myapp-client
    container_name: myapp-react-client
    command: yarn start
    volumes:
      - ./client/:/usr/app
      - /usr/app/node_modules
    depends_on:
      - server
    ports:
      - "3000:3000"
    networks:
      - app-network

networks:
    app-network:
        driver: bridge

volumes:
    data-volume:
    node_modules:
    web-root:
      driver: local

What this will do is, it will run all the services parallely, our express backend will run at port 8080, mongodb at 27017 , and react client at port 3000. Let's test it by running the following command in our project root directory :

Now to run docker-compose. We need to create a new file "docker-compose.yml" where we will copy the contents of the docker-compose.dev.yml . It's a good practice to seperate dev and prod docker-compose.

So copy all the content of docker-compose.dev.yml to docker-compose.yml and run :

docker-compose up --build

By this, the docker-compose.yml that we created inside will only be required/used, if you want to work only on the server independent of the client :D

As you can see, if any changes you do either in server or client, will be reflected instantly (best for development)

Awesome ! We created our Blog App :D , lets now check on how to create a production build for our App.

Production Build

For Production, we will be building our client and use it in our server to serve it. Let's create a new Dockerfile.prd (for production) in the project's root directory :

In our server/server.js add the following to tell express that our react client will be served from the build path :

const CLIENT_BUILD_PATH = path.join(__dirname, "../client/build");

// Static files
app.use(express.static(CLIENT_BUILD_PATH));

// Server React Client
app.get("/", function(req, res) {
  res.sendFile(path.join(CLIENT_BUILD_PATH , "index.html"));
});

Great ! Let's now create a production Dockerfile, which will help in copying the build files from the react client and put it in the client folder of our server, which we will use to serve the app.


# Production Build

# Stage 1: Build react client
FROM node:10.16-alpine as client

# Working directory be app
WORKDIR /usr/app/client/

COPY client/package*.json ./

# Install dependencies
RUN yarn install

# copy local files to app folder
COPY client/ ./

RUN yarn build

# Stage 2 : Build Server

FROM node:10.16-alpine

WORKDIR /usr/src/app/
COPY --from=client /usr/app/client/build/ ./client/build/

WORKDIR /usr/src/app/server/
COPY server/package*.json ./
RUN npm install -qy
COPY server/ ./

ENV PORT 8000

EXPOSE 8000

CMD ["npm", "start"]

This will do all the heavy work of building our server and client, using multi-stage builds.

Let's utilize this multi-stage Dockerfile to use it with Docker Compose to run our App (along with mongodb)
:

Add this code in docker-compose.prd.yml :

version: '3.7'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    # env_file: ./server/.env # TODO - uncomment this to auto-load your .env file!
    environment:
      NODE_ENV: production
    depends_on:
      - mongo
    networks:
      - app-network
  mongo:
    image: mongo
    volumes:
      - data-volume:/data/db
    ports:
      - "27017:27017"
    networks:
      - app-network

networks:
    app-network:
        driver: bridge

volumes:
    data-volume:
    node_modules:
    web-root:
      driver: local

Since, we already have a docker-compose.dev.yml and docker-compose.yml already in the root directory. To run production, we need to copy the docker-compose.prd.yml content and replace the docker-compose.yml content.

docker-compose.yml should now have the same content as of docker-compose.prd.yml

Let's test our Production build by running (removing any orphan containers):

docker-compose up --build --remove-orphans

Lets now visit the url : http://localhost:8080

As you can see by the sign in browser navbar, this will be the production react build. Let's now check whether our API's and DB are working properly or not, Since express is serving react, the api's should be working fine:

That's it ! Our App's Production Build is ready for Deployment :D

The Source Code of the project is open source and any contributions are most welcome - mern-docker. You can just clone or fork the repo to get started in seconds ! 🚀

You can checkout and subscribe to my Blog for more interesting tutorials in JS Ecosystem