Automate App Deployment
In this section, we will see how we can automate the deployment of an app to Pollination using the commit messages on Github.
Since this section builds on it, it is necessary that you go through this section first. Make sure that before you start going through this section, you have an app folder named "wind-rose" with the following structure.
You will need to be comfortable using Github and Github desktop. Use this video to walk yourself through the process of creating a Github repository, cloning it locally, and pushing your changes to it.
Once you have created a Github account, click on the "+" button in the top right corner of the screen and click on "New Repository".
Note: Make sure to use the name you want your app on Pollination to have as the Github repository name. We used wind-rose as the project name in the previous section and therefore, we will use that same name here for our Github repository.
Add a description to your repository and click on "Create Repository".
Click on "creating a new file"
Give any name to your file. Here, we will use "sample.txt".
Use "chore(sample.txt): add a sample file" as the commit message and click on "Commit a new file".
A repository named "wind-rose" is successfully created under your Github account.
Click on the "Settings"
Click on the "branches"
Click on the edit button and rename the default branch to "master".
Click on the "Change default branch" button.
The name of the default branch should be "master" now.
Click on wind-rose and you should see the following dialog box. Click on "Ok, got it" to close the dialog box.
Your repository's default branch in successfully renamed to "master".
In the deployment using the command line, we entered the Pollination API key in the deploy command. In automated deployment, we need to add that key as a secret to the Github repository.
Click on "Settings" and then click on "Secrets".
Click on "New repository secret"
The secret is successfully added to the Github repository.
We need to trigger the first release ourselves. To do that, click on the "Create a new release" link.
Click on "Choose a tag". That will open up a dropdown menu.
Enter "v0.0.0" as the tag name, click on "Create new tag: v0.0.0 on publish", and then "Publish release".
You should a new release on your repository and a new release tag.
We will now clone the repository locally and copy all the files necessary to run the wind-rose app.
Open Github desktop on your system and click on "Clone a repository from the internet...".
In the search box, enter "wind-rose" and wind-rose repository under your Github account should appear. Next, enter the path to the folder on your system where you would like to clone this repository. Click on "Clone".
You should see your repository cloned locally with the "master" branch active.
Open the folder where you cloned the repository and delete the sample.txt file.
Have both the wind-rose folder prepared in step-1(left) and the locally cloned wind-rose repository(right) side by side here.
Copy the files from the wind-rose folder to the cloned wind-rose repository.
Now, we have all the files necessary to run the wind-rose app in the locally cloned wind-rose repository.
In the next step, we will commit the local changes to the Github repository. However, before that, we need to learn the format of the commit message.
In automated deployment, the format of the commit message will determine whether the changes will be deployed to Pollination or not. Therefore, it is important to write commit messages in the formal recommended below.
Commit Message Format Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:
The header is mandatory and the scope of the header is optional.
Any line of the commit message cannot be longer than 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools.
If the commit reverts a previous commit, it should begin with
revert:, followed by the header of the reverted commit. In the body it should say:
This reverts commit <hash>., where the hash is the SHA of the commit being reverted.
Must be one of the following:
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing or correcting existing tests
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
The scope could be anything specifying place of the commit change. For example
You can use
*when the change affects more than a single scope.
The subject contains succinct description of the change:
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize first letter
- no dot (.) at the end
Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
The footer should contain any information about Breaking Changes and is also the place to [reference GitHub issues that this commit closes][closing-issues].
Breaking Changes should start with the word
BREAKING CHANGE:with a space or two newlines. The rest of the commit message is then used for this.
Note: Only the the
feattype will trigger a release and deployment to Pollination. Also using the fix tag will bump the version number by 0.0.1 whereas using the feat tag will bump the version number by 0.1.0.
Open Github desktop and use an appropriate commit message to commit the local changes to the Github repository. Our repository on Github has only the 'sample.txt' file. We want to fix it to have all the files necessary to run the wind-rose app. Therefore, we will commit the local changes to the Github repository using the
fixtype. Also, since we are committing more than one files, we will use
*as the scope of the commit message.
Click on "Commit to master" and then on "Push origin" to push the changes to the Github repository.
This steps is optional.
Now, Github will deploy the app to the Pollination for us and we can see the status of this deployment on Github.
After pushing to origin in the last step, go to the Github repository and you should see the last commit message and a yellow dot indicating that the deployment is in progress.
To see the deployment, click on "Actions".
Click on "fix(*): setup repository"
You will see the steps of deployment
In 3-4 miniutes, you should see the deployment finish.
Lastly, come back to the home page of the Github repository and you should see the last commit message and a green check mark indicating that the deployment is complete.
Go to Pollination, click on your avatar to see the dropdown menu. In the dropdown menu, click on "Your apps".
Click on the wind-rose app card.
Click on "versions"
You will see the last commit message and version tag on the ongoing deployment.
In 5-10 minutes, you should see the deployment finish. This means your app is deployed to Pollination and is ready for use.
Lastly, click on the wind-rose app to see the app in action. You might have to refresh the webpage a few times for the app to appear after the deployment. To refresh use
shift + F5on Chrome or equivalent on your browser.