├── .gitignore
├── ClientApp
    ├── boot.ts
    ├── components
    │   ├── app
    │   │   ├── app.ts
    │   │   └── app.vue
    │   ├── apps
    │   │   ├── app2.vue
    │   │   ├── app3.ts
    │   │   ├── app3.vue
    │   │   ├── app4.ts
    │   │   ├── app4.vue
    │   │   ├── example5.vue
    │   │   ├── login.vue
    │   │   ├── loginrequest.ts
    │   │   ├── pageauth.vue
    │   │   ├── protected.vue
    │   │   ├── slot-comp.vue
    │   │   ├── slot-main.vue
    │   │   ├── todo-editor.vue
    │   │   ├── todo-item.ts
    │   │   ├── todo-item.vue
    │   │   └── vuex.vue
    │   ├── counter
    │   │   ├── counter.ts
    │   │   └── counter.vue
    │   ├── fetchdata
    │   │   ├── fetchdata.ts
    │   │   └── fetchdata.vue
    │   ├── home
    │   │   └── home.vue
    │   └── navmenu
    │   │   ├── navmenu.css
    │   │   └── navmenu.vue
    ├── css
    │   └── site.css
    └── store
    │   ├── index.ts
    │   └── mutation-types.ts
├── Controllers
    ├── HomeController.cs
    └── SampleDataController.cs
├── Program.cs
├── README.adoc
├── Startup.cs
├── Views
    ├── Home
    │   └── Index.cshtml
    ├── Shared
    │   ├── Error.cshtml
    │   └── _Layout.cshtml
    ├── _ViewImports.cshtml
    └── _ViewStart.cshtml
├── appsettings.Development.json
├── appsettings.json
├── karma.conf.js
├── netcore.csproj
├── package.json
├── test
    ├── index.js
    └── unit
    │   ├── TestApp3.spec.ts
    │   └── TestMe.spec.ts
├── tsconfig.json
├── vue-shims.d.ts
├── webpack.config.js
├── webpack.config.vendor.js
├── wwwroot
    └── favicon.ico
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
  1 | /Properties/launchSettings.json
  2 | 
  3 | ## Ignore Visual Studio temporary files, build results, and
  4 | ## files generated by popular Visual Studio add-ons.
  5 | 
  6 | # User-specific files
  7 | *.suo
  8 | *.user
  9 | *.userosscache
 10 | *.sln.docstates
 11 | 
 12 | coverage/
 13 | .vscode
 14 | # User-specific files (MonoDevelop/Xamarin Studio)
 15 | *.userprefs
 16 | 
 17 | # Build results
 18 | [Dd]ebug/
 19 | [Dd]ebugPublic/
 20 | [Rr]elease/
 21 | [Rr]eleases/
 22 | x64/
 23 | x86/
 24 | build/
 25 | bld/
 26 | bin/
 27 | Bin/
 28 | obj/
 29 | Obj/
 30 | 
 31 | # Visual Studio 2015 cache/options directory
 32 | .vs/
 33 | /wwwroot/dist/
 34 | 
 35 | 
 36 | # MSTest test Results
 37 | [Tt]est[Rr]esult*/
 38 | [Bb]uild[Ll]og.*
 39 | 
 40 | # NUNIT
 41 | *.VisualState.xml
 42 | TestResult.xml
 43 | 
 44 | # Build Results of an ATL Project
 45 | [Dd]ebugPS/
 46 | [Rr]eleasePS/
 47 | dlldata.c
 48 | 
 49 | # DNX
 50 | artifacts/
 51 | 
 52 | *_i.c
 53 | *_p.c
 54 | *_i.h
 55 | *.ilk
 56 | *.meta
 57 | *.obj
 58 | *.pch
 59 | *.pdb
 60 | *.pgc
 61 | *.pgd
 62 | *.rsp
 63 | *.sbr
 64 | *.tlb
 65 | *.tli
 66 | *.tlh
 67 | *.tmp
 68 | *.tmp_proj
 69 | *.log
 70 | *.vspscc
 71 | *.vssscc
 72 | .builds
 73 | *.pidb
 74 | *.svclog
 75 | *.scc
 76 | 
 77 | # Chutzpah Test files
 78 | _Chutzpah*
 79 | 
 80 | # Visual C++ cache files
 81 | ipch/
 82 | *.aps
 83 | *.ncb
 84 | *.opendb
 85 | *.opensdf
 86 | *.sdf
 87 | *.cachefile
 88 | 
 89 | # Visual Studio profiler
 90 | *.psess
 91 | *.vsp
 92 | *.vspx
 93 | *.sap
 94 | 
 95 | # TFS 2012 Local Workspace
 96 | $tf/
 97 | 
 98 | # Guidance Automation Toolkit
 99 | *.gpState
100 | 
101 | # ReSharper is a .NET coding add-in
102 | _ReSharper*/
103 | *.[Rr]e[Ss]harper
104 | *.DotSettings.user
105 | 
106 | # JustCode is a .NET coding add-in
107 | .JustCode
108 | 
109 | # TeamCity is a build add-in
110 | _TeamCity*
111 | 
112 | # DotCover is a Code Coverage Tool
113 | *.dotCover
114 | 
115 | # NCrunch
116 | _NCrunch_*
117 | .*crunch*.local.xml
118 | nCrunchTemp_*
119 | 
120 | # MightyMoose
121 | *.mm.*
122 | AutoTest.Net/
123 | 
124 | # Web workbench (sass)
125 | .sass-cache/
126 | 
127 | # Installshield output folder
128 | [Ee]xpress/
129 | 
130 | # DocProject is a documentation generator add-in
131 | DocProject/buildhelp/
132 | DocProject/Help/*.HxT
133 | DocProject/Help/*.HxC
134 | DocProject/Help/*.hhc
135 | DocProject/Help/*.hhk
136 | DocProject/Help/*.hhp
137 | DocProject/Help/Html2
138 | DocProject/Help/html
139 | 
140 | # Click-Once directory
141 | publish/
142 | 
143 | # Publish Web Output
144 | *.[Pp]ublish.xml
145 | *.azurePubxml
146 | # TODO: Comment the next line if you want to checkin your web deploy settings
147 | # but database connection strings (with potential passwords) will be unencrypted
148 | *.pubxml
149 | *.publishproj
150 | 
151 | # NuGet Packages
152 | *.nupkg
153 | # The packages folder can be ignored because of Package Restore
154 | **/packages/*
155 | # except build/, which is used as an MSBuild target.
156 | !**/packages/build/
157 | # Uncomment if necessary however generally it will be regenerated when needed
158 | #!**/packages/repositories.config
159 | 
160 | # Microsoft Azure Build Output
161 | csx/
162 | *.build.csdef
163 | 
164 | # Microsoft Azure Emulator
165 | ecf/
166 | rcf/
167 | 
168 | # Microsoft Azure ApplicationInsights config file
169 | ApplicationInsights.config
170 | 
171 | # Windows Store app package directory
172 | AppPackages/
173 | BundleArtifacts/
174 | 
175 | # Visual Studio cache files
176 | # files ending in .cache can be ignored
177 | *.[Cc]ache
178 | # but keep track of directories ending in .cache
179 | !*.[Cc]ache/
180 | 
181 | # Others
182 | ClientBin/
183 | ~$*
184 | *~
185 | *.dbmdl
186 | *.dbproj.schemaview
187 | *.pfx
188 | *.publishsettings
189 | orleans.codegen.cs
190 | 
191 | /node_modules
192 | 
193 | # RIA/Silverlight projects
194 | Generated_Code/
195 | 
196 | # Backup & report files from converting an old project file
197 | # to a newer Visual Studio version. Backup files are not needed,
198 | # because we have git ;-)
199 | _UpgradeReport_Files/
200 | Backup*/
201 | UpgradeLog*.XML
202 | UpgradeLog*.htm
203 | 
204 | # SQL Server files
205 | *.mdf
206 | *.ldf
207 | 
208 | # Business Intelligence projects
209 | *.rdl.data
210 | *.bim.layout
211 | *.bim_*.settings
212 | 
213 | # Microsoft Fakes
214 | FakesAssemblies/
215 | 
216 | # GhostDoc plugin setting file
217 | *.GhostDoc.xml
218 | 
219 | # Node.js Tools for Visual Studio
220 | .ntvs_analysis.dat
221 | 
222 | # Visual Studio 6 build log
223 | *.plg
224 | 
225 | # Visual Studio 6 workspace options file
226 | *.opt
227 | 
228 | # Visual Studio LightSwitch build output
229 | **/*.HTMLClient/GeneratedArtifacts
230 | **/*.DesktopClient/GeneratedArtifacts
231 | **/*.DesktopClient/ModelManifest.xml
232 | **/*.Server/GeneratedArtifacts
233 | **/*.Server/ModelManifest.xml
234 | _Pvt_Extensions
235 | 
236 | # Paket dependency manager
237 | .paket/paket.exe
238 | 
239 | # FAKE - F# Make
240 | .fake/
241 | 


--------------------------------------------------------------------------------
/ClientApp/boot.ts:
--------------------------------------------------------------------------------
 1 | import './css/site.css';
 2 | import 'bootstrap';
 3 | import Vue from 'vue';
 4 | import VueRouter from 'vue-router';
 5 | import store from './store'
 6 | Vue.use(VueRouter);
 7 | const routes = [
 8 |     { path: '/', component: require('./components/home/home.vue') },
 9 |     { path: '/counter', component: require('./components/counter/counter.vue') },
10 |     { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue') },
11 |     { path: '/app2', component: require('./components/apps/app2.vue') },
12 |     { path: '/app3', component: require('./components/apps/app3.vue'), 
13 |         props: {
14 |             'simple': true,
15 |             'headerText': `this is a trival example of using Vuex for centralized state storage. However, in this case, the state isn't
16 |         shared - so we could have done the same thing with a data function.`
17 |         } },
18 |     { path: '/app4', component: require('./components/apps/app4.vue') },
19 |     { path: '/slots', component: () => import(/* webpackChunkName: "comps" */ './components/apps/slot-main.vue') },
20 |     { path: '/example5', component: () => import(/* webpackChunkName: "comps" */ './components/apps/example5.vue')},
21 |     { path: '/Vuex', component: require("./components/apps/vuex.vue")  },
22 |     { path: "/login", component: require("./components/apps/login.vue")},
23 |     { path: "/pageauth", component: require("./components/apps/pageauth.vue")},
24 |     { path: "/protected", component: require("./components/apps/protected.vue")},
25 |     { path: "/route-meta", component: require("./components/apps/protected.vue"), meta: {requiresAuth: true}}
26 | ];
27 | let router = new VueRouter({ mode: 'history', routes: routes })
28 | new Vue({
29 |     el: '#app-root',
30 |     store: store,
31 |     router: router,
32 |     render: h => h(require('./components/app/app.vue'))
33 | });
34 | 
35 | router.beforeEach((to, from, next) => {
36 |     if (to.matched.some(r => r.meta.requiresAuth)) {
37 |         if (!store.getters.isLoggedIn) {
38 |             next({
39 |                 path: "/login",
40 |                 query: {
41 |                     from: to.fullPath
42 |                 }
43 |             });
44 |         } else {
45 |             next()
46 |         }
47 |     } else {
48 |         next()
49 |     }
50 | });


