nordes/honosoft.dotnet.web.spa.projecttemplates

.Net Core 2.2 > SPA Application with VueJS/Vuex/WebPack 4/Picnic CSS/Fontello

honosoft.dotnet.web.spa.projecttemplates's Issues

Write a wiki for Docker + one of the template.

As the title says.

Article can also be on honosoft.com

Add a cookie message ... (you know)

Probably there`s already some kind of template for that.

Let the user consent about the cookies. Those templates are not yet using storage/cookies, but if the developer start doing it, then it should be displayed (EU law...)

So, basically it will become a component with a cookie or similar to keep the user agreement.

Once Picnic CSS is completed, add other templates with other frameworks

Other popular css framework: https://dzone.com/articles/top-10-lightweight-css-frameworks-for-building-fas

And also create some other template with typescript

Add the paging in the data table

Show a sample where the data table have paging (temperature page).

PicnicTable - Create a sample with SignalR

Basically create a sample using SignalR. It should be fairly easy and we should be using the vuex for that. It's like the perfect place to make our "front end store".

PicnicTable - Create a sample with Authentication

OpenId? or basic Dotnet authorization?

Align code with latest version of dotnet (UseSpa + AddSpaStaticFiles)

Right now the route was kind of hardcoded... but the real solution is to use the official UseSpa and AddSpaStaticFiles.

Update readme - New design / Minor changes

Update the readme, new design image, new loader to avoid exception page, package update.

PicnicTable - Add a form validation

It's a common thing to have on many website. Maybe it should be part of the template "or not".

Fix route (params not working)

Params are not working due to the configuration in webpack.

It's easy to fix.

Update readme file - Extract what's inside to wiki

Move some of the content which is in the readme within the Wiki.

This will simplify the landing page/nuget page.

Apply the .Net Core SPA templating..

Using Picnic CSS might be difficult, but it's feasible.

At the moment the look is as following:

We have to finalize the view and the data API.

Webpack + Lint - Live?

Should it be done... it works, but it's not a great experience if you're in visual studio.

Package file:

    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",

Webpack conf:

  // Part of the export
  stats: 'minimal', // https://webpack.js.org/configuration/stats/
  // rules
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.resolve(_rootDir, 'ClientApp')],
        options: {
          formatter: require('eslint-friendly-formatter'),
          emitWarning: !isProduction, // You can also use emitError instead
          configFile: '.eslintrc.js'
        }
      },

PicnicTable - Add swagger API

Should this be added or should it be a different template?

The same goes for the signalr and some other.

Update readme file for 1.2.0

With many changes, comes an update for the readme.md

This is for the 1.2.0

todo... redesign theme with better flex css

I have redesigned on a personal project using better flexbox for menu and all. So it looks a bit more useful (top bar hiding when small screen, and left bar become top bar when minimizing with icon on top right).

I don't know how much time it will take to apply here ;).. .so I'll leave it as a todo.

Add a collapsible menu.

Left menu in the new design should/can be collapsed. It was part of the original design. Now with the flex redesign it works as expected.

All - IE (11?) left menu fails

The left menu does not display properly after using a promisify "like" polyfill.

So, I either fix it or consider that menu as non IE friendly ;).

Update npm package

Update the npm packages.

Babel/core -> 7.1.2
copy-webpack-plugin -> 4.5.4

CSS Glitch (over the overlay)

Somehow, the css is behaving wrongly with

• the section. (Fixed using the Z-Index)
• the icon within a a tag. (Why?)

Add a not found page (404)

Add a not found page (404)

Add a docker file + heroku example

Simply add a dockerfile and an "automatic" deployment to heroku example (if possible).

The dockerfile, it's simple. For heroku "1 push" deploy button, I don't know yet how to do.

Fix the template path in the nupkg and also in the repo

Right now we use /content/... instead of directly the real template name.

Map file generation are not generated

The value is wrong due to a refactoring.

Fix readme text

It states that vuex is not yet implemented while it is.

The SPA default page middleware could not return the default page '/index.html'

InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.

fresh install, simply dont run.

AppVeyor yaml implementation

Use the appveyor yaml file or use a powershell... (something like that)

The yaml in this case will be quite simple. Let's not use the vsix build yet. That way the build can pass.

To read: http://vsixgallery.com/guide/dev/

html webpack plugin

Add a base ref as a parameter. This allow to have a nginx server running the app as the front-end.

      templateParameters: {
        'baseHref': isProduction ? '/some-url/' : '/'
      }

In the index.html

    <base href="<%= baseHref %>" target="_blank">

related to #29

Write proper wiki pages or at least something

Write proper Wiki pages.

Basically, kind of how to work with the template. At the same time update the about in the template to point to the wiki.

This is more a long running task, not an issue.

I will close

Add build status badge (appveyor)

Add the appveyor badge.

Since the left menu can collapse, we should keep the state

In the vue template with a store, we should use the store + localstorage, and in the template without the store, we should use the storage directly.

Add a spinner when loading the data

Add a spinner when loading the data => FetchData

Also, fix the BaseIcon in order to also allow a spin (parameter). Default it will not spin, otherwise it adds the class to spin + use the i instead of span html element.

Add icons within the template

Simple, but still require some time ;).

Add the icons from Fontello (build custom your font/icons).

For a small site it's more than enough.

Persists in vuex + localstorage the Language

As the title says.

So that when a user come back we push the user to the proper section of the site.

i.e.: I give a link http://mysite.com/MyPage (default: en)

User who receive it use the site in Japanese so he gets forwarded to : http://mysite.com/ja/MyPage

However, if the user goes on the page http://mysite.com/en/MyPage, it will sets the current user locale to EN.

Regression: The publicPath for dist is causing webpack hot reload issue

Since I added the . before the /dist in the public path for the file to be published. This causes an issue when we use the hot reload.

The hot reload then use /dist/webpack_... instead of /webpack_... (websocket)

The fix is to simply ignore the . before when we're not in production. Not the best solution, but it should be working.

Translate the whole site in 3 languages

Using the i18n apply it in:

• English (Already built-in and also the default)
• French
• Japanese (because... I live in Japan \o/).

Create a vsix template

See/read https://docs.microsoft.com/en-us/visualstudio/extensibility/starting-to-develop-visual-studio-extensions?view=vs-2017

Bug with routes order in vue picnic css

The routes are working, however, when we have no language selected (default), it fails if you push f5.

The main reason is the order of routing that cause a kind of conflicts. It thinks that it goes on /{something} which would be the home component with a language.

To fix, we simply have to move the home route at the end, add an order within the meta and then change the menu ordering.

Enable Gzip compression on https (kestrel)

The Kestrel does not serve automagically the js files using gzip compression.

Some details on how to do it: https://www.softfluent.com/blog/dev/Enabling-gzip-compression-with-ASP-NET-Core

In our case, let's enable it by default for Kestrel especially. It's maybe a bit slower than IIS, but at least it enforces it.

Delay on the API is too long

A delay have been added on the API, but I think that we should simply put instead the fake delay in the front-end before doing the API call (first time). That way it would remove the latency.

publish in docker does not work

The specified framework 'Microsoft.AspNetCore.App', version '2.2.0' was not found.

Fix burger/menu when getting smaller.

This is actually a bug due to it's current implementation.

I need to change the menu implementation in order to have the burger show, and put the titlebar as static (top) + burger menu.

Something similar...

Images in SCSS fails to have the proper URI

When a BG image is set in the SCSS it sometimes fails to set the proper URL.

(Not confirmed on latest version)

Apply best webpack 4 practice for Production build

See details at : https://webpack.js.org/guides/production/

We should have a different build for prod.

Also, instead of uglify, maybe think also to use https://github.com/webpack-contrib/babel-minify-webpack-plugin instead of uglify (Default)

PicnicTable - Add a multilingual module

Because we're after 2000 ;).

For real, a front-end only in one language is quite rare today. Maybe this should be a template decision more than enforced.

I will be using a lazy json file which is loaded at runtime. This mean we could change the implementation to either use a service call or directly a "hard-coded" file.

Vue-i18n is quite a good plugin.

I did it in the past and my final implementation looked a bit like https://kuanhsuh.github.io/2017/09/16/How-to-implement-multi-language-with-Vue-i18n/

So... I should look at the complete article or my previous code and see which one I prefer.

Remove dead code

I need some old bootstrap 4 vestiges ;)

Change the startup to be more pluggable

This is not really an issue, it's more a look and feel of the startup.

Now it looks quite messy. I usually use extension methods. It hides a bit the complexity, however it gives a lot of readability which is not a bad thing in this situation.

Create an article (french/english) about the template usage

Create on https://blog.honosoft.com an article about the template. ;) why not. (French and/or English)

add eslint

In order to have some format that make sense (; or none, etc.)