{"id":13596346,"url":"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates","last_synced_at":"2025-04-09T16:32:21.949Z","repository":{"id":33210265,"uuid":"150976363","full_name":"Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates","owner":"Nordes","description":".Net Core 2.2 \u003e SPA Application with VueJS/Vuex/WebPack 4/Picnic CSS/Fontello","archived":false,"fork":false,"pushed_at":"2023-01-03T15:22:19.000Z","size":5367,"stargazers_count":16,"open_issues_count":43,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T15:51:43.959Z","etag":null,"topics":["csharp","docker","dotnet","dotnet-core","dotnet-core2","nuget","picniccss","spa","template","vuejs","vuejs2","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nordes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-30T14:52:35.000Z","updated_at":"2022-02-21T08:53:36.000Z","dependencies_parsed_at":"2023-01-14T23:55:29.628Z","dependency_job_id":null,"html_url":"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nordes","download_url":"https://codeload.github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067891,"owners_count":21042372,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csharp","docker","dotnet","dotnet-core","dotnet-core2","nuget","picniccss","spa","template","vuejs","vuejs2","webpack"],"created_at":"2024-08-01T16:02:19.858Z","updated_at":"2025-04-09T16:32:16.940Z","avatar_url":"https://github.com/Nordes.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![NuGet](https://img.shields.io/nuget/v/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates.svg)](https://www.nuget.org/packages/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/) \r\n[![Build status](https://ci.appveyor.com/api/projects/status/okfn33vwyff1xb3h/branch/master?svg=true)](https://ci.appveyor.com/project/Nordes/honosoft-dotnet-web-spa-projecttemplates/branch/master)\r\n\r\n# \u003cimg src=\"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/raw/master/VueJs.Picnic.CSharp/ClientApp/static/images/logo.png\" height=\"30\" /\u003e Dotnet Core 2.2 + VueJs + Picnic CSS\r\n\r\nIdea is to have the small, but really versatile and responsive UI using .Net Core 2.2, VueJS and Picnic CSS. The API's are easy to manage using .Net Core WebAPI classes. If you prefer to use Bootstrap and a different, but quite similar template, there's already [another project](https://github.com/MarkPieszak/aspnetcore-Vue-starter). This template have been created from scratch using some bit of code I've commited in the other project.\r\n\r\nThis is wanted to be simple a SPA with a minimum dependencies or performance issues. It can however be modified as you please. The VueJs is configured with Vuex, but this can be removed if you don't feel it meets your requirement. The same goes for the CSS framework.\r\n\r\n# Table Of Contents\r\n- [\u003cimg src=\"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/raw/master/VueJs.Picnic.CSharp/ClientApp/static/images/logo.png\" height=\"30\" /\u003e Dotnet Core 2.2 + VueJs + Picnic CSS](#img-src%22httpsgithubcomnordeshonosoftdotnetwebspaprojecttemplatesrawmastervuejspicniccsharpclientappstaticimageslogopng%22-height%2230%22--dotnet-core-22--vuejs--picnic-css)\r\n- [Table Of Contents](#table-of-contents)\r\n  - [Release](#release)\r\n  - [Technology inside](#technology-inside)\r\n    - [Template: vuejs-picnic](#template-vuejs-picnic)\r\n    - [Template: vuejs-picnic-table](#template-vuejs-picnic-table)\r\n  - [Installation](#installation)\r\n    - [Update your installation?](#update-your-installation)\r\n    - [Uninstallation? Because it could happen](#uninstallation-because-it-could-happen)\r\n  - [Publishing your application](#publishing-your-application)\r\n    - [Before publishing](#before-publishing)\r\n    - [Publishing](#publishing)\r\n    - [Extra if you use NginX](#extra-if-you-use-nginx)\r\n  - [Docker](#docker)\r\n    - [Docker - Build yourself](#docker---build-yourself)\r\n  - [Some Automation](#some-automation)\r\n    - [Kestrel serving using Gzip compression](#kestrel-serving-using-gzip-compression)\r\n    - [Base components](#base-components)\r\n    - [Webpack build](#webpack-build)\r\n    - [Webpack hot-reload](#webpack-hot-reload)\r\n    - [Vuex](#vuex)\r\n  - [Look'n feel](#lookn-feel)\r\n    - [Responsive design](#responsive-design)\r\n    - [Responsive menu](#responsive-menu)\r\n  - [Stats](#stats)\r\n  - [More information about what's inside or how it works?](#more-information-about-whats-inside-or-how-it-works)\r\n  - [About the author](#about-the-author)\r\n  - [License](#license)\r\n\r\n## Release\r\nPlease see [release notes](https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/wiki/Release-Notes). I am trying to keep it updated.\r\n\r\n## Technology inside\r\n### Template: vuejs-picnic\r\n| Tech | Tech | Tech |\r\n|:----:|:----:|:----:|\r\n| .Net Core 2.2 | VueJs | Webpack 4 |\r\n| Picnic CSS | VueX | Babel |\r\n| Fontello | Vue-Router | Eslint (standard+vuejs-recommended) |\r\n\r\n**Sample website:** [https://vue-picnic.azurewebsites.net/](https://vue-picnic.azurewebsites.net/)\r\n\r\n### Template: vuejs-picnic-table\r\n| Tech | Tech | Tech |\r\n|:----:|:----:|:----:|\r\n| .Net Core 2.2 | VueJs | Webpack 4 |\r\n| Picnic CSS | VueX | Babel |\r\n| Fontello | Vue-Router | Eslint (standard+vuejs-recommended) |\r\n| **Vue-i18n** | **Swagger** | **Vee-validate** |\r\n\r\n**Sample website:** [https://vue-picnic-table.azurewebsites.net/](https://vue-picnic-table.azurewebsites.net/)\r\n\r\n## Installation\r\nAdd the templates within your `dotnet new -l` list.\r\n\r\n```bash\r\n\u003e dotnet new -i HoNoSoFt.DotNet.Web.Spa.ProjectTemplates\r\n```\r\n\u003e You are behind a corporate proxy and are having trouble due to the HTTPS issues? Not a problem, [download the NuGet package](https://www.nuget.org/packages/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/) from the official site. After you've completed the download, simply run the command `dotnet new -i ./path/to/your/file.nupkg`\r\n\r\nThen to create your project afterwards you will simply type:\r\n\r\n```bash\r\n\u003e dotnet new vuejs-picnic\r\n```\r\n\r\n### Update your installation?\r\nSimply do like the previous step. As long as the version number are not equals, you won't have any unexpected behaviour.\r\n\r\n### Uninstallation? Because it could happen\r\n\r\nType the following command from the shell:\r\n\r\n```bash\r\n\u003e dotnet new -u HoNoSoFt.DotNet.Web.Spa.ProjectTemplates\r\n```\r\n\r\n## Publishing your application\r\n### Before publishing\r\nYou need to ensure that your wwwroot is empty before starting the process.\r\n\r\n### Publishing\r\nSimply use the normal way of publishing using DotNet Core CLI\r\n\r\n```bash\r\n\u003e dotnet publish your.project.csproj -c release -o ./publish/\r\n```\r\n\r\nYou can also add all the other parameter from the dotnet cli. Please [visit the MSDN site](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-publish?tabs=netcore21) to know more about it.\r\nThis will do a rebuild of your project and then after it will use the special target to rebuild your client (vuejs) in production mode.\r\n\r\n### Extra if you use NginX\r\nYou might need to have more configuration in case of publishing behing a NginX server. Let's say you have your base site `http://www.example.com` and that in your NginX configuration you would like to have your dotnet app within `http://www.example.com/myApp`. You will need in such a scenario to set the base uri for the index.html. Instead of doing that manually between development and production, you have the file `./build/base.prod.config.js` which contains a possible override.\r\n\r\nSimply set your override like the following:\r\n\r\n```javascript\r\nmodule.exports = {\r\n  baseUriPath: '/myApp/'\r\n}\r\n```\r\n\r\nWhen you will publish next time, the path will then be taken into account and it will sets automatically the base uri path.\r\n\r\n## Docker\r\nThe project already add some docker container available through the Docker Hub. You can pull the image if you want. It will make the sample available locally. The image is using the Alpine version so it only use a small footprint.\r\n\r\n* [vuejs-picnic](https://hub.docker.com/r/honosoft/vuejs-picnic/)\r\n* [vuejs-picnictable](https://hub.docker.com/r/honosoft/vuejs-picnictable/)\r\n\r\n### Docker - Build yourself\r\nSince containers in docker are quite popular, a `Dockerfile` is also included within the template root folder. The help in order to build the template is also within that file. Don't forget the `.dockerignore` where some files are being ignored in order to avoid some unwanted file to be copied before publishing.\r\n\r\n\u003e Ensure that you have Docker installed :)\r\n\r\n## Some Automation\r\n\r\n### Kestrel serving using Gzip compression\r\nThe code is having built-in the Gzip compression on the HTTPs. It's good to use that code especially if you use Kestrel. Otherwise, if you use IIS, please remove that specific code found in the `Startup.cs`. Normally, IIS offer it's own compression module which is more performant.\r\n\r\nThat being said, having it in Kestrel is still better than having nothing ;).\r\n\r\n### Base components\r\nAs 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.\r\n\r\nExample: `baseHelloWorld` will be registered as `hello-world` and you are going to be able to use it in your Vue Template.\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n  \u003cdiv\u003e\r\n    \u003chello-world /\u003e works!\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\n\u003e **Tips:** There's a real example within the project for the title for each page. The name of the component is `basePageTitle.vue`.\r\n\r\n### Webpack build\r\nThe 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. \r\n\r\n\u003e **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.\r\n\r\n### Webpack hot-reload\r\nWhen 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.\r\n\r\n### Vuex\r\nVuex, 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.\r\n\r\nI 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](https://vuex.vuejs.org) for more details and how to apply the best practices.\r\n\r\n## Look'n feel\r\n\u003cimg src=\"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/raw/master/screenshot/screenshot-home.png\" height=\"300px\" style=\"border: 1px #666 solid\" /\u003e\r\n\r\n\u003cimg src=\"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/raw/master/screenshot/screenshot-home-menu-collapsed.png\" height=\"200px\" style=\"border: 1px #666 solid\" /\u003e\r\n\r\n### Responsive design\r\n\u003cimg src=\"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/raw/master/screenshot/screenshot-home-responsive.png\" height=\"300px\" style=\"border: 1px #666 solid\" /\u003e\r\n\r\n### Responsive menu\r\n\u003cimg src=\"https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates/raw/master/screenshot/screenshot-home-responsive-menu.png\" height=\"300px\" style=\"border: 1px #666 solid\" /\u003e\r\n\r\n## Stats\r\nApp Size is really small, the latest version of the template can be seen on Azure, I think it reflects better than the previous table:\r\n* [VueJs-Picnic template](https://vue-picnic.azurewebsites.net/)\r\n* [VueJs-PicnicTable template](https://vue-picnic-table.azurewebsites.net/)\r\n\r\nThe reason why the table is a bit bigger, is because there's 1 more page and then a few extra components within the template (such as Vee-validate, I18n, etc.).\r\n\r\n## More information about what's inside or how it works?\r\nThe wiki is currently under construction. So please visit sometimes ;).\r\n\r\n## About the author\r\nMy name is Nordès Ménard-Lamarre, you can find more details on me over my [blog](https://blog.honosoft.com) (FR) or over [HoNoSoFt site](https://www.honosoft.com).\r\n\r\n## License\r\n![License MIT](https://img.shields.io/github/license/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates.svg)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNordes%2FHoNoSoFt.DotNet.Web.Spa.ProjectTemplates/lists"}