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

Singleton class in java

What is Singleton class Singleton is a design technique which gaurantees that there will be only instance of a class globally. Such classes are required when we need to create some objects which are memory/ resource extensive and we can't afford many such objects. Using singleton We can maintain single object per JVM per classloader. Classloader could be different in different hierarchy and in such case we may have more than one instances of singleton but we can avoid it by loading it at appropriate classloader. For example in an ear application there could be multiple web modules and each one of them will have their own singleton instance. Sometimes it may be a need but sometimes it could be a flaw which can be resolved by loading it either at ear level or web module level as per requirement. Implementing singleton class There are two different ways to implement singleton in java. Using singleton design pattern In this pattern we can create singleton either using lazy...
6 comments
Read more

Microservices with Spring Boot - complete tutorial

In this tutorial we are going to learn how to develop microservices using spring boot with examples. Main focus of this tutorial is on learning by doing hands-on. Before hands-on we will first understand what is microservices and related terminologies like DDD, 12-Factors App, Dev Ops. What is a Microservice In simple terms microservice is a piece of software which has a single responsibility and can be developed, tested & deployed independently. In microservices we focus on developing independent and single fully functioning modules. Opposite to microservice, with monolithic application it focuses on all the functionality or modules in a single application. So when any changes required to monolithic application it has to deploy and test the complete application while with microservice it has to develop and deploy only affected component which is a small service. It saves lot of development and deployment time in a large application. It's basically an architectural style ...
5 comments
Read more

Print English alphabets using for loop in Java

 In this post we will see how we can print the english alphabets [a-z] using for loop. One way is to have a character array of a-z and print it using loop. But there is another way to just print them using ascii code. What is ascii code There are total 256 numbers in ascii and each of which represents a specific character including alphabets. Numbers from 65-90 represents the alphabets in capital case [A-Z] and numbers from 97-122 represents alphabets in small case [a-z]. Printing alphabets using for loop with ascii numbers Below code prints alphabets in both capital and small cases using for loop. Here you can see we are using ascii numbers in for loop which are printed after type casted to character type where it automatically translate the number to equivalent character. public class PrintAlphabetsUsingLoop { public static void main(String[] args) { int alphabetsCount = 26; int capitalLetterStart = 65; int smallLetterStart = 97; System.out.println("Printing lette...
5 comments
Read more