All Projects β†’ SoftwareAteliers β†’ Asp Net Core Vue Starter

SoftwareAteliers / Asp Net Core Vue Starter

ASP.NET Core + Vue.js starter project

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Asp Net Core Vue Starter

Bento Starter
🍱 Full-Stack solution to quickly build PWA applications with Vue.js and Firebase
Stars: ✭ 1,519 (+248.39%)
Mutual labels:  starter, vuex, template
Hartija Css Print Framework
Universal CSS for web printing
Stars: ✭ 509 (+16.74%)
Mutual labels:  starter, starter-template, template
Kotlin Android Mvvm Starter
Android Kotlin Starter is a starter project which implements MVVM Pattern.
Stars: ✭ 276 (-36.7%)
Mutual labels:  starter, starter-template, template
Vue Element Starter
Vue starter with Element-UI [READY, unmaintained now]
Stars: ✭ 216 (-50.46%)
Mutual labels:  starter, vuex, template
nuxt-starter-netlify-cms
Example nuxt + netlify cms project. Nuxt port of Gatsby starter app.
Stars: ✭ 13 (-97.02%)
Mutual labels:  starter-template, starter
CVPZ
No description or website provided.
Stars: ✭ 16 (-96.33%)
Mutual labels:  web-api, asp-net-core
KotlinMvpTemplateGenerator
Android Studio template for Kotlin with MVP + Dagger2 + Retrofit2
Stars: ✭ 65 (-85.09%)
Mutual labels:  starter-template, starter
SampleProject
A starter project for Sample Project in Objective C. Objective C version of https://github.com/xeieshan/SwiftySampleProject
Stars: ✭ 31 (-92.89%)
Mutual labels:  starter-template, starter
nodejs-starter-template
You can use this template when you're starting a new project by using Node.js, Express, and Mongoose. It contains general concepts, you can customize it according to your needs.
Stars: ✭ 54 (-87.61%)
Mutual labels:  starter-template, starter
BookCart
An e-commerce application for an online book store.
Stars: ✭ 116 (-73.39%)
Mutual labels:  web-api, asp-net-core
template-elm-chrome-extension
A template repository for building a chrome extension with webpack and elm.
Stars: ✭ 16 (-96.33%)
Mutual labels:  starter-template, starter
noise-php
A starter-kit for your PHP project.
Stars: ✭ 52 (-88.07%)
Mutual labels:  starter-template, starter
react-redux-immutable-webpack-ssr-starter
React + React-Router 4 + Redux + ImmutableJS + Bootstrap + webpack 3 with with Server side rendering, Hot Reload and redux-devtools STARTER
Stars: ✭ 21 (-95.18%)
Mutual labels:  starter-template, starter
car-rental
CarRental Project
Stars: ✭ 13 (-97.02%)
Mutual labels:  web-api, asp-net-core
example-typescript-package
Example TypeScript Package ready to be published on npm & Tutorial / Instruction / Workflow for 2021
Stars: ✭ 71 (-83.72%)
Mutual labels:  starter-template, starter
Kodkod
https://github.com/alirizaadiyahsi/Nucleus Web API layered architecture startup template with ASP.NET Core 2.1, EF Core 2.1 and Vue Client
Stars: ✭ 45 (-89.68%)
Mutual labels:  web-api, asp-net-core
Vue Electron Template
An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
Stars: ✭ 260 (-40.37%)
Mutual labels:  starter, starter-template
Kotlin Android Mvp Starter
Create/Generate your kotlin MVP projects easily
Stars: ✭ 270 (-38.07%)
Mutual labels:  starter, starter-template
Laravel Starter
A CMS like modular starter application project built with Laravel 8.x.
Stars: ✭ 299 (-31.42%)
Mutual labels:  starter, starter-template
Demo.AspNetCore.WebApi
Sample Web API powered by ASP.NET Core MVC, Azure Cosmos DB and MediatR
Stars: ✭ 24 (-94.5%)
Mutual labels:  web-api, asp-net-core

ASP.NET Core Vue Starter

The repository contains an ASP.​NET Core + Vue.js starter template. The template runs on ASP.NET Core 5.0 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.

Original article how to create the starter template is available here.

Nuget

For ASP.NET Core 3.1 template use release v2.6.0

For ASP.NET Core 2.2 template use release v1.1.0


Table of Contents

Features

  • Hot module replacement
  • Code-splitting
  • Tree-shaking
  • ES2017 transpilation
  • Long term caching and so on

Used Technology Stack

ASP.NET Core 5.0:

  • 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.

Prerequisites


Getting started

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 the starter with default 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

(Optional) Scaffold Vue.js app with custom configuration

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 running vue 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.

Run the application

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.

1. Using the command line

  • Run the .NET application using dotnet run

2. Using the built-in run command

  • 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.

Application screenshot

Publish the application

1. Folder output

  • Run the .NET publish command using Release configuration: dotnet publish -c Release

or

  • Follow the Publish wizard in Visual Studio selecting Folder profile.

2. Docker output

  • 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>

View your application running

Recommended plugin for debugging Vue

  • Get Chrome DevTools for Vue.js here

Issues and Contribution

Want to file a bug, contribute some code, or improve documentation? Excellent! Please make sure to check existing issues before opening a new one.


Contributors

Special thanks to everyone who helped and contributed to this project!


License

MIT License

Copyright Β© 2018 - 2021 Software Ateliers

Where to find me

Medium: Software Ateliers | Twitter: @SAteliers

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].