This blog has been mentioned as one of Feedspot's Top 100 Programming Blogs.

It's a big hassle for maintainers to set up and check every pull request that is created on their Repository, especially when the repository becomes popular or during Hacktoberfest.

Netlify helps you generate previews for every PR you receive on your Repository for free and the setup is very simple!

Create a Netlify Account

Head to Netlify to create an account. You can choose to Sign up with GitHub, GitLab, Bitbucket, or email. Choosing Sign up with GitHub is the fastest way, as you can directly give it access to your repositories.

Create a New Site

Once you create an account, you will be prompted to create a new site. You will first need to choose the Git Provider you are using. In our case, it's GitHub.

A new window will open asking you to authorize Netlify to access your GitHub repositories.

The next step would be to choose the repository you want to show the previews on. You will be given a list of your repositories to choose from.

After you choose your repository, you will be asked to choose the branch.

You will also be asked to add some build settings:

  1. Build Command: The command that is necessary to run on the project for it to be ready for production. If you are using some frameworks or development dependencies, or your project needs something to be done before it is ready to be published publicly, you need to create a script for it and enter the command here. For example, if you are using npm and you have a build script, you should enter here npm run build
  2. Publish Directory: If your repository has a publish directory like build, public or static then it should be entered here. Otherwise, the root of the repository will be published for production.

If there are some environment variables you need to add for configuration purposes, you can click "Show Advanced", then click "New Variable and start adding variables and their values.

Once you are done, click Deploy Site. You will be redirected to the new dashboard for your site showing you details about the current deployment and other information as well.

You will notice that your project will be given a random URL and name. For example, determined-goodall-351866. You can change the domain settings and enter a custom domain if you have one.

Generate Build Previews For PRs

Go to Site Settings and choose "Build & deploy" from the sidebar. Then scroll down to "Deploy notifications".

Then, click on the "Add notification" dropdown and select "GitHub Pull Request Comment". A new window will open that will ask you to choose the event on which the comment should be added. Choose "Deploy Preview succeeded".

Next, you can choose the comment that will be shown. This comment will be alongside the URL of the custom generated URL. Enter some comment like "Your Preview is Ready!".

Once you are done click Save.

Conclusion

After completing the steps above, a preview will be generated for every new PR and you will see a comment on the PR with the URL where you can check out the preview.