--------------------------------------------------------------------------------
/ClientApp/components/app/app.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | @Component({
 5 |     components: {
 6 |         MenuComponent: require('../navmenu/navmenu.vue')
 7 |     }
 8 | })
 9 | export default class AppComponent extends Vue {
10 | }
11 | 


--------------------------------------------------------------------------------
/ClientApp/components/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id='app-root' class="container-fluid">
 3 |         <div class="row">
 4 |             <div class="col-sm-3">
 5 |                 <menu-component />
 6 |             </div>
 7 |             <div class="col-sm-9">
 8 |                 <router-view></router-view>
 9 |             </div>
10 |         </div>
11 |     </div>
12 | </template>
13 | 
14 | <script src="./app.ts"></script>
15 | 


--------------------------------------------------------------------------------
/ClientApp/components/apps/app2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <p>this is app2</p>
 4 |         <p v-if="showmsg" v-bind:title="title">{{message}} {{greeting}}</p>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script> 
 9 | import Vue from 'vue';
10 | export default Vue.component('app2', {
11 |     props: ['greeting'],
12 |     data:  () => {
13 |         return {
14 |             showmsg:  true,
15 |             title:  "the title",
16 |             message:  "Hello Vue world! "
17 |         }
18 |     }
19 | });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/ClientApp/components/apps/app3.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | interface todo {
 3 |     text: string,
 4 | }
 5 | export default  Vue.component("app3", {
 6 |     props: ["simple", "headerText"],
 7 |     computed: {
 8 |         todos: function(this: Vue) { return this.$store.getters.todos },
 9 |         hasActive: function(this:Vue) { return this.$store.getters.hasActive}
10 |     },
11 |     methods: {
12 |         setActive(this:Vue, todo:todo) {
13 |             console.log("in edit", todo)
14 |             this.$store.commit('setActive', todo);
15 |         }
16 |     }
17 | 
18 | });


--------------------------------------------------------------------------------
/ClientApp/components/apps/app3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |     <h3 v-if="headerText">Store</h3>
 4 |     <p> 
 5 |         {{ headerText}}
 6 |     </p>
 7 |     <ol>
 8 |         <li v-for="todo in todos">
 9 |             {{todo.text}} <span v-if="!simple"><button @click="setActive(todo)" v-bind:disabled="hasActive">Edit</button></span>
10 |         </li>
11 |     </ol>
12 |     </div>
13 | 
14 | </template>
15 | <script src="./app3.ts"/>


--------------------------------------------------------------------------------
/ClientApp/components/apps/app4.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |     data: () => ({
 4 |         todos: [
 5 |             {
 6 |                 id: 0,
 7 |                 text: "item 4"
 8 |             },
 9 |             {
10 |                 id: 1,
11 |                 text: "item 5"
12 |             },
13 |             {
14 |                 id: 2,
15 |                 text: "item 6"
16 |             }
17 |         ],
18 |         active: null
19 |     }),
20 | 
21 |     components: {
22 |         "todo-item": () => import(/* webpackChunkName: "comps" */ "./todo-item.vue")
23 |     }
24 | }


--------------------------------------------------------------------------------
/ClientApp/components/apps/app4.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |     <div>
 4 |     <h1>Component events</h1>
 5 |     <p> This example is of a parent component which has a list of items that are rendered in a loop with child components.
 6 |         When set active is pressed on the child, it publishes an event which the parent listens to and updates it's active
 7 |         data element. 
 8 |     </p>
 9 |     <p> This example also illustrates loading component on demand from the server - in this case the child component is 
10 |         retrieved from the server on demand when it is rendered and then cached
11 |     </p>
12 |         <ol>
13 |             <todo-item v-for="item in todos" :todo="item" :key="item.id" :active.sync="active"></todo-item>
14 | 
15 |         </ol>
16 |         <pre>{{$data}}</pre>
17 |     </div>
18 | </template>
19 | <script src="./app4.ts" />


--------------------------------------------------------------------------------
/ClientApp/components/apps/example5.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |     <slot-main></slot-main>
 4 |     <slot-comp title="a different title">
 5 |         <app2 slot="content"/>
 6 |         <app4 slot="footer"/>
 7 |     </slot-comp>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | import SlotComp from "./slot-comp.vue"
13 | import App2 from "./app2.vue"
14 | import App4 from "./app4.vue"
15 | import SlotMain from "./slot-main.vue"
16 | export default {
17 |     components: {
18 |         'slot-main': SlotMain,
19 |         'slot-comp': SlotComp,
20 |         'app2': App2,
21 |         'app4': App4
22 |     }
23 | }
24 | </script>


--------------------------------------------------------------------------------
/ClientApp/components/apps/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 | <h4>Login</h4>
 4 | <form v-if="!isLoggedIn">
 5 |     <span style="color:red" v-if="loginerror"> {{loginerror}}</span><br/>
 6 |     <input v-model="username"/><br/>
 7 |     <input v-model="password"/><br/>
 8 |     <button @click.prevent="login" :disabled="!username || hasbeenclicked">Login</button>
 9 | </form>
