App Development Best Practices-3 (Build, Feature preview and Deploy pipelines)
If you haven’t yet read the previous articles in this series, you can find them at
App Development Best Practices-1 (Version Control) - Record our changes
App Development Best Practices-2 (Version Control Extended) - Structured Changes, Helps communicating
We need a way for our app to be delivered to users. Since this is a web app that are developing, to deliver this web app we need to host it on some server. But before delivering we need to make sure everything is working fine. And even before everything works fine we need a way
- to see/verify what we are building is according to expectations,
- show and get feedback on what we are building.
We can run the code locally on our machines and continuously see the effect of the changes we make. But that is only local to us. Let us say for example a product owner or a designer or another developer wants to see the work in progress feature that you are developing and wants to provide feedback. For another developer, may be it is easier as they can checkout our branch and run it locally but for other stakeholders it is cumbersome and not ideal. We could build our code and deploy it manually to a server and let the other stakeholders about it. But we make a zillion changes during the development of a feature . It will be cumbersome and inefficient to manually build and deploy. That is where deployment pipeline comes into picture. The word pipeline indicates the movement of items in an automated way. In this case the code moves from being code to becoming an app through the process of build and moves to server from where it is hosted and served to the users through browser.
If it were a mobile app, then the build and deployment pipeline is a bit complicated but can be done. Mobile apps are typically made available for testing through support systems like TestFlight for iOS, Google play alpha beta distribution channels.
We will be using Netlify platform for our pipelines. The pipelines can also be setup using other providers (Ex: using GitHub actions, CirclCI, Travis etc) and custom tools as well. Netlify makes it super easy with its GitHub App integration to automate and combine feature previews, build and deploy pipelines with just a few clicks. All you need to do is visit https://github.com/apps/netlify and hit configure and follow the steps.
You can choose which branch to use (default is master), and for a react project it automatically detects and shows the command
yarn build and what build folder to use.
You can also make some advanced configuration by adding netlify.toml file to your repo. For example if you have a different Git workflow (currently we are using a slight variation of GitHub workflow feature branches and master as production). In some cases, you may want to have test, staging etc branches.
It takes a few mins for the code to be built and deployed after which you will get a unique url. You can also setup custom domain if you wish. We will leave that out for now.
One of the other benefits that comes seamlessly from netlify GitHub app integration is the deploy preview. Every PR gets automatically built and deployed to a unique site.
Clicking on Details will open the PR deploy feature preview unique url. This can be shared to the stakeholders to look at the progress of the feature, provide feedback and perform testing. Once all criteria are met, the PR can be merged to master and deploy pipeline will kick in and deploy it to the main server.