This is a fork of the template made by TrilonIO, please read through this as this forked project has deviated completely to support and add different direction. For any help on this project, please don't go to TrilonIO for help, I will try my best to help out with any confusions. This is a forked repo, but it's took a radically new direction.
- Upgraded to ASP Core 3.1 (was 2.2)
- Added Vue CLI, which abstracts away many of the plumbing that the previous project did with webpack 4
- Added SPA integrations - please read the section "Notes" for more info
- Split the project into Web and Data (Web API) - Was all part of the same applicatoin
Starter Template for ASP.NET Core and Vue.JS (Vue) - with Webpack (with HMR), Web API, Vuex state manangement and other best-practices baked in!
Written in ES.
- ASP.NET Core 3.1
- Web API + ASP MVC
- VueJS 2
- Vuex (State Store)
- Vue CLI
- HMR (Hot Module Replacement/Reloading)
- Vue CLI >= 4.0
- Bootstrap 4
- .Net Core 3.1
- NodeJS >= 10.x
- VSCode (ideally), or VS2019
Clone this Repo itself
- Clone this repository :
$ git clone https://github.com/sksallaj82/aspnetcore-Vue-starter.git VueWeb $ cd VueWeb/content$ dotnet restore && npm install- (If using VSCode)
$ code . - (If using Visual Studio) Open the
*.slnfile with "Open project" from Visual Studio IDE
This is manual for now. Navigate to content\Web\ClientApp and double click the file "install-website.bat" and wait for everything to be completed.
Right click the solution and click "Set Startup Projects" and make sure you select "Multiple Start up Projects" for both Data and Web.
Run the application in VSCode or Visual Studio 2019 by hitting F5.
When running the app using debug menu or F5 VS open auto the app in the browser;
This project has 5 possible environments set up as follows:
- _ : local environment
- Using this will look at the static files found in ClientApp/public, in this mode you have Hot reload since it spins up a seperate server on port 8080. In this mode, none of the MVC controllers on the Web project are being used. Use this mode for developing the web interface's look and feel.
- _d : local dev environment
- Before you switch to this environment, run
npm run build:_din ClientApp/src. Use this for integrating systems on the local machine, like authentication for example.
- Before you switch to this environment, run
- developement : dev environment shared
- Before you switch to this environment, run
npm run build:devin ClientApp/src. Use this for integrating systems on the dev machine, where you can have multiple developers, and other users testing the system.
- Before you switch to this environment, run
- staging : staging environment shared
- Before you switch to this environment, run
npm run build:stagingin ClientApp/src. Use this for integrating systems on the staging machine, where you test the application on a machine that looks as close to production ready as possible
- Before you switch to this environment, run
- prod : production environment shared
- Before you switch to this environment, run
npm run build:stagingin ClientApp/src. Use this for integrating systems on the production machine.
- Before you switch to this environment, run
It is recommended to use the follow modes for the environements:
- Debug mode for _ and _d
- Release mode for development, staging, production
When you run "npm run build:", this builds the files into wwwroot/dist, and the project will make use of the files located there as its injected into an MVC view (cshtml). These types of builds are needed since MVC controllers would be enabled and used. It's only for _d, dev, staging, and prod only. The _ environment doesn't look at wwwroot/dist, it's a special local case.
This is meant to be flexibile, if you ever want to change the way these environments are set up, this is hooked in the following files:
- Web/ClientApp/src/package.json
- This holds all the scripts definition
- Web/ClientApp/src/vue.config.js
- This looks at environments to configure environment paths
- Web/ClientApp/src/env.*
- This is Vue Cli's way of picking environments, you can read more about it here: Vue Cli - Mode and Env
- Web/Properties/launchSettings.json OR Data/Properties/launchSettings.json
- We use these specific profiles on VS Studio 2019, to switch environments via IDE. You'd unfortunately also have to manually run "npm run build _d" in ClientApp/src file, if you want to test the _d environemt
- Web/Startup.cs OR Data/Startup.cs
- This is where we separate between looking at the static SPA files versus injecting them into an MVC view. The application is made to be flexible to allow you to decide whether you want to use MVC and SPA together. The only mode that neglects MVC controllers and views is the _ environment, and only enables the SPA application.
The only time the website ever fetches data from the application is when you click "Data" on the website. If this doesn't work, make sure Data project has started with the Web project.
- Get Chrome DevTools for VueJS here
Nothing's ever perfect, but please let me know by creating an issue (make sure there isn't an existing one about it already), and we'll try and work out a fix for it! If you have any good ideas, or want to contribute, feel free to either make an Issue with the Proposal, or just make a PR from your Fork. Please note that this project is released with a Contributor Covenant Code of Conduct. By participating in this project you agree to abide by its terms.
Looking for ASP.NET Core & Angular 7.x+ Universal starter? click here
Copyright (c) 2020 Sultan Sallaj
This forked repo couldn't have been created without TrilonIO's contribution to the "Asp.net Core & Vue.js (ES6) SPA Starter kit".
Check out Trilon.io for more info!
Contact us at hello@trilon.io, and let's talk about your projects needs.
Twitter: @Trilon_io