Hosting Projects On Netlify

This walk through is going to be about how to host your React application with Netlify.

Walkthrough In 9 Steps

1. We need to make an account with Netlify.

• If your application is on GitHub, GitLab, or Bitbucket then I recommend signing up through them and authorizing it.

2. Before you select a repository to host, you want to create a build folder in the repository.

yarn run build 
OR
npm run build

• After running this command, you’re going to see a build folder and that is what Netlify is going to host.
• Also, add that folder into your .gitignore

/build

3. From here there is 2 ways you can deploy your application.

• Through CLI.
• Or through Netlify home page.

For my walkthrough I’m going to deploy through the home page.

4. You want to select “New site from Git”.

5. Select from what you signed up with, which in my case I used GitHub.

6. Select the repository you want to host, you can of course use the search function to search for the repo.

7. Select which branch you want to deploy from and replace the last 2 fields.

• Build command: In my example, I’m using npm build command.

npm run build
OR 
yarn run build

• Publish directory: We want to publish the build folder we made on Step 2.

/build

8. Select “Deploy site” and you’ll be thrown here.

• If everything was successful, you’ll see “Published” in green under “Production deploys” on the bottom-left.
• If not, then you can click the link to your repo (“https://friendly-darwin-533401.netlify.app” or whatever it may be for you) and Netlify has a link you can follow to trouble shoot your problem. You properly forgot to push your build folder into your repository or are using a different Build command.

9. From here, if you don’t care about setting up your custom domain then you are done! You can of course change the name of your Netlify-domain from the “Domain settings”