Building the Static Frontend

This post will discuss how I used node and the create-react-app package along with some build steps to produce a static font end. I will also explain how I have automated this in Azure DevOps.

Grab the resources on my github then open a terminal in the src directory (I use VS Code).

Some personal learning notes

When I originally undertook this exercise I had assumed that I needed to "flat pack" the node site into just plain old boring HTML, CSS and JavaScript. I didn't, not in the way that I had thought, since the node run-script build created everything I needed to run the site.

EDIT - 16/10/2020 Turns out that I did need to include react-snap as a postbuild step to create the static pages!!

NOTE: as a learner, sometimes going through the process and doing a write up is invaluble, recreating the steps helps to get rid of knowledge wrinkles (doesn't replace a good skin care routine for actual wrinkles).

Prerequisites - React Development

  • Your gonna need Node
  • And these additional packages (installed with npm install)

Wokring with create react app

I chose to use React for this project because I liked it modular design, resuing common components across the entire site. I don't profess to be an expert in any way shape or form (part of the reason I have the site is to improve my knowledge) but I will explain what I did to get this running.

I knew of create-react-app as being a CLI tool that spins up some boiler plate for creating a react single page app (SPA).

It quickly allowed me to add in my components and develop a site with the features I needed, i.e correct URL routing, boostrap for taking care of CSS and design etc. (Clearly I'm not a hot-shot front end developer).

Getting started

Firstly (assuming you downloaded node) run node -v and check that you have node installed and therefor npm

The next step is to run npm install -g create-react-app this will install a globally accesible copy of the create-react-app tool, so that I can do this again and again...

Create react app download

I like to use VS code to do my development, if your not then please substitute any steps necessary.

Firstly open a terminal in the folder you want to create the react app in and run create-react-app {your-site-name} specifying the project folder name in place of "your-site-name"

make a coffe or something this will take a while!

Cool once this has ran you should see several folders and files under the folder you specified in the command:

Create react app result

check it's working and run npm start under the folder you specified in {your-site-name} if it works you should see the create react app boiler plate site with a spinning react logo.

Before we dive into the automation steps, it might be a good idea to navigate to the azure portal and upload the build folder into the $web container.

Unfortunatley the upload only handles files and not folders, so the "static" folder will need creating, along with the css, js and media and the files with in uploaded at the time of creation.

At this point we're ready to move on, this isn't a React post (though I might cover that another time).

Building the site & deployment

If you are following along from the other post then you should have an Azure account, if not you will need one, it's also a good idea to quickly run through that post.

tldr; create an Azure account, create a resource group and add in a storage account

At this point then you will also need an Azure DevOps account so we can configure a build pipeline.

Hang on what is Azure DevOps

Firstly, I'll briefly describe DevOps.

In fact I'll just steal & paraphrase the microsoft definition:

DevOps is the combination of people and processes coming together to deliver valuable changes to customers

Or something along those lines...

in orther words Big change is bad, small change with ways to capture feedback is good.

There are several books on the various topics. If you're interested the ones I'd recommend are Unicorn Project and DevOps Handbook

Azure DevOps is a platform offering from Microsoft for creating and maintaining software builds and releases. Generally described as pipelines., with other featurs for managing work load, testing etc.

I use it (and love it) a lot.

There is two use modes the YAML pipeline and the "classic" editor version. We'll use the former.

Back to the code

In this case we're going to use the YAML version to automate some npm build steps then copy the output over to the resources in azure (you will need a storage account with container configured as a static web site).

Mine looks something like this

trigger:
- main

pool:
  vmImage: 'windows-latest'

variables:
  staticSiteStorage: 'YOURSTATICSTORAGE'

stages:
- stage:
  displayName: Build and Deploy Front end
  jobs:
  - job:
    displayName: Build & Publish Static Site
    steps:
    # Build Static Site
    - task: [email protected]
      inputs:
        command: 'install'
        workingDir: 'src/Site/site_app'
        verbose: true

    - task: [email protected]
      inputs:
        command: 'custom'
        workingDir: 'src/Site/site_app'
        customCommand: 'run-script build'
        
    - task: [email protected]
      inputs:
        SourceFolder: 'src/Site/site_app/build'
        Contents: '**'
        TargetFolder: '$(Build.ArtifactStagingDirectory)/site'

    - publish: '$(Build.ArtifactStagingDirectory)/site'
      artifact: site
  - job:
    displayName: Deploy Static Site
    steps:
    # Deployment
    - download: current
      artifact: site

    #Deploy Static Site
    - task: [email protected]
      displayName: 'Copy Static Site to Blob Container'
      inputs:
        SourcePath: '$(Pipeline.Workspace)/site'
        azureSubscription: 'YOUR SUBSCRIPTION'
        Destination: 'AzureBlob'
        storage: '$(staticSiteStorage)'
        ContainerName: '$web'

I've removed some bits for security purposes.

In the words of King Diamond What's going on???

The pipeline has a trigger on the main branch of the repository, so code that gets commited to that branch triggers the pipeline to run, I've declared variables at the top (here it's used in one place) that are useful for when you have lots of repetion of file & folders names or rescoures etc.

Underneath this I've defined a multi-stage pipeline with a single stage, that is separated into two jobs Build and Deploy

It's quite simple really, I have made use of the built in NPM tasks to run the npm run-script build task and publish the build folder to a folder I've called "site".

In the deploy step the site folder is downloaded and I then call the AzureFileCopy task to simply copy and paste the contents into the $web blob container.

Bringing it all together.

For breviety, copy the code and save it as azure-pipelines.yml in your repository (assumes your on a branch called main).

In Azure DevOps you'll need to tell it where to find the YAML file.

Create a new pipeline:

Create pipeline

Click the create button

Create pipeline

I generally keep the repos on Azure DevOps, but it'll happily integrate with GitHub or Bitbucket.

Select repo

Select where your storing your code and then select existing YAML pipeline and select the .yml file

At this point the online editor will load and you should be able to click run.

If you have straight copied the text it will fail. You will need to edit the pipeline and authorize use of your Azure subscription, you will also need to set the name of the storage account in the variables at the top of the file, once that's set run it again and it should build and deploy the site into the storage container.

And with any luck you should then be able to navigate to the blob storage web endpoint and see the React App boiler plate code running!

Hope this has helped. Any questions reach out!