10 | <div v-if="isLoggedIn">
11 |     <p> logged in as {{ loggedInUser}}</p>
12 |     <button @click="logout" >Logout</button>
13 | </div>
14 | </div>
15 | </template>
16 | 
17 | <script lang="ts">
18 | import Vue from 'vue'
19 | import {Component} from 'vue-property-decorator'
20 | import LoginRequest from './loginrequest'
21 | @Component
22 | export default class Login extends Vue{
23 |     username:string = "";
24 |     password:string = "";
25 |     loginerror:string = ""
26 | 
27 |     // to prevent multiple clicks
28 |     hasbeenclicked = false
29 | 
30 |     login() {
31 |         this.hasbeenclicked = true
32 |         this.loginerror = ""
33 |         console.log("login clicked", this.username, this.password  )
34 |         console.log(this.$route);
35 |         this.$store.dispatch('login', {
36 |             username: this.username,
37 |             password: this.password
38 |         })
39 |         .then(() => this.$router.replace({path: this.$route.query.from || "/"}))
40 |         .catch(reason => {
41 |             this.loginerror = reason
42 |             this.hasbeenclicked = false
43 |         })
44 |     }
45 |     logout() {
46 |         this.$store.dispatch("logout")
47 |         .then(() => {
48 |             console.log(this.$route.fullPath);
49 |             this.$router.replace({
50 |                 path: this.$route.fullPath,
51 |                 query: {
52 |                     t: Math.random().toString()
53 |                 }
54 |             });
55 |         });
56 |     }
57 |     get isLoggedIn () {
58 |         return this.$store.getters.isLoggedIn
59 |     }
60 |     get loggedInUser() {
61 |         return this.$store.getters.loggedInUser
62 |     }
63 | }
64 | 
65 | </script>


--------------------------------------------------------------------------------
/ClientApp/components/apps/loginrequest.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | export default interface LoginRequest {
 3 |     username:string
 4 |     password:string
 5 | }
 6 | 
 7 | var LoginMixin = {
 8 |     created(this:Vue) {
 9 |         console.log("LoginMixin.created() called")
10 |         if (!this.$store.getters.isLoggedIn) {
11 |             this.$router.replace ({path:"/login", query: {"from": this.$route.fullPath}})
12 |         }
13 |    },
14 |    beforeUpdate(this:Vue) {
15 |         console.log("LoginMixin.beforeUpdate() called")
16 |         if (!this.$store.getters.isLoggedIn) {
17 |             this.$router.replace ({path:"/login", query: {"from": this.$route.fullPath}})
18 |         }
19 |    },
20 |    computed : {
21 |        t(this:Vue):string{
22 |            return this.$route.query.t
23 |        }
24 |    }
25 | };
26 | export {LoginMixin};


--------------------------------------------------------------------------------
/ClientApp/components/apps/pageauth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <h3>Route interception with mixins</h3>
 4 |       <p>THis is an example of a page requiring authentication. we can intercept the route and check in the state store
 5 |           if the user is logged in or not. If not, we redirect them to the login page along with the current route.
 6 |           The login page takes care of login and if successful, redirects the user to their desired page.
 7 |       </p>
 8 |       <p>For successful login, type in any username/password</p>
 9 |       <p>For a failed login, use username = "bad"</p>
10 |       <p><span style="font-weight:bold">NOTE: DO not actually use this approach for protecting pages.A much better way is to markup routes 
11 |           with <a href="https://router.vuejs.org/en/advanced/meta.html">meta attribute</a>  like 'RequiresAuth' and then use the route update hooks to 
12 |           check whether the user is authenticated.
13 |           </span>
14 |       </p>
15 |   <router-link :to="{path: '/protected'}">Click this link to navigate to a protected page </router-link>
16 |   </div>
17 | </template>
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/ClientApp/components/apps/protected.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <p>This is the protected page! If you're seeing this, then you logged in successfully</p>
 4 |       <p style="display:none"> // do not remove - exists to force a component update {{ t}}</p>
 5 |   <login/>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import {LoginMixin} from './loginrequest'
