Skip to content

Latest commit

 

History

History
39 lines (20 loc) · 1.83 KB

File metadata and controls

39 lines (20 loc) · 1.83 KB

Text

In this lesson, we will learn how to build and deploy our React application to the internet.

To host our application, we will use Netlify. Let's head to https://www.netlify.com/ and use Signup option to create an account. We will use GitHub to login to Netlify.

Action: Visit netlify.com and use GitHub to signup

Once logged in, select Import an existing project option from Add new site menu.

Next, select GitHub from the list of Git providers. Authorize Netlify to access your repositories. Provide access to Only select repository. Then type in wd301 and select the course repository.

Click on Install button to initiate installation of site.

In the next page, select the <your github username>/wd301 repository to proceed.

Now, we will have to specify the subdirectory which holds the source code for React app, the build command, and the path to which production build will be generated.

Type smarter-tasks in base directory field. The other two fields should get automatically populated.

Projects generated with vite has a build command already set up in package.json.

The Build command should have the value npm run build.

When the build command is executed, a production build, which contains HTML, CSS, and JavaScript will be generated in dist folder. We will add the output directory to Publish directory.

Publish directory should have the value smarter-tasks/dist.

Click on Deploy site. It will start a deployment job and will display the url to which React app is deployed.

Click on Site Settings. The React app should be built and deployed in under a minute.

Any further updates or commits which is pushed to Github will automatically trigger a deployment.

Action: visit the deployed app and add a todo item.

Let's visit our deployed app. And it is working as expected.

See you in the next lesson.