diff --git a/templates/VueSpa/ClientApp/boot-client.ts b/templates/VueSpa/ClientApp/boot-client.ts deleted file mode 100644 index aa5e0a8..0000000 --- a/templates/VueSpa/ClientApp/boot-client.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import { routes } from './routes'; -Vue.use(VueRouter); - -new Vue({ - el: '#app-root', - router: new VueRouter({ mode: 'history', routes: routes }), - render: h => h(require('./components/app/app.vue.html')) -}); diff --git a/templates/VueSpa/ClientApp/boot-server-bundle.ts b/templates/VueSpa/ClientApp/boot-server-bundle.ts deleted file mode 100644 index ad2a7cb..0000000 --- a/templates/VueSpa/ClientApp/boot-server-bundle.ts +++ /dev/null @@ -1,16 +0,0 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import { createServerRenderer, RenderResult } from 'aspnet-prerendering'; -import { createBundleRenderer } from 'vue-server-renderer'; -import { routes } from './routes'; -Vue.use(VueRouter); - -export default function(context: any) { - const router = new VueRouter({ mode: 'history', routes: routes }) - router.push(context.url); - - return new Vue({ - render: h => h(require('./components/app/app.vue.html')), - router: router - }); -} diff --git a/templates/VueSpa/ClientApp/boot-server.ts b/templates/VueSpa/ClientApp/boot-server.ts deleted file mode 100644 index bbe4e4c..0000000 --- a/templates/VueSpa/ClientApp/boot-server.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { createServerRenderer, RenderResult } from 'aspnet-prerendering'; -import { createBundleRenderer } from 'vue-server-renderer'; -const path = require('path'); -const bundleRenderer = createBundleRenderer(path.resolve('ClientApp/dist/vue-ssr-bundle.json'), { - template: '' -}); - -export default createServerRenderer(params => { - return new Promise((resolve, reject) => { - bundleRenderer.renderToString(params, (error, html) => { - if (error) { - reject(error); - } else { - resolve({ html: html }); - } - }); - }); -}); diff --git a/templates/VueSpa/ClientApp/boot.ts b/templates/VueSpa/ClientApp/boot.ts new file mode 100644 index 0000000..232c141 --- /dev/null +++ b/templates/VueSpa/ClientApp/boot.ts @@ -0,0 +1,15 @@ +import Vue from 'vue'; +import VueRouter from 'vue-router'; +Vue.use(VueRouter); + +const routes = [ + { path: '/', component: require('./components/home/home.vue.html') }, + { path: '/counter', component: require('./components/counter/counter.vue.html') }, + { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') } +]; + +new Vue({ + el: '#app-root', + router: new VueRouter({ mode: 'history', routes: routes }), + render: h => h(require('./components/app/app.vue.html')) +}); diff --git a/templates/VueSpa/ClientApp/routes.ts b/templates/VueSpa/ClientApp/routes.ts deleted file mode 100644 index ba2d9b4..0000000 --- a/templates/VueSpa/ClientApp/routes.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const routes = [ - { path: '/', component: require('./components/home/home.vue.html') }, - { path: '/counter', component: require('./components/counter/counter.vue.html') }, - { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') } -]; diff --git a/templates/VueSpa/Views/Home/Index.cshtml b/templates/VueSpa/Views/Home/Index.cshtml index e4b2151..045360f 100644 --- a/templates/VueSpa/Views/Home/Index.cshtml +++ b/templates/VueSpa/Views/Home/Index.cshtml @@ -2,10 +2,8 @@ ViewData["Title"] = "Home Page"; } -
-
Loading...
-
+
Loading...
@section scripts { - + } diff --git a/templates/VueSpa/package.json b/templates/VueSpa/package.json index 42c7db4..a8716eb 100644 --- a/templates/VueSpa/package.json +++ b/templates/VueSpa/package.json @@ -3,7 +3,6 @@ "version": "0.0.0", "devDependencies": { "@types/requirejs": "^2.1.28", - "aspnet-prerendering": "^2.0.3", "aspnet-webpack": "^1.0.27", "av-ts": "^0.7.1", "awesome-typescript-loader": "^3.0.0", @@ -20,11 +19,8 @@ "vue": "^2.2.2", "vue-loader": "^11.1.4", "vue-router": "^2.3.0", - "vue-server-renderer": "^2.2.2", - "vue-ssr-webpack-plugin": "^1.0.2", "vue-template-compiler": "^2.2.2", "webpack": "^2.2.0", - "webpack-hot-middleware": "^2.12.2", - "webpack-merge": "^4.0.0" + "webpack-hot-middleware": "^2.12.2" } } diff --git a/templates/VueSpa/tsconfig.json b/templates/VueSpa/tsconfig.json index c62193b..fb41fd3 100644 --- a/templates/VueSpa/tsconfig.json +++ b/templates/VueSpa/tsconfig.json @@ -7,8 +7,7 @@ "target": "es5", "sourceMap": true, "skipDefaultLibCheck": true, - "types": ["requirejs"], - "lib": ["dom", "es2015"] + "types": ["requirejs"] }, "exclude": [ "bin", diff --git a/templates/VueSpa/webpack.config.js b/templates/VueSpa/webpack.config.js index d6339d6..c967f0a 100644 --- a/templates/VueSpa/webpack.config.js +++ b/templates/VueSpa/webpack.config.js @@ -2,22 +2,17 @@ const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; -const VueSSRPlugin = require('vue-ssr-webpack-plugin'); -const merge = require('webpack-merge'); const bundleOutputDir = './wwwroot/dist'; module.exports = (env) => { const isDevBuild = !(env && env.prod); - // Configuration in common to both client-side and server-side bundles - const sharedConfig = { + const bundleOutputDir = './wwwroot/dist'; + return [{ stats: { modules: false }, context: __dirname, resolve: { extensions: [ '.js', '.ts' ] }, - output: { - filename: '[name].js', - publicPath: '/dist/' - }, + entry: { 'main': './ClientApp/boot.ts' }, module: { rules: [ { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } }, @@ -26,22 +21,18 @@ module.exports = (env) => { { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, + output: { + path: path.join(__dirname, bundleOutputDir), + filename: '[name].js', + publicPath: '/dist/' + }, plugins: [ new CheckerPlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production') } - }) - ] - }; - - // Configuration for client-side bundle suitable for running in browsers - const clientBundleOutputDir = './wwwroot/dist'; - const clientBundleConfig = merge(sharedConfig, { - entry: { 'main-client': './ClientApp/boot-client.ts' }, - output: { path: path.join(__dirname, clientBundleOutputDir) }, - plugins: [ + }), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') @@ -50,34 +41,11 @@ module.exports = (env) => { // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps - moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk + moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin() ]) - }); - - // Configuration for server-side (prerendering) bundle suitable for running in Node - const serverBundlesOutput = { - libraryTarget: 'commonjs2', - path: path.join(__dirname, './ClientApp/dist') - }; - const serverBundleConfig = merge(sharedConfig, { - resolve: { mainFields: ['main'] }, - entry: { 'main': './ClientApp/boot-server-bundle.ts' }, - externals: {}, - plugins: [new VueSSRPlugin()], - output: serverBundlesOutput, - target: 'node', - devtool: 'inline-source-map' - }); - - const vueBundleRendererConfig = merge(sharedConfig, { - entry: { 'main-server': './ClientApp/boot-server.ts' }, - output: serverBundlesOutput, - target: 'node' - }); - - return [clientBundleConfig, serverBundleConfig, vueBundleRendererConfig]; + }]; };