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:
Always run React build command on server to get optimised version of your React app.
npm run build
Feel free to contact if you need any help regarding this setup π€
Top comments (2)
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.
Keep it up. Will be happy to help further.