HoNoSoFt.DotNet.Web.Spa.ProjectTemplates 1.0.0

Dotnet Core 2.1 + VueJs + Picnic CSS

Idea is to have the minimum as possible in order to have .Net Core 2.1 with Picnic CSS. There's already an another project using Bootstrap 4+, however, I would like to have something lighter as a template.

This is wanted to be simple a SPA with a minimum dependencies or performance issues. It can however be modified as you please.

Installation

Add the templates within your dotnet new -l list.

> dotnet new -i HoNoSoFt.DotNet.Web.Spa.ProjectTemplates

Then to create your project afterwards you will simply type:

> dotnet new vuejs-picnic

What's inside

• Picnic CSS (https://picnicss.com/)
• SASS, for style in a more elegant way
• VueJs (To build the components/UI)
• Vue-Router (For the SPA)
• WebPack (To pack/hot-reload)
• Babel
• Environments
  • Development
  • Production
• WebPack / Add a better management of external js/css as a plugins.....js
• Implement the default page style
  • Set the nav menu
  • Put some content in the pages (SPA template stuff)
  • [o] About page should contains something
• Add some api calls for the .Net WebApi stuff.
  • Create a real endpoint with some kind of values. (Like the aspnet demo)
• Rename the folder/app to some sort of template name.
• Make a reload/production build
• [o] Add logo within the template (I think it is feasible, see ms doc).
• Put this on github
• [o] Automate the build / CI
• [o] Add ts/x support. /optional/ (See example: https://github.com/aspnet/JavaScriptServices/blob/master/samples/misc/Webpack/webpack.config.js)
• [o] Add tslint/jslint
• Change the folder structure to look like a template for visual studio.
  • Add the template in the nuget gallery
  • [o] Add the template in the visual studio gallery (vsix?) ( maybe do https://docs.microsoft.com/en-us/visualstudio/misc/how-to-manually-package-an-extension-vsix-deployment?view=vs-2015 )
• Add a favicon
• Add the picnic css library part of vue
• Compile the picnic css (SASS) with some custom alteration (file).
  • Use of the min css instead for now. I don't think we need to use the sass.
• [o] Promote the stuff... who knows 😉
• Add Vuex for state management
• Add some badges

JQuery is not part of this, we want to avoid such a big library. I think most of the work can be done without it.

Stats

• Once compiled: ?

Vendors files are the library from within nodejs we use (i.e.: VueJs and VueRouter just to name it)

Page filling

• Keep register/login for the last part.

Idea of improvement

• Make a template with authentication
  • Make it with authentication? (Google?/O365?)
• Create a template for SignalR integration (Should I)
• Extra reading (template) : https://docs.microsoft.com/en-us/dotnet/core/tutorials/create-custom-template

About the author

My name is Nordès Ménard-Lamarre, you can find more details on me over my blog (FR) or over HoNoSoFt site.

License