Deploy your React app using Netlify

bhuma08

bhuma08

Posted on November 14, 2020

Deploy your React app using Netlify

Now that you have built your very first web application using React, it's time to deploy it. I will be using Netlify as it's just simple and straight forward. This blog is for apps that only contain frontend or client side. So before you follow along, please make sure that your app doesn't have a server side or backend.

First, make sure you have the Netlify command line tool. If not, in your terminal run: npm install netlify-cli -g

You may now login to your netlify account using your terminal: netlify login

Next, create a file: netlify.toml in the root directory of your project in the code editor and insert the following:

[build]
    command = "npm run build" 
    publish = "/dist" 

[[redirects]]
    from = "/*" 
    to = "/index.html" 
    status = 200 
Enter fullscreen mode Exit fullscreen mode

If you're unsure about the name of your publish folder, you can check that in your webpack.config.js file.

output: {
    path: path.resolve("dist"), //THIS ONE!!!
    filename: "bundle.js", 
    publicPath: "/",
},
Enter fullscreen mode Exit fullscreen mode

Now, in your terminal use the following commands:
netlify init
You may deploy your app manually or using your git repository. You may name your site (this can be changed later)!
npm run build
netlify deploy
netlify deploy --prod

Your site is now live and ready to go! :)

💖 💪 🙅 🚩
bhuma08
bhuma08

Posted on November 14, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Deploy your React app using Netlify
react Deploy your React app using Netlify

November 14, 2020