Hello world of aspnet mvc webapi + vue
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
fe-src
src
test/calclib-test
.babelrc
.editorconfig
.gitignore
LICENSE
README.md
global.json
package.json
webpack.config.js

README.md

dotnet-spa

Hello world of aspnet mvc webapi + vue.

Dotnet core 1.0 is finally shipped, and I am considering to use that as my main stack in the future. I don't use razor to generate html in server side, instead, I use c# to write backend api and use javascript to write the web UI.

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 src
  • 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
  • dotnet restore
  • npm install
  • npm run to list the available scripts, and enjoy!

Steps to create this project

  • create global.json
  • tune .editorconfig and .gitignore
  • create dir src and test
  • cretea calclib under src
  • under calclib, run dotnet new -t lib, and write a simple library
  • create dir calclib-test under test
  • under calclib-test, run dotnet new -t xunittest
  • update project.json, add dependency to calclib, in current project, also include xunit dependencies
  • write unit tests
  • dotnet restore then dn test test/calclib-test, make sure tests all pass.
  • now, create the webapi, currently dotnet new -t web will create aspnet mvc project, but I only need api. So, use yeoman.
  • npm install -g yo generator-aspnet
  • yo aspnet under src, create calcapi project
  • 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 src/calcapi, run dotnet watch run, then test the api at http://localhost:5000.
  • add package.json, add some helper scripts, run with npm run
  • 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 fedev and npm run bedev. Two instances would watch source code in be and fe.
  • use http://localhost:18000 in browser to test the app, api call would be proxied to http://localhost:5000
  • to build the application: run npm run publish, the final package can be found under publish dir
  • to verify the dist: run npm run verifydist

References