This tutorial should help you get a static web page hosted in either Docker, IIS or both. In order to keep everything as platform-agnostic and simple as possible we’ll be using Visual Studio Code as our IDE along with a few multi-platform tools such as Yeoman. If you’re completely new to this sort of thing – don’t worry, so am I. This tutorial should give you all of the information you need to get a web page up and running with little-to-no prior experience.
Before we get started let’s make sure we have everything we need to work on out application. Firstly we’ll need Internet Information Services Manager for IIS deployment and/or Docker for, you guessed it, Docker deployment. I’m going to assume you have one or both of those set up and ready to go. If you’re new to Docker there are plenty of tutorials available online, including this one on the official website and this blog post I found nice and concise.
Now that’s out of the way we can begin working on out application. The simplest way to get started is to make use of Yeoman to create a scaffold for our application. Yeoman has a few requirements but nothing huge. Just make sure your machine is up-to-date with Node.js, npm and git. After those requirements are fulfilled Yeoman can be installed using npm with the following command:
npm install –g yo
Begin App Development
Let’s begin by generating the scaffolding for our application. To do this we’re going to open up a cmd prompt, navigate to the wherever we want the project to go and use the ‘yo aspnet’ command. In this case I’m creating a project called ‘hypnos’ on my desktop.
Now you should see this dapper-looking guy offering you a few different options to start working on your application. I’m going to create an empty web application. You’ll then be asked to name your application. Give it any name you want, I’m calling mine hypnos.
You should now see that you have a folder for you application. Inside you’ll find the basic files you need for your web application. Unfortunately an empty project is just that – empty – so let’s start off by trying something simple. Let’s host a static web page.
Hosting static webpage
Inside your new project folder you’ll see a file name ‘Startup.cs’
Open this file in your text editor of choice and find the Configure method. By default we don’t have the required dependencies to handle static pages so paste the following lines of code into the Configure method.
Next open up project.JSON and add the following line to the list of windows platform dependencies
That should be all we need to host a static webpage so go and get one. It can be as simple as an index.html file with nothing but “Hello World” written in it, just make sure it’s named index.html and saved in the wwwroot folder. I’ll be using some files I made earlier for this example.
With everything in place we’ll go back to our command prompt and navigate into the root directory of the project. Now run ‘dotnet restore’ to get the project ready for deployment.
Deploying to IIS
Since we still have our command prompt open, let’s begin by deploying the application through IIS. It’s recommended you make a folder somewhere on your machine named something like ‘deployments’ for this, just to make things easier on yourself. C:/deployment, for example, is easy to remember. Still in the root directory of your project, type the following commands into your command prompt.
dotnet publish -f netcoreapp1.0 -o “<deployment folder path>”
*note: deployment folder path in the form “c:\deployments\project_name”
Now if you go to your deployment folder you should see it filled with .dll files and looking something like this:
All right, let’s get that deployed. Open up your Internet Information Services Manager. You’ll see something like the screenshot below. Right click on the “Default Web Site” and click on the “Add Application…” option. A new dialog box will pop up asking you to provide an Alias (name) and Physical path for your application. Choose whatever you want for the alias and set the physical path to the wwwroot folder in your deployment path – that’s the one with all of the .dll files. If you can’t see the wwwroot folder in your deployment directory, make sure you have an index.html in the ‘wwwroot’ folder of your project. If there’s nothing in that folder, the ‘dotnet publish’ command won’t have bothered to publish it.
Your project will now be visible in the IIS Manager and ready to view in a web browser. If you want, you can open up a web browser and navigate to ‘localhost/<App Name>’ or simply click the “Browse *:80(http)” option in the Actions panel.
Simple as that, your static web page is now hosted via IIS.
Deploying to Docker
Similarly to deploying to IIS, the first step in deploying to Docker is to open the Docker Terminal and navigate to your project root directory. Once you’re there, simply run the following command and let Docker do its thing and enjoy the 10-15 seconds it should take to install all of the necessary extensions and compile your project.
docker build .
After the build has completed, Docker will give you a message like the one above. The important thing to take note of is the ‘Successfully built’ message. The alphanumeric identifier after that message is the name of the Docker image you’re going to run. Take note of this as you’re going to need it soon.
Before we run our application we need to double check the ip address of our Docker machine. In the Docker terminal, run the following command. The default ip address is 192.168.99.100 but if yours is different, take note of that for later use as well.
Now that’s out of the way, run the following command in Docker:
docker run -i -t -p 80:5000 <image_name>
It’s worth noting that the command above maps the Docker image to port 80, hence the ‘80:5000’ part. If port 80 isn’t available for some reason (Docker will tell you the “port is already allocated”) then feel free to set that to whatever port you want. Just remember the port number for later.
If all went well you should see something like this. Now you can go to a web browser and navigate to the ip address of your Docker machine. Be sure to include the port at the end so in this case we’d be navigating to ‘192.168.99.100:80’
And there we have it, our static web page hosted through Docker.