This repository is a fork from SoftwareAteliers/asp-net-core-vue-starter so I could easily create a template that suits my own needs. If you don't like my setup, make sure to check them out too. Below, the differences are described.
The repository contains an ASP.NET Core + Vue.js starter template. The template runs on ASP.NET Core 3.1 and is created by Vue CLI 4.0 with a new plugin based architecture allowing developers to interactively scaffold a new project with just a one command.
It has as of 2020-04-14 the latest packages:
Note: You can use any frontend framework you like with this starter.
For ASP.NET Core 2.2 template use didii/AspNetCore.VueTs instead.
- Hot module replacement
- Code-splitting
- Tree-shaking
- ES2017 transpilation
- Long term caching
- Easy debugging in Chrome and Visual Studio Code
- ...
ASP.NET Core 3.1:
- Web.API
- SPA services to host client app
Vue.js with CLI 4.0 supporting optional integrations:
- TypeScript + helper libraries for even more type-safety
- Progressive Web App
- Vue Router & Vuex (State Store)
- Linting, unit testing
- ...
For a full feature list, I suggest you to read the official CLI release statement by Evan You.
There are two ways how to set up the project: one for people who want to create their own template and choose custom integrations and the other for developers who want to start with no configuration.
- Clone this repository:
git clone https://github.com/didii/asp-net-core-vue-starter
- In the
AspNetCoreVueStarter\ClientApp
folder, runnpm install
If you prefer to overwrite default Vue client app with custom settings, take the following steps:
- Remove all the contents of the folder /ClientApp
- Create a new Vue project by using Vue CLI:
vue create client-app
OR by using CLI graphical interface runningvue ui
- Move all the contents from the new folder /client-app to /ClientApp.
- Run the Vue app using
npm run serve
from theAspNetCoreVueStarter\ClientApp
folder - Run the .NET application using
dotnet run
in the root folder or hit F5 or Ctrl+F5 in Visual Studio
Browse to http://localhost:65025 for ASP.NET Core + Vue app or browse to http://localhost:8080 for Vue app only.
In the sources tab in Chrome, press Ctrl+P and start searching for Counter.vue
.
The first file that pops up should be webpack:///.src/views/Counter.vue
which is the file only containing the typescript code.
All other files with the hashes are put in webpack-generated:///
and are generated files which are of no use while debugging.
- Visual Studio Code extension: Debugger for Chrome
- Run both the vue app and asp.net core app (see Run the application)
- Press F5 in Visual Studio Code and select the Chrome environment
- If a folder
.vscode/launch.json
already exists, just open that file instead.
- If a folder
- Use the following profile:
{ "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:65025", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } }
- Press F5 and select the Launch Chrome profile if necessary
When you open Chrome, it needs to be opened with a debugger port open.
Only then you can attach.
You can do this by running chrome.exe --remote-debugging-port=9222 http://localhost:65025
or by using the chrome shortcut in the root folder.
When Chrome and both applications are running:
- In Visual Studio Code, choose the attach profile for debugging
- Press F5 in Visual Studio Code and select the Chrome environment
- If a folder
.vscode/launch.json
already exists, just open that file instead.
- If a folder
- Use the following profile:
{ "type": "chrome", "request": "attach", "name": "Attach Chrome", "urlFilter": "http://localhost:65025*", "port": 9222, "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } }
- Press F5 and select the Attach Chrome profile if necessary
Publishing should also be easy enough. To test it out on Windows, you could use IIS. You can take these steps to make it work in IIS locally, but the idea should be very similar when using other hosting services.
- Go to the
vue.config
file and change the value ofpublicPath
to/AspNetCoreVueStarter/
- In Visual Studio, right click the project and click Publish
- Select the Folder profile, check the path and then click Create
- Open IIS Manager
- Right click the Default Web Site and select Add Application
- Set the following values:
- Alias:
AspNetCoreVueStarter
- Choose the Default App pool
- Set the physical path to the publish path
- Alias:
- In your browser, navigate to http://localhost/AspNetCoreVueStarter and your site should be displayed!
Note that unless you use IIS to develop, it's not a good idea to keep the production path in your vue.config
as default setting since this will also influence the path vue is hosted at in development.
You'll most likely want to use something like
process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
See the official vue guide for more info.
Want to file a bug, contribute some code, improve documentation or contest my design ideas? Excellent! Please make sure to check existing issues before opening a new one.
This project is a fork from SoftwareAteliers/asp-net-core-vue-starter which I used as a base. So huge thanks to the SoftwareAteliers to get me started.
Further resources I used:
- Debugging in VS Code
- Source maps guide for easier debugging in Chrome by Peter Kuhn
The changes are for more fine-grained control and less dependencies to start out with.
- Moved the project to a subfolder of the solution
- To allow proper structure with multiple projects
- Used
UseSpa
instead ofMapToVueCliProxy
- Allows more control of the FE app by manually starting it
- Allows better control, especially when using IIS (non-express)
- Recreated the Vue app from scratch
- Removed Vuetify
- This dependency is too hard to my likings
- Removed fonts
- Simplified store
- Added
vuex-module-decorators
for type-safety and class-style modules
- Added
- Added
vue.config.js
to create source-maps for easy debugging
- Removed Vuetify
Copyright © 2018 - 2019 Software Ateliers