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.
Labels:

Comments

Post a Comment

Popular Posts

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=...
95 comments
Read more

Why HashMap key should be immutable in java

HashMap is used to store the data in key, value pair where key is unique and value can be store or retrieve using the key. Any class can be a candidate for the map key if it follows below rules. 1. Overrides hashcode() and equals() method.   Map stores the data using hashcode() and equals() method from key. To store a value against a given key, map first calls key's hashcode() and then uses it to calculate the index position in backed array by applying some hashing function. For each index position it has a bucket which is a LinkedList and changed to Node from java 8. Then it will iterate through all the element and will check the equality with key by calling it's equals() method if a match is found, it will update the value with the new value otherwise it will add the new entry with given key and value. In the same way it check for the existing key when get() is called. If it finds a match for given key in the bucket with given hashcode(), it will return the value other...
1 comment
Read more

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 ...
Post a Comment
Read more

Multiple data source with Spring boot, batch and cloud task

Here we will see how we can configure different datasource for application and batch. By default, Spring batch stores the job details and execution details in database. If separate data source is not configured for spring batch then it will use the available data source in your application if configured and create batch related tables there. Which may be the unwanted burden on application database and we would like to configure separate database for spring batch. To overcome this situation we will configure the different datasource for spring batch using in-memory database, since we don't want to store batch job details permanently. Other thing is the configuration of  spring cloud task in case of multiple datasource and it must point to the same data source which is pointed by spring batch. In below sections, we will se how to configure application, batch and cloud task related data sources. Application Data Source Define the data source in application properties or yml con...
58 comments
Read more