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 https://code.visualstudio.com/download.
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 https://registry.npmjs.org/envinfo failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org
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.
reactJS

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.

Comments

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 "property.name" 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 all prop…

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 services. In…

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 our ent…

Web scraper using JSoup and Spring Boot

What is webscraping Webscraping is a technique to extract or pull the data from a website to gather required information by parsing the HTML source of their websites, such as articles from news or books site, products information from online shopping sites or course information from education sites. There are many organisations who uses web scraper to provide the best experience to their customers, for example extract the price for a smartphone from multiple online websites and show their customers the best and cheap product URL.
We will learn here how to code a web scraper by developing a simple new scraper service.
News scraper News scraper is used to extract the news articles or other related contents from a news site. Here we are going to create a web scraper application to pull the articles from news site.
Below are the operations provided by our news scraper service.
List all the authorsSearch articles by author nameSearch articles by article titleSearch articles by article desc…