HoNoSoFt.DotNet.Web.Spa.ProjectTemplates 1.1.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.

Technology inside

Installation

Add the templates within your dotnet new -l list.

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

You are behind a corporate proxy and are having trouble due to the HTTPS issues? Not a problem, download the NuGet package from the official site. After you've completed the download, simply run the command dotnet new -i ./path/to/your/file.nupkg

Then to create your project afterwards you will simply type:

> dotnet new vuejs-picnic

Update your installation?

Simply do like the previous step. As long as the version number are not equals, you won't have any unexpected behaviour.

Uninstallation? Because it could happen

Type the following command from the shell:

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

Some Automation

Base components

As described within the Wiki, there's some automation regarding the Components available within ./ClientApp/Components/**/*. All the file starting with the keyword base are going to be declared as global and the name of the component to be used anywhere will be defined in snake case without the base keyword.

Example: baseHelloWorld will be registered as hello-world and you are going to be able to use it in your Vue Template.

<template>
  <div>
    <hello-world /> works!
  </div>
</template>

Webpack build

The css is not generated while you are in development mode. They are going to be created only when you will use the dotnet publish command or as an alternative, you can also go and type npm run build -- --prod which will launch the production build with the minification and extraction of the files.

Important: Currently, webpack clean the entire wwwroot folder within the .Net project. So, if you have static files, move them within the ./ClientApp/static/ folder.

Webpack hot-reload

When the .Net process is started, dotnet run your app, you will have to wait a little that the file are published in your wwwroot folder. After it is completed, you will be able to access your application at https://localhost:5001. Any modification made within the ClientApp folder will trigger a live update within the browser. This is particularily useful.

Vuex

Vuex, for the people who come from React, is the redux from VueJs. You have mutation, state management and much more. It is quite useful when you want to propagate your change or for example login auser and update the entire UX at once. The same goes for refreshing a token.

I don't think I should go more in depth on that topic. There is a sample in the counter page. Please go and look for yourself and then go on the official site for more details and how to apply the best practices.

Look'n feel

Responsive design

Responsive menu

Stats

To be reviewed. The number are a bit higher but not that much.

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

More information about what's inside or how it works?

The wiki is currently under construction. So please visit sometimes 😉.

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