Basic ERN Stack Application Setup

#javascript #express #react #node

ERN Stack Application is without (M)Mongo, as I haven't database need in this app. This is very interesting setup for a front end developer who mostly crafted websites in HTML5, CSS3 and Vanilla Javascript or jQuery and deployed websites via FTP on Apache Server.

Here I used Express for handling server requests. Reactjs to develop front end using Components, Hooks, JSX, State Management i.e No need to use jquery to handle client side and server side tasks. And base layer is Nodejs (V8 Chrome Engine) is being used to make possible to execute javascript code on command line.

1. First start with React ready to go npm module `create-react-app`

npx create-react-app ern-app
cd ern-app
npm install

2. Start developing for front end after this command

npm start

3. Install Express server

npm install express --save

4. Setup Express server

const express = require('express')
const dotenv = require('dotenv');
const cors = require("cors");
const app = express();
const bodyParser = require("body-parser");
const path = require('path');
const axios = require('axios');
dotenv.config();

//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

// Static Routes
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'home.html'));
});

// React Routes
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function (req, res, next) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.SERVER_PORT || 8080;

5. Start Express Server

node server

6. Production

Setup nodemon or my favorite one pm2 on server using this command npm install pm2 -g followed by pm2 start server.js And after check status of server by pm2 show server
Preview: