Guide to setup the full stack development environment with “REACT” frontend in Ubuntu!!

Hey !!

If you want to develop an MERN (MySQL/Express/React/Node.js) Stack application then this tutorial is for ‘you’. In later section ,i will show you step by step how to setup these tech in your local machine.

Prerequisite


I presumed that you have …….

  1. A better internet connection
  2. Node/Npm installed in your local machine
  3. Some basic knowledge of terminal commands
  4. MySQL server installed …..

What you will learn from this tutorial

  1. How to create a basic react app …
  2. Connecting Express server and MySQL database…
  3. How to manage server side and client side properly.

Step 1 (Setup for basic react app)

According to Facebook react.js website create react app is the best and comfortable way to build single page application in React.

First we have to install the react app globally in our computer,go into your terminal and type …

npm i -g create-react-app

(here -g refers to global installation, you may need a sudo before above command if you have not access to root)

Next we will create a react application by simply writing the following command in terminal….

create-react-app my_app

(here my-app is the directory(folder) where your react application is created)

create-react-app installation

After creating the react app, type the following command to run the application in browser …..

cd my_app
npm install && npm start

After the execution of above commands you will get the following screen in your browser running at localhost:8080 (8080 is the default port)

react application in browser

Great!! ***you have created your first react app ***

Step 2 (creating your express server)

To handle the client side and server side separately make a new folder Client in the my_app directory(my_app/Client) and copy all the files and folders of my_app directory in Client folder.Your Client directory looks like ……

my_app/Client

Next create a Server directory(my_app/Server) and type the following command…

cd Server
npm init

After execution of above command, terminal will ask you some questions like name ,version,description,author as you can see below from the figure….

npm init command

Next step is to install the express ,so go to the terminal and type

npm install --save express

To verify that express is installed or not in your server directory ,you can check your package.JSON file in Server directory ,it looks like as…..

my_app/Server/package.json

As you can see the version number of express in the dependencies section ,it means express is installed ….

Now create a app.js file in the Server directory and put the following code into it and then save it.

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(port, () => console.log('Listening on port ${port}'));

Now open the terminal and run the following command..

node app.js

(Above command will start the server at port no. 5000 ,when you open the URL ‘localhost:5000' in your browser you can see the ‘hello world’)

express_hello world at port 5000

Step 3 (Installing MySQL )

To connect the server with mysql ,first we have to install the mysql npm package by the following command…

npm install --save mysql

After installing you have to add some lines in your app.js file in Server directory to connect the server to database …

const mysql = require('mysql');
const con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'pass',
database: 'Form'
});
con.connect(function (err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log("Connected!");
});

(In above code you have to use your own user id,password and database name)

After adding this snippet of code to your app.js file,it will look like this….

app.js with MySQL configuration

Ohh !!great you have done your installation ……..

To understand individually these tech you can go to the following links :-

  1. React.js
  2. Express
  3. MySQL

In next blog ,i will give the brief description about the react.js frontend framework.

😊😊Thanks 😊😊