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:
Let me know if this was useful!
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.
Top comments (0)