This app provides a tool for TCG events streamers to manage player info and images from a web interface. The user can either setup sources pointing to local files, or embed web sources (work in progress).
- Hot module replacement
- Code-splitting
- Tree-shaking
- ES2017 transpilation
- Long term caching and so on
ASP.NET Core 3.1:
- Web.API
- Vue CLI and JavaScript Services middlewares to integrate with client app
Vue.js with CLI 4.0 supporting optional integrations:
- TypeScript
- Progressive Web App
- Vue Router & Vuex (State Store)
- Linting, unit testing, E2E testing
- 3rd party component frameworks (Vuetify, Vue Bootstrap etc.)
- publish your personal/enterprise plugin and so on...
For a full feature list, I suggest you to read the official CLI release statement by Evan You.
- .NET 5.0 >= 5.0
- NodeJS >= 8.9
- Vue CLI >= 4.0
- Your favourite editor (I prefer VS Code), or VS 2017/19
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/SoftwareAteliers/asp-net-core-vue-starter
or you can use .NET Core CLI templates:
-
Install the template from NuGet repository:
dotnet new -i SoftwareAteliers.AspNetCoreVueStarter
-
Initialize the project:
dotnet new vue -o MyProject
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
Unfortunately Vue CLI does not allow us to set a project name by C# standards using Upper Camel Case (Pascal Case) naming convention, so let's initiate app inside of client-app folder and then move the content to ClientApp.
- Move all the contents from the new folder /client-app to /ClientApp.
Now application is ready to run.
You have three choices when it comes to how you prefer to run the app. You can either use the command line or the build-in run command.
- Run the .NET application using
dotnet run
- Run the application in VSCode or Visual Studio 2017 by hitting
F5
It will take some time during the first run to download all client side dependencies.
Browse to http://localhost:5000 for ASP.βNET Core + Vue app or browse to http://localhost:8080 for Vue app only.
- Run the .NET publish command using Release configuration:
dotnet publish -c Release
or
- Follow the Publish wizard in Visual Studio selecting Folder profile.
- Run the .NET publish command using self contained single file configuration
dotnet publish -r win-x64 -p:PublishSingleFile=true --self-contained true
- Run the following command in a cmd window to build the docker image:
docker build -t <IMAGE_NAME> .
ATTENTION! Do not miss the final dot to build the current directory
- Run the application in a cmd window by this command:
docker run -d -p 5000:80 <IMAGE_NAME>
- Get Chrome DevTools for Vue.js here