Chapter 8. Creating Bootstrap 4 ASP.NET MVC Sites Using Visual Studio Code

During their Build 2015 conference, Microsoft unveiled a new lightweight code editor for writing web and mobile apps called Visual Studio Code. This was a major step for Microsoft, since it marked the first time they offered developers a cross-platform code editor that works on Windows, OS X, and Linux.

With the significant redesign of ASP.NET, which made it an open source and cross-platform framework, developers are now able to create ASP.NET websites on Windows, Linux, and OS X. Visual Studio Code makes this a little bit easier.

In this chapter, we will cover the following topics:

• What is Visual Studio Code?

• Installing Visual Studio Code

• Scaffolding an empty ASP.NET project using Yeoman

• Adding the Bootstrap 4 files using Bower

• Compiling the Bootstrap Sass files using Gulp

• Creating a layout file that references the Bootstrap files

What is Visual Studio Code?

Visual Studio Code, in essence, is an open source, cross-platform text editor. It is based on the Electron framework, formerly known as Atom Shell, which is a framework that enables you to write cross-platform desktop applications using HTML, CSS, and JavaScript. If you've ever used the Atom text editor by GitHub, you'll see a strong resemblance between that and Visual Studio Code.

Note

Atom is a hackable/customizable text editor from GitHub. It is also open source and can be downloaded from https://atom.io/.

Visual Studio Code can be used by developers to build web applications in HTML, CSS, and JavaScript, and also supports TypeScript and ASP.NET Core. It is folder-based rather than project-based, which means you simply need to open a folder containing your project files instead of opening a project file such as .csproj.

It features IntelliSense (which will be familiar to anyone that has used Visual Studio in the past) and also supports debugging and Git Source...

Installing Visual Studio Code

Installing Visual Studio Code is as simple as downloading the platform installer that is specific to your operating system. You can visit https://code.visualstudio.com/ and the site should pick up which operating system you're using and display a download button.

For example, since I'm visiting the site from a Windows PC, it automatically displays a Download for Windows button:

If you need to download it for either Linux or OS X, scroll to the bottom of the page and click on the appropriate download button:

Tip

For complete instructions on getting up and running with Visual Studio Code on Mac OS X, Linux, or Windows, visit http://code.visualstudio.com/Docs/editor/setup.

Creating an empty ASP.NET project

Because Visual Studio Code is folder-based and not project-based like Visual Studio, it does not have a File | New Project option in its list of menus.

Scaffolding a project using Yeoman

Instead, you'll use Yeoman to scaffold a basic empty ASP.NET project. If you do not already have npm installed, complete the following steps:

1. Open a new command prompt and navigate to the folder where you would like to create your project, for example, C:\MyBootstrap4Site.

2. Enter the following command in the command prompt in order to install Yeoman and supporting tools:

           npm install -g yo grunt-cli generator-aspnet bower 
   
   

   After Yeoman and supporting tools have been installed, follow these steps:

3. Enter the following command and press Enter to start the Yeoman ASP.NET generator:

           yo aspnet
   

4. Select Empty Application from the list of applications and press Enter:

   

5. When prompted for the name of your ASP.NET application, type Bootstrap4Site and press Enter.

6. Yeoman will...

Using Bower to add the Bootstrap 4 files

In order to use Bootstrap 4 in your project, you first need to add the Bootstrap style sheet and JavaScript files. In this example, you'll use Bower to download the Bootstrap 4 files to your local project:

1. Add a new file called bower.json to the root of your project folder and set its content to the following in order to add Bootstrap 4 as a dependency:

           { 
             "name": "ASP.NET", 
             "private": true, 
             "dependencies": { 
               "bootstrap": "4.0" 
             } 
           } 
   

2. In order to download any Bower dependencies, you'll need to open a new command prompt in your project folder—this can be done from within Visual Studio Code using the keyboard shortcut Shift + Ctrl + C.

3. Enter the following command inside the command prompt and press Enter:

           bower update 
   
   

4. The previous command will download any Bower dependencies specified inside the bower.json file and save it to a bower_components...

Using Gulp to compile the Bootstrap Sass files

If you would like the option to customize the Bootstrap Sass files in order to use them in your project, you can automate the Sass compilation process by creating a Gulp task for it.

Visual Studio Code supports the ability to run tasks and analyze their results from inside it. Task can include many things such as compiling Sass, minifying CSS, or copying files to different folders.

In order to configure task inside Visual Studio Code, follow these steps:

1. Inside Visual Studio Code, open the Command Palette by pressing the F1 key.

2. Type the following inside the Command Palette and press Enter:

           Configure Task Runner 
   
   

3. Select Grunt from the list and press the Enter key.

4. The command will automatically create a new folder called .vscode with a new tasks.json file inside it.

5. You'll need Gulp and the gulp-sass plugin in order to compile the Bootstrap 4 SCSS files to CSS. To install this plugin, open the command prompt and enter the following commands...

Creating a MVC layout page

The last step in creating a Bootstrap 4 enabled ASP.NET MVC project is to create a master layout page that will reference the Bootstrap CSS and JavaScript files. To create the layout page, complete the following steps:

1. Add a new file called _Layout.cshtml to the Views\Shared folder.

2. Add the following HTML to the file:

           <!DOCTYPE html> 
           <html> 
           <head> 
               <meta charset="utf-8" /> 
               <meta name="viewport" content="width=device-width,
                initial-scale=1.0" /> 
               <title>My Bootstrap Site</title> 
               <link rel="stylesheet" href="~/css/bootstrap.css" />     
           </head> 
           <body> 
    
               <div class="container body-content"> 
                   @RenderBody() 
                   <hr /> 
                   <footer> 
                       <p>...

Summary

In this chapter, you were introduced to the new editor; Visual Studio Code from Microsoft, and saw how you can use it to create an ASP.NET MVC site that uses Bootstrap 4 on Windows, Linux, and OS X.

This is also the last chapter of this book and by now you should be fairly comfortable with using Bootstrap in your own ASP.NET MVC projects. You should also be a bit more familiar with the new ASP.NET Core and the new package managers and task runners it uses.

Make sure you download the sample project that accompanies this book from the Packt website or from the Github repository at https://github.com/Pietervdw/bootstrap-for-aspnetmvc in order to see the examples mentioned in action.

Thank you for reading. Until next time, keep coding!