Build and deploy React on Netlify in 2021
Introduction
One of the trending words in web development is serverless since the rise of lambda functions, making it a viable options when building and deploying your new web application. In this article, we will learn how to create and deploy react app with Netlify.
Why React ?
Back then, I wanted to look for an alternative for WeChat Mini Program where I can have a website that also serves an phone application, that is when I found React and decided to use it for my learning. PWA is also the main selling point for me to go for react, with the current advancement of web technologies, PWA (Progressive Web Application) is built to take advantage of the best of web and mobile apps, to bring a native app-like user experience to cross planform application.
For starter, React is an open-source front-end JavaScript library for building User Interfaces that is maintained by Facebook. React is fast, easy to learn and most importantly it can also be used in large scale applications, well, Facebook and Instagram is the prime example of that.
There is also a ton of great framework out there, such as Vue, Angular, Next.js and Gatsby, but we will only focus on React today.
Create React App with PWA
Step 1: Install all the necessary packages
The first thing to do is to download Node.js and also React, so make sure that you have downloaded both of them. Npm comes along with node.js, so that you can download and use all the cool libraries for you react project in the future.
For text editors, feel free to use your preferred text editors out there. If you really need a recommendation from me then I would recommend to try out Notepad++ and Visual Studio Code.
Step 2: Time to create an app
Now that everything is out of the way, let’s start by creating our first PWA React App.
npx create-react-app my-pwa-app --template cra-template-pwaThe above is the command line to create a PWA react app, where you will see additional argument as compared to the normal react app creation. Let’s have a quick breakdown for so that we can understand it better.
npx is the command line tool to run npm packages, where create-react-app my-pwa-app is to build a react app named my-pwa-app. Pretty self-explanatory so far.
To enable PWA, we will need to add in the following argument — templalte cra-template-pwa this is to ensure we have create an app with built-in service workers.
One thing to take note is that, in older create-react-app will automatically includes services workers related libraries, but for CRA 4 or later you will need to add in — template argument for it to provide PWA support.
The command will generate file structure as below:
Once it is completed, you can run it on localhost by using the following command:
npm startWith the command above, we will then be able to start a development server and access it from localhost and from an ip address if you want to access it from another device where you will need to connect to the same network.
To make it easier for us to verify our application later, we will do some simple modifications so that we can easily verify our application.
First we will make some changes to the manifest.json file, the file can be found in public/
As for favicon, I use an online favicon generator. You may find the icon used below:
Hosting on Netlify
We will start with hosting app on Netlify, before that you will need to make sure that you have Github and Netlify account. Next you can download Github Desktop, or if you like to use command line to work with things try Git , we will be using Github Desktop today.
Step 1: Create a new repository
Once you have downloaded Github Desktop and completed all your setup, Navigate to File -> Add Local Repository (Ctrl + O) then select create a repository, just as shown below:
Follow the steps on the interface to create the repository, once that is done you will get to see a prompt on your Github Desktop for you to publish your code to your github repository.
Once you clicked on Publish repository, you will have the option to make this repository public or private, keep it private if you want your code to be available only for you. Keep in mind that for private repository, you will have to authorize the repository to Netlify later if you want to host it on Netlify.
You can head on to Github to check on your new repository once you have done the above.
Step 3: Host your code on Netlify
Open up Netlify, log in with your Github account navigate to sites and you will see a New site from Git as shown in the image below:
You will get to the next prompt, select Github and pick your repository, as mentioned before, if you have set your repository you will need to grant access to Netlify before you have select it on Netlify. To do this, it is fairly simple.
Then you can grant all repository or select a specific one, in our case we will add the repository that we created earlier, you should be able to see your repository after this.
With that you will get to the final screen, where you can configure your build commands and environment variables, for now we will leave it as it now. Click on Deploy site once you are ready.
Once the deploy is stated as published you can head to your deploy site to see it in action!
You can run lighthouse to see if your hosted application is PWA optimized.
So that’s it. Now that you have hosted your first react app on Netlify!
So you might ask, this looks like a normal website to me what’s the big deal ? With PWA you can choose to install the application onto your devices.
If you are using mobile phone, you can also choose to install app when you are browsing PWA optimized website.
Once this is downloaded, it can be use like a normal application.
This is not the only thing that progressive web app can do, we will further discuss on what we can make sure later series.
In the next article, we will look at how to deploy the same app onto firebase. So stay tuned! If you are still reading at this point, a huge thank you to you. I hope that you learnt something new today.
Disclaimer
This is by no means a professional guide on how to write an app, but I hope that this can serve as a pointer for anyone that has no idea where to start. I wanted a place to share and record my learning process for react app web, so feel free to discuss with me if you have any suggestions/tips/hacks on building web applications.
Reference
https://developers.weixin.qq.com/miniprogram/en/dev/
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps