DEV Community

Cover image for Basic ERN Stack Application Setup
Navdeep Singh
Navdeep Singh

Posted on

Basic ERN Stack Application Setup

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
Enter fullscreen mode Exit fullscreen mode

2. Start developing for front end after this command

npm start
Enter fullscreen mode Exit fullscreen mode

3. Install Express server

npm install express --save
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

5. Start Express Server

node server
Enter fullscreen mode Exit fullscreen mode

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:
PM2 Preview

Always run React build command on server to get optimised version of your React app.

npm run build
Enter fullscreen mode Exit fullscreen mode

Feel free to contact if you need any help regarding this setup πŸ€—

Top comments (2)

Collapse
 
itachiuchiha profile image
Itachi Uchiha

This going to be WYSIWYG in future :P

Btw, thanks. Nowadays, I want to build an application with React and you gave me an idea. Thanks.

Collapse
 
navdeepsingh profile image
Navdeep Singh

Keep it up. Will be happy to help further.