Other posts in this series below.
AppVeyor & GitHub Pages
AppVeyor & GitHub pages are 2 external services used here. AppVeyor provides free CI & CD service for open source projects and GitHub Pages provides free hosting from Github repositories. Basic knowledge about these services are considered as prerequisites.
AppVeyor is mainly targeted to Microsoft .Net stack and it automatically takes care, if there is a Visual Studio solution file. But we can make it work for Node as well by disabling the default build process. That can be done by simple changes inside appveyor.yml file. AppVeyor supports configuring CI & CD activities either in a appveyor.yml file found in the GitHub repo or through their UI. Here we are using the appveyor.yml file as its easy to understand. Though is a file publicly accessible file in repo, we can include sensitive information inside it with encryption.
Separation of Concerns - What does what
When we look at the technologies used, we can see those can so same tasks. AppVeyor can run normal commands as well as PowerShell and even start NodeJS which in turn starts Webpack. Using normal commands, PowerShell & Node we can do file copy operations. Webpack which can be started as command can also execute code which does file copy. What is the problem if all the technologies can do same task? The problem is lack of clarity on which component does what.
The simple rule can be to assign the dev related tasks such as compilation and bundling to Webpack and deployment tasks to the AppVeyor scripts such as pushing to GitHub. Ultimately AppVeyor is ruling the environment. So there should be one AppVeyor command which starts Webpack. Summarized duties as follows.
- Downloads the source code
- Install proper Node version and setup environment by installing packages.
- This include the Webpack NPM package too.
- Starts Webpack
- Run tests.
- Collect the artifact and deploy
- Do minification / Uglify
- Create bundle
- Emit the output to \dist folder. (\dist is just a convention. It can be any folder)
The CI & CD workflow
The CI & CD workflow can be simple. After the transpilation & bundling the output HTML app which includes html, js, images etc...needs to be pushed to the \docs folder of repository. The GitHub repository can be configured to serve web pages from \docs folder.
It is easy to explain the but there are high possibility for missing steps. So to make it more understandable, please refer sample repo located at below location
- It does CI & CD on 'TypeScript-Angular1-Adv folder'.Other folders are showing different Webpack samples.
- Push the output to the \docs folder in same repo. \Docs folder is configured to GitHub pages to serve from.
- It is little advanced Angular 1 sample done using TypeScript.
- Node & NPM used as dev technology.
- AppVeyor.yml has all the CI & CD steps. The GitHub token is encrypted and kept inside it.
- Since the aim of that folder is to minimally show the webpack features, at this point there are no tests included.