Seven Steps Asp.Net Core 2.0 ThemedExample

Asp.Net Core 2.0 CLI with Angular and Bootswatch

Bootstrap's The Problem

My daughter really hated the default theme for Bootstrap that I had used on a site for her. She said it was boring and did not have enough color for her. I don't normally mess with the appearance of a site unless there are complaints. My strength is making them functional, everything from the interface to the database. What I found out was there is a ton of conflicting information about how to hook Bootswatch (Bootstrap themes) into a .Net Core cli Angular template.

I was frustrated and was not sure where the problem was. I kept getting errors about not being able to load a module. Is it TypeScript, Angular, WebPack? What's going on? I found a solution that worked for me. I doubt it is the best or if it will work with the next build of the .Net Core Cli. The seven steps that follow include screenshots that take you from dotnet new to a Bootswatch Yeti themed Angular application sample on .Net Core 2.0.

Before

This is what the site looks like before adding the theme.

 

Step 1

Use the .Net Core 2.0 CLI to generate the Angular SPA template. If you don't have a directory to hold your projects create it. I already had a folder like this called AngularProjects.  "themedexample" is the name of my project you can name yours whatever you want and just replace themedexample with your new project name.

1. Use the command prompt to navigate to the folder you want your project created in. 
2. type: dotnet new angular -n themedexample
3. Hit Enter
4. Ignore the instructions to run npm install at this point.

Step 2

Open the themedexample folder that was created in your code editor. You need to update the package.json and add an the following entry for bootswatch after the bootstrap entry: "bootswatch": "3.3.7" make sure you add a comma after the entry.

Step 3

Now you run npm install. The reason I had you wait is because you would have to run it again after adding the entry for bootswatch. When you run it the console should look like this.

Step 4

We are getting closer. This next step involves updating the webpack.config.js file so that it knows how to handle the font references in bootswatch. Add a comma then the following line to end of the rules section: { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'file-loader' }

 

Step 5

Update the webpack.config.vendor.js file. This is how webpack will know where to find the bootswatch  Add this after the bootstrap entry: 'bootswatch/yeti/bootstrap.css' and once again, do not forget to add a comma after this entry.

Step 6

The next command runs webpack and publishes your site locally.

1. Type: dotnet publish
2. Hit Enter

Step 7

Final step. In the console type the following:

1. Type: dotnet run
2. Hit Enter

After

This is after the theme has been applied.