Hello world of aspnet mvc webapi + vue.
My working environment now is mac OSX, so I don't use visual studio. Currently I am using vscode, it is not as powerful as VS, but already enough to me.
In this example, it will cover:
- multiple projects in
- unittest with xUnit
- aspnet core webapi
- webpack project hosted in aspnet net
- use serilog to write structured log
- configure serilog to write json to file
And these are not covered, and might be covered in the future
- authentication, especially social login
- change minLogLevel in runtime
- secret management
- js app unit test
- browser testing
- docker image build
How to run it
- clone, of course
- install dotnet core and nodejs on your machine
npm runto list the available scripts, and enjoy!
Steps to create this project
- create global.json
- create dir
dotnet new -t lib, and write a simple library
- create dir
dotnet new -t xunittest
project.json, add dependency to calclib, in current project, also include xunit dependencies
- write unit tests
dn test test/calclib-test, make sure tests all pass.
- now, create the webapi, currently
dotnet new -t webwill create aspnet mvc project, but I only need api. So, use yeoman.
npm install -g yo generator-aspnet
- do some cleanup, we don't need everything in the template, e.g. remove IIS, gulp, bower and Docker related files
- add tool dotnet watch: https://github.com/aspnet/dotnet-watch
- add dependency to calclib, and add the logic
- to run the webapi, cd to
dotnet watch run, then test the api at
- add package.json, add some helper scripts, run with
- now, add frontend part, create a vue project (I use vue-cli with webpack-simple), and move files into this project
- put the js app source code in
fe-src, modify the webpack.config.js
- to develop: open 2 terminal windows:
npm run fedevand
npm run bedev. Two instances would watch source code in be and fe.
http://localhost:18000in browser to test the app, api call would be proxied to
- to build the application: run
npm run publish, the final package can be found under
- to verify the dist: run
npm run verifydist