web-template

Guide for creating a aspnet core web project integrated with vue-cli

Creating the Project

Prerequisites

• Visual Studio 2017+
• .NET Core SDK 2.2.x
• Microsoft.AspNetCore 2.2.x
• Vue cli 4.x

Create the AspNetCore Project

The following instructions will work both in Windows, Mac or a linux desktop. This example uses the windows remove directory command, for other O/S use the appropriate command

Open a command prompt in the target directory and run the following:

$ dotnet new react --name <ProjectName>
$ cd <ProjectName>
$ rd ClientApp /S /Q
$ dotnet add package VueCliMiddleware
$ vue ui

where '<ProjectName>' is the name of the directory to put the project in

In the vue ui, do the following:

1. If you are not already there, goto the ‘Vue Project Manager’ page
2. Click ‘Create’
3. Navigate to your project folder and click ‘Create new project here’
4. Make the folder name ‘clientapp’, untick ‘Initialize git repo’, then click ‘Next’
5. Select ‘Manual’ preset
6. Tick, Babel, Router, Vuex, CSS Pre-processors, Linter / Formatter and Use config files. Then click ‘Next’
7. Untick history mode, Select ‘node-sass’ and ‘ESLint + Standard config’
8. Tick ‘Lint on save’, then click ‘Create Project’
9. Save your settings to ‘Default Project’
10. When the project is created and the page switches to the Project Dashboard
11. Navigate to ‘Configuration / Vue CLI’ and set a) Output directory = '../wwwroot' b) Untick ‘Enable Production Source Maps’
12. Click 'Save Changes'
13. Navigate to ‘Configuration / ESLint configuration’ and set a) Untick ‘List on save’ b) Set ‘Select config’ to ‘Strongly recommended’
14. Click ‘Save Changes’

Now open the project <ProjectName>.csproj in Visual Studio (or VSCode if you prefer)

Open 'Startup.cs' and make the following edits:

1. Around line 28 in the 'ConfigureServices' method change the line setting the RootPath to:

configuration.RootPath = "wwwroot";

2. Around line 52 in the 'Configure' method change the line with 'UseReactDevelopmentServer' to

spa.UseVueCli("serve", 8080);

3. Make sure you add the import:

using VueCliMiddleware

4. On the top toolbar in visual studio where the debugging context is set to 'IIS Express', click the dropdown and select <ProjectName> instead. This will run the project under kestrel as it will run in production rather than under IIS
5. In the solution explorer, right-click on the project and click 'Add / New Folder' and name it 'wwwroot'
6. Click 'Save All' and save the solution file

Results

Your Development environment will look as follows:

Requests will come in on http://localhost:5000 The aspnetcore project will process it, if the target is a MVC or API controller. Otherwise, the request will be proxied to http://localhost:8080 for node to handle with the running the Vue project.

This will allow you to utilize the hot-module-replacement feature and debug the client side project correctly.

For Production, npm will process the application in the 'clientapp' folder, compiling it to static js, css, etc files putting them in the wwwroot directory where kestrel will serve them as required.

Editing the Client-Side Project with VSCode

1. Add Required VSCode Extensions

Find the 'Extensions Panel'.

Search for 'Vetur' in the search box and install.

This will add support for .vue files in VSCode.

Then search for the 'ESLint' plugin and install.

This will add support for providing visual feedback on linting and auto-fixing problems on file save.

2. Update VSCode settings

Make the following changes to your VSCode settings to allow ESLint to fix formatting issues.

• Locate the settings section in File > Preferences > Settings Or type Ctrl+
• Click the curly brackets button in the top right of VS Code window

• Modify existing settings to appear as follows

{
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.tabSize": 4,
    "editor.insertSpaces": false,
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": false,
    "vetur.validation.template": false
}

The formatting settings specified in 'eslintrd.js' will now be enforced

3. Setup .eslintrc.js File

• Locate the file located in the 'clientapp' directory
• Modify the file to appear as follows:

module.exports = {
    root: true,
	env: {
		node: true
	},
	extends: [
		'plugin:vue/strongly-recommended',
		'@vue/standard'
	],
	rules: {
		'no-var': 2,
		'indent': ['error', 'tab'],
		'no-tabs': 0,
		'semi': [
			'error',
			'always'
		],
		'quotes': [
			'error',
			'single'
		],
		"space-before-function-paren": ["error", "never"],
		'no-console': 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'vue/component-name-in-template-casing': ['error', 'PascalCase'],
		'vue/html-indent': [
			'error',
			'tab'
		],
		'vue/max-attributes-per-line': 'off',
		'vue/singleline-html-element-content-newline': 'off'
	},
	parserOptions: {
		parser: 'babel-eslint'
	}
};

Debugging the Client-Side Project with VSCode

Edit vue.config.js File

• Locate the file located in the 'clientapp' directory
• Modify the file to appear as follows:

module.exports = {
    // output production files to the aspnetcore project directory 'wwwroot'
    outputDir: '../wwwroot',
    configureWebpack: {
        // Using source-map allows VS Code to correctly debug inside vue files but not during production
        devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
        // Breakpoints in VS and VSCode won’t work unless you adjust where it can find the source files
        output: {
            devtoolModuleFilenameTemplate: info => {
                const resourcePath = info.resourcePath.replace(
                    './src',
                    './ClientApp/src'
                );
                return `webpack:///${resourcePath}?${info.loaders}`;
            }
        }
    }
};

Add required VSCode extension

Search for and install 'Debugger for Chrome'

This will allow you to set a specific launch target for Chrome in the VSCode debugger

Create a Launch Target

Click on the debug icon on the left toolbar and then click on the configure icon

Edit launch.json to look like the following

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome (vue)",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true
        }
    ]
}

The 'webroot' property depend on wich folder is the root folder in VSCode if VSCode is opened in the <ProjectName>/clientapp directory then: "webRoot": "${workspaceFolder}/src" else if VSCode is opened in the <ProjectName> directory then: "webRoot": "${workspaceFolder}/clientapp/src"

Debugging the project

1. Run the project in Visual Studio
2. Wait until the project comes up and the webpage appears
3. In VSCode click 'Run' in the debug panel

4. You can now set breakpoints in your vue files

5. All the c#, MVC, server side code can have breakpoints and debugging done via Visual Studio as normal