The Log Blog

How to boostrap a React web app

11 October, 2018

The trick is simple, you just have a line of code to go.

npx create-react-app react-demo

Hint: No worry of the npx if you have npm 5.2+

Sample create-react-app output

And then simply start running it by:

npm start

Deploy to Netlify

Before publishing it to the world, we need a production build.

npm run build

npm-run-build sample output

And here I introduce you a super simple continous delivery service. It is streamlined with your GitHub account importing website from your repositories. As long as your project is pushed onto GitHub, site can be created accordingly through Netlify.

Hint: In case you not yet set up GitHub with you project, follow setction "Use Git with VS Code" in Setup of The Log Blog.

We first install command line tool for Netlify:

npm install netlify-cli -g

You have to login the Netlify account, browser requesting auth will pops up. Just go with your GitHub account.

netlify login

You may wonder you don't even have a real website on the Internet. Don't worry it happens soon. Enter the following command to deploy the project to Netlify. You will be prompted "What would you likie to do?", choose "Create &configure a new site", then input your desired site name, and select your GitHub account as below.

netlify deploy

netlify-deploy sample output

See the "Live Draft Url"? Use Ctrl + click to open it, see the site running, right? You are now 1 step left push the site to production lah!

Now run the deploy command with prod flag.

netlify deploy --prod

netlify-deploy --prod sample output

Now you will have a "Live Url". Go to https://[your-inputted-site-name].netlify.com. Beware that, space inbetween the site name will become hypen.

For me, this is https://react-web-app-demo.netlify.com/

Deployed Netlify Site

References

GitHub page of Facebook's create-react-app