Skip to main content

Setting up ReactJS for development and deployment

In this tutorial we will learn how to create a react application.

Softwares required for ReactJS

We need to install below softwares for react development.

Visual studio code

This software is free and can be downloaded from
Once downloaded, extract the zip  and place the binary under "Applications" and allow app access from System Preferences -> Security & privacy.

Node.JS and NPM

Node.JS provides a java script enabled environment to run on a web server. It eases our development for UI based applications. NPM is a package manager which installs along with Node.jS and helpful in installing packages and libraries.
Install Node.JS and NPM using brew.
brew install node
Check version of Node and NPM using below command.
node -v
npm -v

Create React application

To create react application we will first install the required package and latter will use it to create our ReactJS application.

Install create-react-app package

Execute below command to install this package which will be used latter to create React applications.
npm install -g create-react-app
If you getting below error then please check if you have sufficient permission to download packages and your network settings are correct.  I faced this issue with my user and resolved it by executing with root user.
npm ERR! network request to failed, reason: getaddrinfo ENOTFOUND
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
Executing with root user:
sudo npm install -g create-react-app

Create ReactJS application

Execute below command in desired folder location to create the react application.
npx create-react-app hello-react-app
It will create an application with given name in current directory. Now go to this directory and execute below command.
npm start
You will see below output in console and it will open the landing page in browser. If it is not opening then you can access it using given URL in browser.
Compiled successfully!

You can now view hello-react-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://xxxxxxxxxx:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.
You will see below screen in browser where it displays the ReactJS logo.

Building and running

To build the application, you can execute below command. This build command create a "build" folder in application's root directory which can be deployed to any static or web server.
npm run build
Once your build is successful, you can install"serve" using node which is a static server.
npm install -g serve
Once it is installed you can run your build using below command in application's root directory.
serve -s build
If it executes successfully then you will see below output.
Now you can open the same URL (in the above image) in browser and you will see your landing page.


Post a comment

Popular Posts

SpringBoot - @ConditionalOnProperty example for conditional bean initialization

@ConditionalOnProperty annotation is used to check if specified property available in the environment or it matches some specific value so it can control the execution of some part of code like bean creation. It may be useful in many cases for example enable/disable service if specific property is available. Below are the attributes which can be used for property check. havingValue - Provide the value which need to check against specified property otherwise it will check that value should not be false. matchIfMissing - If true it will match the condition and execute the annotated code when property itself is not available in environment. name - Name of the property to be tested. If you want to test single property then you can directly put the property name as string like "" and if you have multiple properties to test then you can put the names like {"prop.name1","prop.name2"} prefix - It can be use when you want to apply some prefix to

Asynchronous REST service implementation in Spring boot

In this tutorial we will see how to create an asynchronous REST service endpoint using Spring boot application. Asynchronous service works in a way that it will not block the client request and do the processing in separate thread. When work is complete the response returned to the client so our service will be able to handle more client requests at the same time, compare to synchronous processing model. Let's understand how it is working in synchronous mode. In such server/client application at server side it has a pool of threads which are serving the request. If a request received by a thread then it will be blocked until it send the response back to client. In this case if processing doesn't take much time it will be able to process it quickly and accept other client requests but there could be one situation when all threads are busy and not able to accept the new client requests. To overcome of such problems, asynchronous processing model introduced for REST service

Setting up kerberos in Mac OS X

Kerberos in MAC OS X Kerberos authentication allows the computers in same domain network to authenticate certain services with prompting the user for credentials. MAC OS X comes with Heimdal Kerberos which is an alternate implementation of the kerberos and uses LDAP as identity management database. Here we are going to learn how to setup a kerberos on MAC OS X which we will configure latter in our application. Installing Kerberos In MAC we can use Homebrew for installing any software package. Homebrew makes it very easy to install the kerberos by just executing a simple command as given below. brew install krb5 Once installation is complete, we need to set the below export commands in user's profile which will make the kerberos utility commands and compiler available to execute from anywhere. Open user's bash profile: vi ~/.bash_profile Add below lines: export PATH=/usr/local/opt/krb5/bin:$PATH export PATH=/usr/local/opt/krb5/sbin:$PATH export LDFLAGS=&

Entity to DTO conversion in Java using Jackson

It's very common to have the DTO class for a given entity in any application. When persisting data, we use entity objects and when we need to provide the data to end user/application we use DTO class. Due to this we may need to have similar properties on DTO class as we have in our Entity class and to share the data we populate DTO objects using entity objects. To do this we may need to call getter on entity and then setter on DTO for the same data which increases number of code line. Also if number of DTOs are high then we need to write lot of code to just get and set the values or vice-versa. To overcome this problem we are going to use Jackson API and will see how to do it with minimal code only. Maven dependency <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.9</version> </dependency> Entity class Below is