v1.0.0 Improved support for images and fonts | Added automatic reading of app.js or app.ts entry files | Updated readme

Author: danijelh

README.md

@@ -2,6 +2,10 @@
 
 The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma, SASS and Jest. It integrates Vue into AspNetCore MVC and showcases how to use Vue with it's entire ecosystem in .NET as a multipage (multiple mini SPA's) application. The template can also be used as a complete single page application but you should consider using [Vue cli](https://cli.vuejs.org/) for this as it is a more flexible and advanced solution.
 
+> **No TypeScript**: Template completely supports usage without TypeScript. You can use plain js if you don't have the need for or don't want to use TypeScript.
+
+**Medium:** [Multi-page .NET Core with Vue.js, TypeScript, Vuex, Vue router, Bulma, Sass, Jest and Webpack 4](https://medium.com/@danijelhdev/multi-page-net-core-with-vue-js-typescript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4)
+
 ---
 
 <p style="text-align:center">

aspnetcore-vue-typescript-template.nuspec

@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">
   <metadata>
     <id>AspNetCore.Vue.TypeScript.Template</id>
-    <version>0.3.1</version>
+    <version>1.0.0</version>
     <description>
       Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, TypeScript, Bulma, Sass, Jest and Webpack 4.
     </description>
@@ -14,7 +14,7 @@
       <packageType name="Template" />
     </packageTypes>
     <requireLicenseAcceptance>false</requireLicenseAcceptance>
-    <releaseNotes>0.3.1 release.</releaseNotes>
+    <releaseNotes>1.0.0 release.</releaseNotes>
   </metadata>
   <files>
     <file

content/AspNetCore.VueJs/VueApp/idontneedtypescript/views/ModuleInfo.vue

@@ -24,9 +24,6 @@
                 <li>
                     Rename all <strong>.ts</strong> files to <strong>.js</strong> and remove types from code.
                 </li>
-                <li>
-                    In <strong>webpack.config.js</strong> import <strong>.js</strong> entry files
-                </li>
                 <li>
                     In <strong>webpack.config.js</strong> remove <strong>ts-loader</strong> and remove <strong>".ts"</strong> extension
                 </li>

content/AspNetCore.VueJs/package.json

@@ -49,6 +49,7 @@
     "jest": "23.6.0",
     "jest-serializer-vue": "2.0.2",
     "node-sass": "4.11.0",
+    "url-loader":"1.1.2",
     "resolve-url-loader": "3.0.0",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",

content/AspNetCore.VueJs/webpack.config.js

@@ -1,5 +1,6 @@
 "use strict";
 
+const fs = require('fs')
 const path = require("path");
 const webpack = require("webpack");
 const { VueLoaderPlugin } = require("vue-loader");
@@ -11,31 +12,44 @@ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 // Custom variables
 let isProduction = false;
-const applicationBasePath = "VueApp";
+const applicationBasePath = "./VueApp/";
 
 // Plugins
 const extractSassPlugin = new ExtractTextPlugin({
     filename: "css/[name]/main.css",
     allChunks: true
 });
 
+// We search for app.js or app.ts files inside VueApp/{miniSpaName} folder and make those as entries. Convention over configuration
+var appEntryFiles = {}
+fs.readdirSync(applicationBasePath).forEach(function (name) {
+
+    let spaEntryPoint = applicationBasePath + name + '/app.ts'
+
+    if (fs.existsSync(spaEntryPoint)) {
+      appEntryFiles[name] = spaEntryPoint
+    }
+
+    spaEntryPoint = applicationBasePath + name + '/app.js'
+    if (fs.existsSync(spaEntryPoint)) {
+      appEntryFiles[name] = spaEntryPoint
+    }
+
+})
+
+// Add main site.scss file with Bulma(or any other source by choice)
+appEntryFiles["vendor"] = [
+  path.resolve(__dirname, "VueApp/common/design/site.scss"),
+]
+
 module.exports = function (env, argv) {
 
     if (argv.mode === "production") {
         isProduction = true;
     }
 
     return {
-        entry: {
-            template: path.resolve(__dirname, applicationBasePath + "/template/app.ts"),
-            iceandfire: path.resolve(__dirname, applicationBasePath + "/iceandfire/app.ts"),
-            idontneedtypescript: path.resolve(__dirname, applicationBasePath + "/idontneedtypescript/app.js"),
-            vendor: [
-
-                path.resolve(__dirname, "VueApp/common/design/site.scss"),
-
-            ]
-        },
+        entry: appEntryFiles,
         output: {
             path: path.resolve(__dirname, "wwwroot/dist"),
             filename: "js/[name]/bundle.js",
@@ -46,7 +60,7 @@ module.exports = function (env, argv) {
             extensions: [".ts", ".js", ".vue", ".json", "scss", "css"],
             alias: {
                 vue$: "vue/dist/vue.esm.js",
-                "@": path.join(__dirname, "./" + applicationBasePath + "/")
+                "@": path.join(__dirname, applicationBasePath)
             }
         },
         devtool: "source-map",
@@ -57,6 +71,7 @@ module.exports = function (env, argv) {
         },
         module: {
             rules: [
+                /* config.module.rule('vue') */
                 {
                     test: /\.vue$/,
                     loader: "vue-loader",
@@ -68,12 +83,14 @@ module.exports = function (env, argv) {
                         }
                     }
                 },
+                /* config.module.rule('js') */
                 {
                     test: /\.js$/,
                     exclude: /(node_modules|bower_components)/,
                     loader: "babel-loader",
                     exclude: /node_modules/,
                 },
+                /* config.module.rule('ts') */
                 {
                     test: /\.ts$/,
                     loader: "ts-loader",
@@ -82,6 +99,7 @@ module.exports = function (env, argv) {
                         transpileOnly: true
                     }
                 },
+                /* config.module.rule('sass') */
                 {
                     test: /\.scss$/,
                     use: extractSassPlugin.extract({
@@ -103,22 +121,76 @@ module.exports = function (env, argv) {
                         fallback: "style-loader"
                     })
                 },
+                /* config.module.rule('css') */
                 {
                     test: /\.css$/,
                     loader: "css-loader"
                 },
+                /* config.module.rule('images') */
                 {
-                    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-                    use: [
-                        {
-                            loader: "file-loader",
-                            options: {
-                                name: "[name].[ext]",
-                                outputPath: "css/",
-                                publicPath: "/dist/"
-                            }
+                  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
+                  use: [
+                    {
+                      loader: 'url-loader',
+                      options: {
+                        limit: 4096,
+                        fallback: {
+                          loader: 'file-loader',
+                          options: {
+                            name: 'img/[name].[hash:8].[ext]'
+                          }
                         }
-                    ]
+                      }
+                    }
+                  ]
+                },
+                /* config.module.rule('svg') */
+                {
+                  test: /\.(svg)(\?.*)?$/,
+                  use: [
+                    {
+                      loader: 'file-loader',
+                      options: {
+                        name: 'img/[name].[hash:8].[ext]'
+                      }
+                    }
+                  ]
+                },
+                /* config.module.rule('media') */
+                {
+                  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                  use: [
+                    {
+                      loader: 'url-loader',
+                      options: {
+                        limit: 4096,
+                        fallback: {
+                          loader: 'file-loader',
+                          options: {
+                            name: 'media/[name].[hash:8].[ext]'
+                          }
+                        }
+                      }
+                    }
+                  ]
+                },
+                /* config.module.rule('fonts') */
+                {
+                  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+                  use: [
+                    {
+                      loader: 'url-loader',
+                      options: {
+                        limit: 4096,
+                        fallback: {
+                          loader: 'file-loader',
+                          options: {
+                            name: 'fonts/[name].[hash:8].[ext]'
+                          }
+                        }
+                      }
+                    }
+                  ]
                 }
             ]
         },