The last couple of years I’ve needed a couple of new sites to promote things I’m working. Because I’m a .NET developer, my first instinct is always to just File->New an ASP.NET site. But should I?

Instead of using ASP.NET, these sites are typically one-pagers to promote something. I’ve done this with my https://helloworldfilm.com, https://imfinefilm.com, and most recently my COVID-19 state-by-state tracking site: https://covidstates.azurewebsites.net.

The benefit of skipping ASP.NET in these cases is simplicity. They’re just HTML/CSS/JS. Since I don’t need any server-side code running, I just create the HTML and post it. Even in the cases of the film sites, I use widgets (in my case with MailChimp) to collect emails instead of doing the email work server-side.

It’s more about combining services than my own ‘platform’. Let me be clear, this is an option, not the way I would implement many websites. But for read-only content, this is a great, simple way to get something up fast.

During Development

Let’s talk about how I’m doing the development first. If you want to reference the code, it’s at https://github.com/shawnwildermuth/covidstates.

The project structure is pretty simple:

CovidStates
 - src
   - index.html

There are more files there so I can build it and such, but to start out, I just create a simple index.html.

I usually use John Papa’s great lite-server (link) to use during development. It’s as simple as just opening up a console and:

d:\CovidStates\src>lite-server .

It hosts the source code and uses browser-link so you can just change the code and it will update in the browser. This is where I do 80% of the code. Since most of the work is building the HTML. This works great for most cases.

In the case of the Covid-19 tracker, there is client-side code I wanted to write. In that case, I initialized NPM and brought in a few packages that I’d need (mostly chartjs). To avoid having to copy the entire node_modules folder, I opted into using webpack to just build the code I needed. This included the libraries I used for the site design(e.g. Bootstrap and jQuery). Finally I added babel to compile the code in the site. My webpack file was still pretty simple:

module.exports = {
  mode: "development",
  entry: {
    "main": "./js",
    "libs": "./js/libs"
  },
  devtool: 'inline-source-map',  
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }     
      }
    ],
  },
};

Then I just created a couple of scripts in my package.json so I could easily run the builds:

  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack --watch --config webpack.dev.js"
  },

Then I just needed two consoles to run the two commands: ‘npm run watch’ and ‘lite-server .’.

Then I could just develop the web site.

Deployment

The magic for me is that deployment becomes really easy. I could have opted to using GitHub Pages which I really like, but since I’ve been dropping these in Azure AppServices, I opted to just create a super simple container.

A while back my eyes were opened to nginx. This is a simple linux distro that is super small and just serves files. By using it, my dockerfile ends up incredibly simple:

FROM nginx:alpine
COPY ./src/*.html /usr/share/nginx/html
COPY ./src/dist /usr/share/nginx/html/dist

All I needed in this case was any HTML that I needed (the /usr/share/nginx/html is the directory where your site will be hosted in) as well as the compiled code.

While not exactly elegant, I decided to include all the CSS with webpack too which is any I just need the dist folder in my case.

Then it was as simple as creating a simple command to push the container to a registry (in this case since it’s public, I just used docker’s registry):

cd ./src
npm run build
cd ..
docker build . -t covidstates:latest
docker tag covidstates:latest shawnwildermuth/covidstates:latest
docker push shawnwildermuth/covidstates:latest

This command builds the production code, then builds the docker image. Tags it for Docker’s registry and pushes it up. With that done, you can just point a new AppServices’ instance to this new container. (See my previous article on AppServices and Docker images for how to do that here: http://wildermuth.com/2020/02/02/ASP-NET-Core-in-Azure-App-Services-Docker-Images—Part-2).

Whenever I make a change, I just push a new copy and it’s live. Useful links:

Lite Server

nginx

WebPack

COVID-19 Tracking by State

GitHub Repo

Let me know if this was useful!