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

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=&

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

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

jaxb2-maven-plugin to generate java code from XSD schema

In this tutorial I will show how to generate the Java source code from XSD schema. I will use jaxb2-maven-plugin to generate the code using XSD file which will be declared in pom.xml to make it part of build, so when maven build is executed it will generate the java code using XSD. Class generation can be controlled in plugin configuration. Maven changes (pom.xml) Include below plugin in your pom.xml. Here we have done some configuration under configuration section as given below. schemaDirectory : This is the directory where I keep my schema (XSD file). outputDirectory : This is the java source location where I want to generate the Java files. If it is not given then by default it will be generate inside target folder. clearOutputDir : If this property is true then it will generate the classes on each build otherwise it will generate only if output directory is empty. <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>jaxb2-maven-plugin</art