David Boyne

Technical Lead @Comparethemarket. Organiser of Agile-Peterborough. Speaker & evangelist of JavaScript, Agile Principles and helping others.

How to build and host a React application faster than making yourself a hot drink...

It will take you longer to make a hot drink that it will to create a new React application and host it in the cloud…

…OK. Well maybe thats asking for abit too much, but once you get passed the setup required, you can create and host your React application within seconds!

Before you run and put the kettle on lets take a look at some ground work you will need to setup first.

Getting prepared

We will be using create-react-app to create our new application and now to deploy it.

Run the following to get both installed on your machine.

npm install -g create-react-app now

NOTE: This command will install now cli globally as npm package. Another (or suggested) approach is to install Now Desktop to ensure automatic updates of now cli.

Once your install has completed its time to create our new React application.

Go turn on the kettle.

Hopefully by the time its boiled our website will be ready and hosted in the cloud.

Setting up your project

First thing we do is create our new application.

create-react-app my-app

Great. We have setup our new project and got the basics in place.

Time to host our application somewhere…

Authenticate & Host your application

Next thing we want to do is use now to host our application. Run these commands inside your my-app directory.

cd my-app
npm build
cd build/

You might need to sign in with your email to deploy your application using now.

Now will run and host your application.

Once you are authenticated (you may need to provide and authenticate your email) your application has successfully deployed you will be given a url in the command prompt which might look something like this https://build-lrgvixfeev.now.sh.

Click on your url, and you can now view your application running in the cloud.

Thats a wrap - Time for a hot drink

Thats it we are done.

We have created a new React application and hosted it using now’s real time and immutable deployments.

Hopefully your kettle has now boiled and you can make yourself that refreshing hot drink.