11 | import Login from './login.vue'
12 | export default {
13 |   mixins: [LoginMixin],
14 |   components: {
15 |       Login
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/ClientApp/components/apps/slot-comp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>{{ title}}</h1>
 4 |         <div class="content">
 5 |             <slot name="content"></slot>
 6 |         </div>
 7 |         <div class="footer">
 8 |             <slot name="footer"></slot>
 9 |         </div>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |     props: ["title"]
16 | }
17 | </script>
18 | 
19 | <style>
20 |     div.content {background-color:blanchedalmond;}
21 |     div.footer {background-color: burlywood;}
22 |     </style>


--------------------------------------------------------------------------------
/ClientApp/components/apps/slot-main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |     <slot-comp title="A Funky title as string">
 4 |         <app2 slot="content"/>
 5 |         <app3 slot="footer" :simple="true"/>
 6 |     </slot-comp>
 7 | </div>
 8 | </template>
 9 | 
10 | <script>
11 | 
12 | export default  {
13 |     components: {
14 |         'slot-comp': () => import(/* webpackChunkName: "comps" */"./slot-comp.vue")
15 |     }
16 | } 
17 | </script>


--------------------------------------------------------------------------------
/ClientApp/components/apps/todo-editor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <textarea v-model="text"></textarea><br/>
 4 |         <button @click="save">Save</button>
 5 |         <button @click="cancel">Cancel</button>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Vue from 'vue'
11 | import {Component} from 'vue-property-decorator'
12 | import {MUTATIONS} from '../../store'
13 | 
14 | @Component
15 | export default  class TodoEditor extends Vue{
16 |     text:string = this.$store.state.active.text
17 |     
18 |     save(this:TodoEditor) {
19 |         this.$store.commit(MUTATIONS.UPDATETODO, this.text)
20 |     }
21 |     cancel(this:Vue) {
22 |             this.$store.commit(MUTATIONS.SETACTIVE, null)
23 |     }
24 | }
25 | </script>


--------------------------------------------------------------------------------
/ClientApp/components/apps/todo-item.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component, Prop } from 'vue-property-decorator';
 3 | 
 4 | @Component
 5 | export default class TodoItem extends Vue{
 6 |     @Prop()
 7 |     todo:any;
 8 | 
 9 |     @Prop()
10 |     active:any;
11 | 
12 |     setActive(e:any) {
13 |         this.$emit("update:active", this.todo)
14 |     }
15 |     get isActive() {
16 |         return this.active && this.todo.id == this.active.id;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/ClientApp/components/apps/todo-item.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | c<template >
 3 | <li> {{todo.text}}
 4 |         <button v-on:click="setActive" v-if="!isActive">Set Active</button>
 5 |         <span v-else>Selected</span>
 6 |     </li>
 7 | </template>
 8 | <script src="./todo-item.ts" />
 9 | <style scoped>
10 |     li {padding: 5px;}
11 | </style>


--------------------------------------------------------------------------------
/ClientApp/components/apps/vuex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <h3>Vuex example</h3>
 4 |         <p>
 5 |         This is a more complicated example. We manage a list of todos - stored in
 6 |         Vuex. Clicking edit sets the active property which is shared between the editor and the list view. The 
 7 |         list also disables Edit action when something is being edited.
 8 |         The other interesting approach is to edit an active text without it being reactive fully - basically so that
 9 |         user can cancel the edit at any time. This is done by copying the active item text into a local state variable.
10 |         </p>
11 |         <app3 :simple="false" />
12 |         <button @click="newItem" v-if="!hasActive" >Add Item</button>
13 | 
14 |         <todo-editor v-if="hasActive"/>
15 |         
16 |     </div>
17 | 
18 | </template>
19 | 
20 | <script>
21 | import Vue from 'vue'
22 | import app3 from './app3.vue'
23 | import todoEditor from './todo-editor.vue'
24 | import {MUTATIONS} from "../../store"
25 | export default {
26 |     components: {
27 |          todoEditor,
28 |          app3
29 |     },
30 |     computed: {
31 |         hasActive: function(this:Vue) {
32 |             return this.$store.getters.hasActive || this.$store.getters.isAdding
33 |         }
34 |     },
35 |     methods: {
36 |         newItem(this:Vue) {
37 |             this.$store.commit(MUTATIONS.ADDTODO)
38 |         }
39 |     }
40 | }
41 | 
42 | </script>


--------------------------------------------------------------------------------
/ClientApp/components/counter/counter.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | @Component
 5 | export default class CounterComponent extends Vue {
 6 |     currentcount: number = 0;
 7 | 
 8 |     incrementCounter() {
 9 |         this.currentcount++;
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/ClientApp/components/counter/counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Counter</h1>
 4 | 
 5 |         <p>This is a simple example of a Vue.js component.</p>
 6 | 
 7 |         <p>Current count: <strong>{{ currentcount }}</strong></p>
 8 | 
 9 |         <button @click="incrementCounter">Increment</button>
10 |     </div>
11 | </template>
12 | 
13 | <script src="./counter.ts"></script>
14 | 


--------------------------------------------------------------------------------
/ClientApp/components/fetchdata/fetchdata.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | interface WeatherForecast {
 5 |     dateFormatted: string;
 6 |     temperatureC: number;
 7 |     temperatureF: number;
 8 |     summary: string;
 9 | }
10 | 
11 | @Component
12 | export default class FetchDataComponent extends Vue {
13 |     forecasts: WeatherForecast[] = [];
14 | 
15 |     mounted() {
16 |         fetch('api/SampleData/WeatherForecasts')
17 |             .then(response => response.json() as Promise<WeatherForecast[]>)
18 |             .then(data => {
19 |                 this.forecasts = data;
20 |             });
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/ClientApp/components/fetchdata/fetchdata.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Weather forecast</h1>
 4 | 
 5 |         <p>This component demonstrates fetching data from the server.</p>
 6 | 
 7 |         <table v-if="forecasts.length" class="table">
 8 |             <thead>
 9 |                 <tr>
10 |                     <th>Date</th>
11 |                     <th>Temp. (C)</th>
12 |                     <th>Temp. (F)</th>
13 |                     <th>Summary</th>
14 |                 </tr>
15 |             </thead>
16 |             <tbody>
17 |                 <tr v-for="item in forecasts">
18 |                     <td>{{ item.dateFormatted }}</td>
19 |                     <td>{{ item.temperatureC }}</td>
20 |                     <td>{{ item.temperatureF }}</td>
21 |                     <td>{{ item.summary }}</td>
22 |                 </tr>
23 |             </tbody>
24 |         </table>
25 | 
26 |         <p v-else><em>Loading...</em></p>
27 |     </div>
28 | </template>
29 | 
30 | <script src="./fetchdata.ts"></script>
31 | 


--------------------------------------------------------------------------------
/ClientApp/components/home/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Hello, world!</h1>
 4 |         <p>Welcome to your new single-page application, built with:</p>
 5 |         <ul>
 6 |             <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
 7 |             <li><a href="https://vuejs.org/">Vue.js</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
 8 |             <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
 9 |             <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
10 |         </ul>
11 |         <p>To help you get started, we've also set up:</p>
12 |         <ul>
13 |             <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
14 |             <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
15 |             <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Vue app will be rebuilt and a new instance injected is into the page.</li>
16 |             <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
17 |         </ul>
18 |     </div>
19 | </template>


--------------------------------------------------------------------------------
/ClientApp/components/navmenu/navmenu.css:
--------------------------------------------------------------------------------
 1 | .main-nav li .glyphicon {
 2 |     margin-right: 10px;
 3 | }
 4 | 
 5 | /* Highlighting rules for nav menu items */
 6 | .main-nav li a.router-link-active,
 7 | .main-nav li a.router-link-active:hover,
 8 | .main-nav li a.router-link-active:focus {
 9 |     background-color: #4189C7;
10 |     color: white;
11 | }
12 | 
13 | /* Keep the nav menu independent of scrolling and on top of other items */
14 | .main-nav {
15 |     position: fixed;
16 |     top: 0;
17 |     left: 0;
18 |     right: 0;
19 |     z-index: 1;
20 | }
21 | 
22 | @media (min-width: 768px) {
23 |     /* On small screens, convert the nav menu to a vertical sidebar */
24 |     .main-nav {
25 |         height: 100%;
26 |         width: calc(25% - 20px);
27 |     }
28 |     .main-nav .navbar {
29 |         border-radius: 0px;
30 |         border-width: 0px;
31 |         height: 100%;
32 |     }
33 |     .main-nav .navbar-header {
34 |         float: none;
35 |     }
36 |     .main-nav .navbar-collapse {
37 |         border-top: 1px solid #444;
38 |         padding: 0px;
39 |     }
40 |     .main-nav .navbar ul {
41 |         float: none;
42 |     }
43 |     .main-nav .navbar li {
44 |         float: none;
45 |         font-size: 15px;
46 |         margin: 6px;
47 |     }
48 |     .main-nav .navbar li a {
49 |         padding: 10px 16px;
50 |         border-radius: 4px;
51 |     }
52 |     .main-nav .navbar a {
53 |         /* If a menu item's text is too long, truncate it */
54 |         width: 100%;
55 |         white-space: nowrap;
56 |         overflow: hidden;
57 |         text-overflow: ellipsis;
58 |     }
59 | }
60 | 


--------------------------------------------------------------------------------
/ClientApp/components/navmenu/navmenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="main-nav">
 3 |         <div class="navbar navbar-inverse">
 4 |             <div class="navbar-header">
 5 |                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 6 |                     <span class="sr-only">Toggle navigation</span>
 7 |                     <span class="icon-bar"></span>
 8 |                     <span class="icon-bar"></span>
 9 |                     <span class="icon-bar"></span>
10 |                 </button>
11 |                 <a class="navbar-brand" href="/">netcore</a>
12 |             </div>
13 |             <div class="clearfix"></div>
14 |             <div class="navbar-collapse collapse">
15 |                 <ul class="nav navbar-nav">
16 |                     <li>
17 |                         <router-link to="/" :exact="true">
18 |                             <span class="glyphicon glyphicon-home"></span> Home
19 |                         </router-link>
20 |                     </li>
21 |                     <li>
22 |                         <router-link to="/counter">
23 |                             <span class="glyphicon glyphicon-education"></span> Counter
24 |                         </router-link>
25 |                     </li>
26 |                     <li>
27 |                         <router-link to="/fetchdata">
28 |                             <span class="glyphicon glyphicon-th-list"></span> Fetch data
29 |                         </router-link>
30 |                     </li>
31 |                     <li>
32 |                         <router-link to="/app2">
33 |                             <span class="glyphicon glyphicon-th-list"></span> app2
34 |                         </router-link>
35 |                     </li>
36 |                     <li>
37 |                         <router-link to="/app3">
38 |                             <span class="glyphicon glyphicon-th-list"></span> app3
39 |                         </router-link>
40 |                     </li>
41 |                     <li>
42 |                         <router-link to="/app4">
43 |                             <span class="glyphicon glyphicon-th-list"></span> app4
44 |                         </router-link>
45 |                     </li>
46 |                     <li>
47 |                         <router-link to="/slots">
48 |                             <span class="glyphicon glyphicon-th-list"></span>Slots
49 |                         </router-link>
50 |                     </li>
51 |                     <li>
52 |                         <router-link to="/example5">
53 |                             <span class="glyphicon glyphicon-th-list"></span>Example 5
54 |                         </router-link>
55 |                     </li>
56 |                     <li>
57 |                         <router-link to="/Vuex">
58 |                             <span class="glyphicon glyphicon-th-list"></span>Vuex Example 
59 |                         </router-link>
60 |                     </li>
61 |                     <li>
62 |                         <router-link to="/pageauth">
63 |                             <span class="glyphicon glyphicon-th-list"></span>Login Mixin
64 |                         </router-link>
65 |                     </li>
66 |                     <li>
67 |                         <router-link to="/route-meta">
68 |                             <span class="glyphicon glyphicon-th-list"></span>Route meta field
69 |                         </router-link>
70 |                     </li>
71 |                 </ul>
72 |             </div>
73 |         </div>
74 |     </div>
75 | </template>
76 | 
77 | <style src="./navmenu.css" />
78 | 


--------------------------------------------------------------------------------
/ClientApp/css/site.css:
--------------------------------------------------------------------------------
1 | @media (max-width: 767px) {
2 |     /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
3 |     body {
4 |         padding-top: 50px;
5 |     }
6 | }


--------------------------------------------------------------------------------
/ClientApp/store/index.ts:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | import Vue from 'vue';
 3 | import  * as MUTATIONS from './mutation-types'
 4 | import LoginRequest from '../components/apps/loginrequest'
 5 | 
 6 | interface todo {
 7 |     text:string
 8 | }
 9 | Vue.use(Vuex);
10 | export {MUTATIONS}
11 | export default new Vuex.Store({
12 |     state: {
13 |         todos: [
14 |             {text: "item 1"},
15 |             {text: "item 2"},
16 |             {text: "item 3"}
17 |         ],
18 |         active: <todo|null> null,
19 |         isAdding: false,
20 |         loggedinUser: ""
21 | 
22 |     },
23 | 
24 |     getters: {
25 |         todos: state => state.todos,
26 |         hasActive: state => state.active!=null,
27 |         isAdding: state => state.isAdding,
28 |         isLoggedIn: state => state.loggedinUser != "",
29 |         loggedInUser: state => state.loggedinUser
30 |     },
31 |     mutations: {
32 |         [MUTATIONS.SETACTIVE](state, todo) {
33 |             state.active =  todo
34 |             state.isAdding = false
35 |         },
36 |         [MUTATIONS.UPDATETODO](state, text) {
37 |             if (!state.isAdding) {
38 |                 state.active!.text = text
39 |                 state.active = null;
40 |             } else {
41 |                 state.todos = state.todos.concat({text: text})
42 |                 state.active = null;
43 |                 state.isAdding = false;
44 |             }
45 |         },
46 |         [MUTATIONS.ADDTODO](state, text) {
47 |             state.active = {text: "Enter your text"}
48 |             state.isAdding = true;
49 |         },
50 |         login(state, user) {
51 |             state.loggedinUser = user
52 |         },
53 |         logout(state) {
54 |             state.loggedinUser = ""
55 |         }
56 |     },
57 |     actions: {
58 |         login(context, payload:LoginRequest) {
59 |             return new Promise((resolve, reject) => {
60 |                 console.log(payload)
61 |                 setTimeout(function() {
62 |                     if (payload.username != "bad") {
63 |                         resolve()
64 |                         context.commit("login", payload.username);
65 |                     } else {
66 |                         reject("bad credentials - can't login")
67 |                     }
68 |                }, 1000);
69 |             });
70 |         },
71 |         logout(context) {
72 |             context.commit("logout")
73 |         }
74 |     }
75 | })


--------------------------------------------------------------------------------
/ClientApp/store/mutation-types.ts:
--------------------------------------------------------------------------------
1 | 
2 | export const SETACTIVE:string = "setActive"
3 | export const UPDATETODO: string = "updateTodo";
4 | export const ADDTODO: string = "addTodo";


--------------------------------------------------------------------------------
/Controllers/HomeController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Diagnostics;
 4 | using System.Linq;
 5 | using System.Threading.Tasks;
 6 | using Microsoft.AspNetCore.Mvc;
 7 | 
 8 | namespace netcore.Controllers
 9 | {
10 |     public class HomeController : Controller
11 |     {
12 |         public IActionResult Index()
13 |         {
14 |             return View();
15 |         }
16 | 
17 |         public IActionResult Error()
18 |         {
19 |             ViewData["RequestId"] = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
20 |             return View();
21 |         }
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/Controllers/SampleDataController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | using Microsoft.AspNetCore.Mvc;
 6 | 
 7 | namespace netcore.Controllers
 8 | {
 9 |     [Route("api/[controller]")]
10 |     public class SampleDataController : Controller
11 |     {
12 |         private static string[] Summaries = new[]
13 |         {
14 |             "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
15 |         };
16 | 
17 |         [HttpGet("[action]")]
18 |         public IEnumerable<WeatherForecast> WeatherForecasts()
19 |         {
20 |             var rng = new Random();
21 |             return Enumerable.Range(1, 5).Select(index => new WeatherForecast
22 |             {
23 |                 DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
24 |                 TemperatureC = rng.Next(-20, 55),
25 |                 Summary = Summaries[rng.Next(Summaries.Length)]
26 |             });
27 |         }
28 | 
29 |         public class WeatherForecast
30 |         {
31 |             public string DateFormatted { get; set; }
32 |             public int TemperatureC { get; set; }
33 |             public string Summary { get; set; }
34 | 
35 |             public int TemperatureF
36 |             {
37 |                 get
38 |                 {
39 |                     return 32 + (int)(TemperatureC / 0.5556);
40 |                 }
41 |             }
42 |         }
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/Program.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.IO;
 4 | using System.Linq;
 5 | using System.Threading.Tasks;
 6 | using Microsoft.AspNetCore;
 7 | using Microsoft.AspNetCore.Hosting;
 8 | using Microsoft.Extensions.Configuration;
 9 | using Microsoft.Extensions.Logging;
10 | 
11 | namespace netcore
12 | {
13 |     public class Program
14 |     {
15 |         public static void Main(string[] args)
16 |         {
17 |             BuildWebHost(args).Run();
18 |         }
19 | 
20 |         public static IWebHost BuildWebHost(string[] args) =>
21 |             WebHost.CreateDefaultBuilder(args)
22 |                 .UseStartup<Startup>()
23 |                 .Build();
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/README.adoc:
--------------------------------------------------------------------------------
  1 | # VueJS starter
  2 | 
  3 | ## Base
  4 | 
  5 | so the base for this project is the ASP.NET Core vue SPA template that ships
  6 | with 2.0 of ASP.NET core.
  7 | 
  8 | ## Why
  9 | 
 10 | Basically digging around and tweaking things, found a bunch of things that
 11 | could be improved in general. Should help future me when I want to build an
 12 | actual web UI. A few of the things 
 13 | 
 14 | . Upgraded to latest Vue(2.3.2 -> 2.4.2) and Typescript (2.3 -> 2.4)
 15 | . Got rid of `awesome-typescript-loader` and got back `ts-loader` which *lets
 16 | you import .vue components* easily.
 17 | . Added examples of simple components,
 18 | https://vuejs.org/v2/guide/components.html#Named-Slots[slots] and
 19 | https://vuex.vuejs.org/en/intro.html[vuex].
 20 | . Added example of *unit testing components* with `avoriaz` and plain vue with 
 21 | karma, mocha, chai & sinon. 
 22 | . Unit test runs report *code coverage* tracked back to original Typescript source.
 23 | . Updated webpack config to handle debugging tests with source map support - meaning
 24 | you can *place breakpoints directly in Typescript code when debugging in Chrome*.
 25 | . Added examples of *bundling components into chunks* -
 26 | https://vuejs.org/v2/guide/components.html#Async-Components[Vue Async
 27 | Component] + https://webpack.js.org/guides/code-splitting/[webpack's code
 28 | splitting] feature.
 29 | . Hooked in babel-loader in webpack - so ts transpilation path is 
 30 | `TS ---ts-loader---> ES2015 ----babel-loader--> ES5`. This lets us use the *dynamic 
 31 | import statement* in TS 2.4 for defining async components.
 32 | . Removed .vue.html extension and named back to .vue - works better with the
 33 | https://marketplace.visualstudio.com/items?itemName=octref.vetur[vetur] plugin
 34 | under VS Code.
 35 | 
 36 | 
 37 | ## Getting started
 38 | 
 39 | . Clone this repo
 40 | . Run `yarn install`. # Read <<Why Yarn (aka Why not NPM),Why Yarn>> below
 41 | . `set ASPNETCORE_ENVIRONMENT=Development`
 42 | . Run it with `dotnet run`
 43 | . Visit `localhost:5000/`
 44 | 
 45 | ### To run client side tests
 46 | 
 47 | After you have done `yarn install` run `yarn run test`
 48 | 
 49 | ## Notes - Unit testing and code coverage.
 50 | 
 51 | Getting Karma, webpack and code coverage to play nice with each other took some doing.
 52 | As of this writing (Sep 2017), karma coverage was broken when used with ts transpilation and html report
 53 | generation fails with error. 
 54 | 
 55 | . For getting code coverage across all your code, you need to create an index.js which pulls in
 56 | all your tests and all your sources.
 57 | . In karma.conf.js, we set `env={test:1}` and then require our webpack conf. Within webpack config,
 58 | we instrument sources with `istanbul-instrumenter-loader` based on test being true.
 59 | . In a test build, we also add a rule for building ts files under `test` without the instrumenter.
 60 | . In karma config, we replace `karma-coverage` with
 61 | https://github.com/mattlewis92/karma-coverage-istanbul-reporter[`karma-coverage-istanbul-reporter`]
 62 | 
 63 | ## Notes - Debugging unit tests with Karma & sourcemaps
 64 | 
 65 | A good dev experience is critical - so being able to debug unit tests in browser is important. Since
 66 | the source gets transpiled before it reaches the browser, having source map support is super critical.
 67 | Getting this to work again was jumping through hoops - karma and webpack handovers aren't exactly well
 68 | documented. In the end, I could get it to work only with the following:
 69 | 
 70 | . Don't include code coverage instrumentation while debugging - pretty self evident.
 71 | . Include inline source maps in test/dev builds
 72 | +
 73 | [source, javascript]
 74 | -------------
 75 |         .concat(isDevBuild || isTestBuild ? [
 76 |             // this is required for source map debugging 
 77 |             new webpack.SourceMapDevToolPlugin({
 78 |                 filename: null, // only inline source maps seem to work when debugging with chrome
 79 |                 moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]'), // Point sourcemap entries to the original file locations on disk
 80 |                 test: /\.(ts|js|vue)$/
 81 |             }),
 82 |         ] : [
 83 |         // prod config
 84 |         ]
 85 | -------------
 86 | . Use `karma-sourcemap-loader` in karma conf
 87 | 
 88 | ## Why Yarn (aka Why not NPM)
 89 | 
 90 | So when I started this repo, I did not know any better and used npm. And then there were problems!
 91 | 
 92 | ### Background
 93 | `Package.json` only specifies a semver range and w ith packages being updated
 94 | all the time and front end projects seemingly depending on 10s of packages and
 95 | then those depending on further packages, it's a miracle that anything actually
 96 | works. To get around this and have reproducible builds, NPM generates
 97 | `npm-shrinkwrap.json` which you're supposed to commit into version control.
 98 | Good - that's what I did but it turns out that it didn't do what it said on the tin.
 99 | 
100 | After a few months when I cloned this repo, I started getting weird errors that
101 | I did not remember seeing earlier. Ditto for the folks who cloned this repo. 
102 | 
103 | Bottomline - `npm-shrinkwrap.json` is supposed to give you reproducible set of
104 | packages in `node_modules` only that it doesn't. Apparently, this is in part
105 | due to NPM's use of non-deterministic resolution algorithm. Should you want to
106 | read more, here's a couple of links - https://stackoverflow.com/a/40057535[SO:
107 | What is the difference between yarn.lock and npm's shrinkwrap?] and
108 | https://yarnpkg.com/en/docs/yarn-lock[Yarn.lock]
109 | 


--------------------------------------------------------------------------------
/Startup.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | using Microsoft.AspNetCore.Builder;
 6 | using Microsoft.AspNetCore.Hosting;
 7 | using Microsoft.AspNetCore.SpaServices.Webpack;
 8 | using Microsoft.Extensions.Configuration;
 9 | using Microsoft.Extensions.DependencyInjection;
10 | 
11 | namespace netcore
12 | {
13 |     public class Startup
14 |     {
15 |         public Startup(IConfiguration configuration)
16 |         {
17 |             Configuration = configuration;
18 |         }
19 | 
20 |         public IConfiguration Configuration { get; }
21 | 
22 |         // This method gets called by the runtime. Use this method to add services to the container.
23 |         public void ConfigureServices(IServiceCollection services)
24 |         {
25 |             services.AddMvc();
26 |         }
27 | 
28 |         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
29 |         public void Configure(IApplicationBuilder app, IHostingEnvironment env)
30 |         {
31 |             if (env.IsDevelopment())
32 |             {
33 |                 app.UseDeveloperExceptionPage();
34 |                 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
35 |                 {
36 |                     HotModuleReplacement = true
37 |                 });
38 |             }
39 |             else
40 |             {
41 |                 app.UseExceptionHandler("/Home/Error");
42 |             }
43 | 
44 |             app.UseStaticFiles();
45 | 
46 |             app.UseMvc(routes =>
47 |             {
48 |                 routes.MapRoute(
49 |                     name: "default",
50 |                     template: "{controller=Home}/{action=Index}/{id?}");
51 | 
52 |                 routes.MapSpaFallbackRoute(
53 |                     name: "spa-fallback",
54 |                     defaults: new { controller = "Home", action = "Index" });
55 |             });
56 |         }
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/Views/Home/Index.cshtml:
--------------------------------------------------------------------------------
 1 | @{
 2 |     ViewData["Title"] = "Home Page";
 3 | }
 4 | 
 5 | <div id='app-root'>Loading...</div>
 6 | 
 7 | @section scripts {
 8 |     <script src="~/dist/main.js" asp-append-version="true"></script>
 9 | }
10 | 


--------------------------------------------------------------------------------
/Views/Shared/Error.cshtml:
--------------------------------------------------------------------------------
 1 | @{
 2 |     ViewData["Title"] = "Error";
 3 | }
 4 | 
 5 | <h1 class="text-danger">Error.</h1>
 6 | <h2 class="text-danger">An error occurred while processing your request.</h2>
 7 | 
 8 | @if (!string.IsNullOrEmpty((string)ViewData["RequestId"]))
 9 | {
10 |     <p>
11 |         <strong>Request ID:</strong> <code>@ViewData["RequestId"]</code>
12 |     </p>
13 | }
14 | 
15 | <h3>Development Mode</h3>
16 | <p>
17 |     Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
18 | </p>
19 | <p>
20 |     <strong>Development environment should not be enabled in deployed applications</strong>, as it can result in sensitive information from exceptions being displayed to end users. For local debugging, development environment can be enabled by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>, and restarting the application.
21 | </p>
22 | 


--------------------------------------------------------------------------------
/Views/Shared/_Layout.cshtml:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>@ViewData["Title"] - netcore</title>
 7 |     <base href="~/" />
 8 | 
 9 |     <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
10 |     <environment exclude="Development">
11 |         <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
12 |     </environment>
13 | </head>
14 | <body>
15 |     @RenderBody()
16 | 
17 |     <script src="~/dist/vendor.js" asp-append-version="true"></script>
18 |     @RenderSection("scripts", required: false)
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Views/_ViewImports.cshtml:
--------------------------------------------------------------------------------
1 | @using netcore
2 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
3 | @addTagHelper *, Microsoft.AspNetCore.SpaServices
4 | 


--------------------------------------------------------------------------------
/Views/_ViewStart.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 |     Layout = "_Layout";
3 | }
4 | 


--------------------------------------------------------------------------------
/appsettings.Development.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Logging": {
 3 |     "IncludeScopes": false,
 4 |     "Debug": {
 5 |       "LogLevel": {
 6 |         "Default": "Debug",
 7 |         "System": "Information",
 8 |         "Microsoft": "Information"
 9 |       }
10 |     },
11 |     "Console": {
12 |       "LogLevel": {
13 |         "Default": "Debug",
14 |         "System": "Information",
15 |         "Microsoft": "Information"
16 |       }
17 |     }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/appsettings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Logging": {
 3 |     "IncludeScopes": false,
 4 |     "Debug": {
 5 |       "LogLevel": {
 6 |         "Default": "Warning"
 7 |       }
 8 |     },
 9 |     "Console": {
10 |       "LogLevel": {
11 |         "Default": "Warning"
12 |       }
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | let env = {test: 1}
 3 | function isDebug(arg) {
 4 |   return arg === '--debug'
 5 | }
 6 | if (process.argv.some(isDebug)) {
 7 |   console.log("Is Debugging", true)
 8 |   env.debugging = 1
 9 | }
10 | var webpackConfig = require('./webpack.config')(env)
11 | 
12 | module.exports = function (config) {
13 |   config.set({
14 |     // To run in additional browsers:
15 |     // 1. install corresponding karma launcher
16 |     //    http://karma-runner.github.io/0.13/config/browsers.html
17 |     // 2. add it to the `browsers` array below.
18 |     browsers: ['jsdom'],
19 |     frameworks: ['mocha', 'sinon-chai'],
20 |     reporters: ['spec', 'coverage-istanbul'],
21 |     files: [
22 |         'wwwroot/dist/vendor.js',
23 |         {pattern: 'wwwroot/dist/*.map', included:false, served:true},
24 |         'node_modules/babel-polyfill/dist/polyfill.js',
25 |         'test/index.js', 
26 |         ],
27 |     preprocessors: {
28 |       'test/index.js': ['webpack', 'sourcemap'],
29 |     },
30 |     plugins: [
31 |         // Launchers
32 |         'karma-phantomjs-launcher',
33 |         'karma-jsdom-launcher',
34 | 
35 |         // Test Libraries
36 |         'karma-mocha',
37 |         'karma-sinon-chai',
38 | 
39 |         // Preprocessors
40 |         'karma-webpack',
41 |         'karma-sourcemap-loader',
42 | 
43 |         // Reporters
44 |         'karma-spec-reporter',
45 |         'karma-coverage-istanbul-reporter'
46 |     ],
47 |     webpack: webpackConfig,
48 |     webpackMiddleware: {
49 |       noInfo: true
50 |     },
51 |     coverageIstanbulReporter: {
52 |         reports: ['html', 'text-summary'],
53 |         dir: path.join(__dirname, 'coverage'),
54 |         fixWebpackSourcePaths: true
55 |     }
56 |   })
57 | }
58 | 


--------------------------------------------------------------------------------
/netcore.csproj:
--------------------------------------------------------------------------------
 1 | <Project Sdk="Microsoft.NET.Sdk.Web">
 2 | 
 3 |   <PropertyGroup>
 4 |     <TargetFramework>netcoreapp2.0</TargetFramework>
 5 |     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
 6 |     <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
 7 |     <IsPackable>false</IsPackable>
 8 |   </PropertyGroup>
 9 | 
10 |   <ItemGroup>
11 |     <Compile Remove="coverage\**" />
12 |     <Content Remove="coverage\**" />
13 |     <EmbeddedResource Remove="coverage\**" />
14 |     <None Remove="coverage\**" />
15 |   </ItemGroup>
16 | 
17 |   <ItemGroup>
18 |     <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
19 |   </ItemGroup>
20 | 
21 |   <ItemGroup>
22 |     <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
23 |   </ItemGroup>
24 | 
25 |   <ItemGroup>
26 |     <Folder Include="wwwroot\dist\" />
27 |   </ItemGroup>
28 | 
29 |   <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
30 |     <!-- Ensure Node.js is installed -->
31 |     <Exec Command="node --version" ContinueOnError="true">
32 |       <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
33 |     </Exec>
34 |     <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
35 | 
36 |     <!-- In development, the dist files won't exist on the first run or when cloning to
37 |          a different machine, so rebuild them if not already present. -->
38 |     <Message Importance="high" Text="Performing first-run Webpack build..." />
39 |     <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
40 |     <Exec Command="node node_modules/webpack/bin/webpack.js" />
41 |   </Target>
42 | 
43 |   <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
44 |     <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
45 |     <Exec Command="npm install" />
46 |     <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
47 |     <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
48 | 
49 |     <!-- Include the newly-built files in the publish output -->
50 |     <ItemGroup>
51 |       <DistFiles Include="wwwroot\dist\**" />
52 |       <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
53 |         <RelativePath>%(DistFiles.Identity)</RelativePath>
54 |         <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
55 |       </ResolvedFileToPublish>
56 |     </ItemGroup>
57 |   </Target>
58 | 
59 | </Project>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "netcore",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "devDependencies": {
 6 |     "@types/chai": "^4.0.4",
 7 |     "@types/mocha": "^2.2.42",
 8 |     "@types/sinon": "^2.3.3",
 9 |     "@types/sinon-chai": "^2.7.29",
10 |     "@types/webpack-env": "^1.13.0",
11 |     "@vue/test-utils": "^1.0.0-beta.12",
12 |     "aspnet-webpack": "^2.0.1",
13 |     "babel-core": "^6.26.0",
14 |     "babel-loader": "^7.1.2",
15 |     "babel-plugin-syntax-dynamic-import": "^6.18.0",
16 |     "babel-polyfill": "^6.26.0",
17 |     "babel-preset-env": "^1.6.0",
18 |     "babel-preset-es2015": "^6.24.1",
19 |     "babel-preset-es2015-mod": "^6.6.0",
20 |     "babel-preset-es3": "^1.0.1",
21 |     "bootstrap": "^3.3.6",
22 |     "chai": "^4.1.2",
23 |     "chalk": "^2.3.2",
24 |     "css-loader": "^0.25.0",
25 |     "event-source-polyfill": "^0.0.7",
26 |     "extract-text-webpack-plugin": "^3.0.2",
27 |     "file-loader": "^0.9.0",
28 |     "fork-ts-checker-webpack-plugin": "^0.2.7",
29 |     "isomorphic-fetch": "^2.2.1",
30 |     "istanbul-instrumenter-loader": "^3.0.0",
31 |     "jquery": "^3.1.1",
32 |     "jsdom": "^11.2.0",
33 |     "karma": "^1.7.1",
34 |     "karma-coverage-istanbul-reporter": "^1.3.0",
35 |     "karma-jsdom-launcher": "^6.1.2",
36 |     "karma-mocha": "^1.3.0",
37 |     "karma-phantomjs-launcher": "^1.0.4",
38 |     "karma-sinon-chai": "^1.3.2",
39 |     "karma-sourcemap-loader": "^0.3.7",
40 |     "karma-spec-reporter": "0.0.31",
41 |     "karma-webpack": "^2.0.4",
42 |     "mocha": "^3.5.0",
43 |     "sinon": "^3.2.1",
44 |     "sinon-chai": "^2.13.0",
45 |     "style-loader": "^0.13.1",
46 |     "ts-loader": "^3.5.0",
47 |     "typescript": "^2.4.0",
48 |     "uglifyjs-webpack-plugin": "^1.2.2",
49 |     "url-loader": "^0.5.7",
50 |     "vue": "^2.5.13",
51 |     "vue-loader": "^11.1.4",
52 |     "vue-property-decorator": "^6.0.0",
53 |     "vue-router": "^3.0.1",
54 |     "vue-template-compiler": "^2.5.13",
55 |     "vuex": "^3.0.1",
56 |     "webpack": "^3.11.0",
57 |     "webpack-hot-middleware": "^2.12.2"
58 |   },
59 |   "scripts": {
60 |     "test": "node node_modules/karma/bin/karma start --single-run",
61 |     "test:debug": "node node_modules/karma/bin/karma start --no-single-run --debug --browsers PhantomJS"
62 |   },
63 |   "dependencies": {}
64 | }
65 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
1 | // requires all tests in `project/unit/*.spec.js`
2 | const tests = require.context('./unit', true, /\.spec\.ts$/);
3 | tests.keys().forEach(tests);
4 | 
5 | // requires all components in `ClientApp/**/*.js|ts|vue`
6 | const components = require.context('../ClientApp/', true, /\.(ts|vue)$/);
7 | 
8 | components.keys().forEach(components);


--------------------------------------------------------------------------------
/test/unit/TestApp3.spec.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import {expect} from 'chai'
 4 | import {mount} from '@vue/test-utils'
 5 | import sinon from 'sinon'
 6 | import app3 from '../../ClientApp/components/apps/app3.vue'
 7 | import realstore from '../../ClientApp/store'
 8 | 
 9 | Vue.use(Vuex)
10 | 
11 | describe('app3.vue', () => {
12 |     let getters;
13 |     let store;
14 |     beforeEach(() => {
15 |         getters = {
16 |             hasActive: sinon.stub(),
17 |             todos: sinon.stub().returns( [{
18 |                     text:"an item"
19 |                 }])
20 |         }
21 |         store = new Vuex.Store({
22 |             state: {},
23 |             getters
24 |         });
25 |     })
26 | 
27 |     it("should render header text if prop is set", ()=> {
28 |         const wrapper = mount(app3, {store})
29 |         wrapper.setProps({
30 |             headerText: "a header",
31 |             simple: true
32 |         });
33 |         expect(wrapper.text()).to.contain('a header')
34 |     });
35 | 
36 |     it("should render todos", ()=> {
37 |         // test against the real store for illustration.
38 |         const wrapper = mount(app3, {
39 |             store: realstore,
40 |             propsData: {
41 |                 simple: true
42 |             }
43 |         });
44 |         expect(wrapper.text()).not.to.contain('a header')
45 |         expect(wrapper.findAll("li").length).to.equal(3)
46 |         expect(wrapper.find("li").text()).to.contain("item 1")
47 |     });
48 | });
49 | 


--------------------------------------------------------------------------------
/test/unit/TestMe.spec.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import app2 from '../../ClientApp/components/apps/app2.vue'
 3 | import {expect} from 'chai'
 4 | describe('app2.vue', () => {
 5 |     it("should render props", ()=> {
 6 |         const ctor = Vue.extend(app2);
 7 |         const comp = new ctor({
 8 |             propsData: {
 9 |                 greeting: "a greeting"
10 |             }
11 |         }).$mount();
12 |         expect(comp.$el.textContent).to.contain('a greeting')
13 |     });
14 | 
15 | });


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "ClientApp/**/*",
 4 |     "vue-shims.d.ts"
 5 |   ],
 6 |   "compilerOptions": {
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "experimentalDecorators": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "node",
11 |     "target": "es2015",
12 |     "sourceMap": true,
13 |     "skipDefaultLibCheck": true,
14 |     "strict": true,
15 |     "types": ["webpack-env"],
16 |     "lib": ["es2015", "dom"]
17 |   },
18 |   "exclude": [
19 |       "bin",
20 |       "node_modules"
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/vue-shims.d.ts:
--------------------------------------------------------------------------------
1 | // src/vue-shims.d.ts
2 | 
3 | declare module "*.vue" {
4 |     import Vue from "vue";
5 |     export default Vue;
6 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const webpack = require('webpack');
  3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  4 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  5 | var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
  6 | const bundleOutputDir = './wwwroot/dist';
  7 | var babelLoader = {
  8 |   loader: 'babel-loader',
  9 |   options: {
 10 |     cacheDirectory: true,
 11 |     presets: [
 12 |         "es2015"
 13 |     ],
 14 |     plugins: ["syntax-dynamic-import"]
 15 |   }
 16 | };
 17 | const tsLoader = {
 18 |     loader: 'ts-loader',
 19 |     options: {
 20 |         appendTsSuffixTo: [/\.vue$/],
 21 |         transpileOnly: true
 22 |     }
 23 | };
 24 | module.exports = (env) => {
 25 |     const isDevBuild = !(env && env.prod);
 26 |     const isTestBuild = (env && env.test);
 27 |     const isDebugging = (env && env.debugging)
 28 |     let vuetsloaders = [babelLoader,'ts-loader'];
 29 |     let tsLoadersArr = [babelLoader, tsLoader];
 30 |     if (isTestBuild && !isDebugging) {
 31 |         vuetsloaders = ['istanbul-instrumenter-loader'].concat(vuetsloaders);
 32 |         tsLoadersArrInstrumented =  ['istanbul-instrumenter-loader'].concat(tsLoadersArr);
 33 |     } else {
 34 |         tsLoadersArrInstrumented = tsLoadersArr;
 35 |     }
 36 |     console.log("Is running tests:", isTestBuild)
 37 |     console.log("Dev Build:", isDevBuild)
 38 |     return [{
 39 |         stats: {
 40 |             modules: false
 41 |         },
 42 |         context: __dirname,
 43 |         resolve: {
 44 |             extensions: ['.js', '.ts', '.vue']
 45 |         },
 46 |         entry: {
 47 |             'main': ['./ClientApp/boot.ts']
 48 |         },
 49 |         module: {
 50 |             rules: [
 51 |                 {
 52 |                     test: /\.vue$/,
 53 |                     loader: 'vue-loader',
 54 |                     include: /ClientApp/,
 55 |                     options: {
 56 |                         loaders: {
 57 |                             js: vuetsloaders,
 58 |                             ts: vuetsloaders
 59 |                         }
 60 |                     }
 61 |                 },
 62 |                 {
 63 |                     test: /\.js$/,
 64 |                     loader: babelLoader,
 65 |                 },
 66 |                 {
 67 |                     test: /\.ts$/,
 68 |                     include: /ClientApp/,
 69 |                     use: isTestBuild? tsLoadersArrInstrumented: tsLoadersArr
 70 |                 },
 71 |                 {
 72 |                     test: /\.css$/,
 73 |                     use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({
 74 |                         use: 'css-loader?minimize'
 75 |                     })
 76 |                 },
 77 |                 {
 78 |                     test: /\.(png|jpg|jpeg|gif|svg)$/,
 79 |                     use: 'url-loader?limit=25000'
 80 |                 }
 81 |             ].concat(isTestBuild? [{
 82 |                     test: /\.ts$/,
 83 |                     include: /test/,
 84 |                     use:  tsLoadersArr
 85 |             }]:[])
 86 |         },
 87 |         output: {
 88 |             path: path.join(__dirname, bundleOutputDir),
 89 |             filename: '[name].js',
 90 |             publicPath: 'dist/'
 91 |         },
 92 |         plugins: [
 93 |             new ForkTsCheckerWebpackPlugin(),
 94 |             new webpack.DefinePlugin({
 95 |                 'process.env': {
 96 |                     NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
 97 |                 }
 98 |             }),
 99 |             new webpack.DllReferencePlugin({
100 |                 context: __dirname,
101 |                 manifest: require('./wwwroot/dist/vendor-manifest.json')
102 |             })
103 |         ]
104 |         .concat(isDevBuild || isTestBuild ? [
105 |             // this is required for source map debugging
106 |             new webpack.SourceMapDevToolPlugin({
107 |                 filename: null, // only inline source maps seem to work when debugging with chrome
108 |                 moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]'), // Point sourcemap entries to the original file locations on disk
109 |                 test: /\.(ts|js|vue)$/
110 |             }),
111 |         ] : [
112 |             // Plugins that apply in production builds only
113 |             new webpack.SourceMapDevToolPlugin({
114 |                 filename: '[file].map', // Remove this line if you prefer inline source maps
115 |                 moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]'), // Point sourcemap entries to the original file locations on disk
116 |             }),
117 |             new UglifyJsPlugin(),
118 |             new ExtractTextPlugin('site.css')
119 |         ])
120 |     },
121 | ];
122 | };
123 | 


--------------------------------------------------------------------------------
/webpack.config.vendor.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 5 | 
 6 | module.exports = (env) => {
 7 |     const isDevBuild = !(env && env.prod);
 8 |     const extractCSS = new ExtractTextPlugin('vendor.css');
 9 | 
10 |     return [{
11 |         stats: { modules: false },
12 |         resolve: { extensions: [ '.js' ] },
13 |         devtool: "source-map",
14 |         entry: {
15 |             vendor: [
16 |                 'bootstrap',
17 |                 'bootstrap/dist/css/bootstrap.css',
18 |                 'event-source-polyfill',
19 |                 'isomorphic-fetch',
20 |                 'jquery',
21 |                 'vue',
22 |                 'vue-router'
23 |             ],
24 |         },
25 |         module: {
26 |             rules: [
27 |                 { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },
28 |                 { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
29 |             ]
30 |         },
31 |         output: {
32 |             path: path.join(__dirname, 'wwwroot', 'dist'),
33 |             publicPath: 'dist/',
34 |             filename: '[name].js',
35 |             library: '[name]_[hash]'
36 |         },
37 |         plugins: [
38 |             extractCSS,
39 |             new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
40 |             new webpack.DefinePlugin({
41 |                 'process.env': {
42 |                     NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
43 |                 }
44 |             }),
45 |             new webpack.DllPlugin({
46 |                 path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
47 |                 name: '[name]_[hash]'
48 |             })
49 |         ].concat(isDevBuild ? [] : [
50 |             new UglifyJSPlugin()
51 |         ])
52 |     }];
53 | };
54 | 


--------------------------------------------------------------------------------
/wwwroot/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghur/vuejs2-typescript-starter/a43a936d1206823a5a736ec9ea0e988c9855b1c2/wwwroot/favicon.ico


--------------------------------------------------------------------------------