I have been working on a website to show information on Knoxville, TN Meetups. The website is https://knoxtechtrend.com/.

Here’s how it runs.

Technology used

• Netlify Static Site Hosting
• GatsbyJS Static Site Generation
• AppVeyor Open Source build agent
• Azure Dev Essentials subscription
  • Azure Functions NodeJS
• Cake Build script
• Github

Data Pull

Each night, a timer triggers an Azure Function to loop through all Meetups held in storage.

If more than 1 day has passed since the last Events sync for that meetup, then a message is added to a queue saying that the Events for that meetup need to be refreshed.

If more than 30 days have passed since the last Meetup detail refresh, then a message is added to a queue saying that the metadata for that meetup need to be refreshed.

Site Rebuild

Each night, there is a rebuild of the static site, whether there is new data or not.

Static Site

The entire site is static and resides on Netlify’s CDNs. Generated using GatsbyJS 2.0 beta. Once the website is generated, there is zero API calls from the website.

Environments

I have three environments that I have setup.

• Develop
  • Github Develop branch’s latest commit.
• Test
  • Github Master branch’s latest commit.
• Production
  • Github Develop branch’s latest tagged commit.

Each environment has

• One Netlify site.
• One Azure Resource Group containing
  • One Application Insights
  • One Azure Storage Account
  • One Azure Function made of
    • App Service
    • App Service Plan
• One DNS entry

All environments share

• One build agent on AppVeyor

Development process

Data Pull Change

1. Make code changes.
2. Run new code directly against Develop environment.
3. If there’s a problem: 4. Destroy entire Develop environment. 5. Redeploy Develop environment using Azure-Resource-Manager templates. 6. Clone data from Test environment. 7. Restart Process.
4. Push new code to Develop branch on Github via Pull Request ideally.
5. Do some testing on Develop Storage. Perhaps run static site generation a few times to look for problems.
6. Merge into Master branch.
7. Do some testing on Test Storage. Perhaps run static site generation a few times to look for problems.
8. Tag Master branch.
9. Do some testing on Production Storage. Perhaps run static site generation a few times to look for problems.

Azure Environment change

The entirety of each Azure Resource Group is defined in an Azure Resource Manager (ARM) Template. The workflow is the same as the Data Pull Change workflow.

Static Site Generation Change

1. Make code changes.
2. Run new code directly against Develop environment, but do not deploy.
   • Static Site Generation just needs access to the storage account.
3. Push new code to Develop branch on Github via Pull Request.
4. The build agent will create a preview of the static site on Netlify using Develop storage.
5. Examine the preview of the static site on Netlify to make sure it looks good.
6. Merge Pull Request into Develop branch.
7. The build agent will create and push a new build to Develop.
8. Look at Develop site.
9. Open new Pull Request to merge into Master branch.
10. The build agent will create a preview of the static site on Netlify using Test storage.
11. Examine the preview of the static site on Netlify to make sure it looks good.
12. Merge Pull Request into Master branch.
13. The build agent will create and push a new build to Test.
14. Look at Test site.
15. Tag the release on Github.
16. The build agent will create and push a new build to Production.
17. Look at Production site.

Costs

I’m running the project as open-source and using open-source licenses for as many tools and services as possible. This project has cost me nothing yet.

To be comprehensive though, here’s an image showing what my Azure Dev Essentials subscription says my costs for this project would be.

Summary

The code is here.