Do I Always Need ASP.NET?
Tags: webdev, webpack, docker, html
Published: 2020-04-05 20:02:08

---
title: Do I Always Need ASP.NET?
published: true
date: 2020-03-29 22:31:15 UTC
tags: Web Development,WebPack,Docker,HTML
canonical_url: http://wildermuth.com/2020/03/29/Do-I-Always-Need-ASP-NET
---

![nginx](https://wilderminds.blob.core.windows.net/img/nginx.png) 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://helloworldfilm.com), [https://imfinefilm.com](https://imfinefilm.com), and most recently my COVID-19 state-by-state tracking site: [https://covidstates.azurewebsites.net](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](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](https://github.com/johnpapa/lite-server)) 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](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](https://www.npmjs.com/package/lite-server)

> [nginx](https://www.nginx.com/)

> [WebPack](https://webpack.js.org/)

> [COVID-19 Tracking by State](https://covidstates.azurewebsites.net)

> [GitHub Repo](https://github.com/shawnwildermuth/covidstates)

Let me know if this was useful!

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

          This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
          Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/x6t0sXukwAs)