Vue SSR bundling the express server with the vue app so the app can be run from the build dist folder copied to a host server

user_2663916 0
Viewed 838

I have created a Vue SSR application and all instructions/wikis/blogs I have read only tell you how to run the application in a development environment. They do not tell you how to run the application in a production environment.

I have previously written the same app in React SSR application. In that app the build produces a "dist" folder containing the bundle "server_bundle.js". This bundle contains the Express server (server.js) AND the React code. I can run the application from within the "dist" folder using

node dist/server_bundle.js

In the Vue SSR application, the build also produces a "dist" folder. However it contains a "vue-ssr-bundle.json" file which does NOT include the express server (server.js). To run the application in development I have to use the Express server file located in the root of my project rather than running everything from the "dist" directory

node ./server.js

This is OK in development as I am working within my project but in production this will not work as I have to run everything from the "dist" folder.

Building and Running

The app is built using the following commands (in dev i add the "--watch" argument)

webpack --config webpack.server.config.js
webpack --config webpack.client.config.js

These build scripts create and populate the dist (server) and public (client) folders

project_root      
  - dist
      - vue-ssr-bundle.json
  - public
      - 0_client_bundle.js
      - client_bundle.js
      - any static images, such as "myImage.jpg"

To run the application I run the Express server using

node ./server.js"

See that I am using "server.js" in the root of my project. It is NOT in the dist folder.

ISSUE So how would I run the application in production which does NOT have my project code, it only has the "dist" and "public" folders produced by my builds?

My code

Project structure

project_root
  - src
      - assets
          - any static images, such as "myImage.jpg"
      - client
          - client_main.js
      - components
          - lots of files
      - pages
          - components which are top level pages
      - server 
          - server_main.js
      - vuex 
          - folders and files containing code pertaining to vuex
      - app.js
      - App.vue
      - router.js
  - index.html (the template html file to have content inserted into)
  - server.js (the Express Server file)
  - webpack.base.config.js          
  - webpack.client.config.js
  - webpack.server.config.js

src/client/client_main.js

import { createApp } from '../app'

const { app, router, store } = createApp()
... 
router.onReady(() => {
  app.$mount('#app')
})

src/server/server_main.js

import { createApp } from '../app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      resolve(app)
    }, reject)

  })
}

src/app.js

import Vue from 'vue'
import App from './App.vue'
import { createStore } from './vuex/store'
import { createRouter } from './router'
import { sync } from 'vuex-router-sync'

export function createApp () {
  const store = createStore()
  const router = createRouter()

  sync(store, router)

  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  return { app, router, store }
}

server.js

const fs = require('fs');
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');

const bundleRenderer = createBundleRenderer(
  require('./dist/vue-ssr-bundle.json'),
  {
    template: fs.readFileSync('./index.html', 'utf-8')
  }
);

const server = express();

server.use(express.static('public'));

server.get('*', (req, res) => {
    const context = { url: req.url }  

    bundleRenderer.renderToString(context, (err, html) => {
      if (err) {
        if (err.code === 404) {
          res.status(404).end('Page not found')
        } else {
          res.status(500).end('Internal Server Error')
        }
      } else {
        res.end(html)
      }
    })
});

server.listen(8080);

webpack.base.config.js

const webpack = require('webpack')

module.exports = {

  module: {
    rules: I wont put them all here to reduce noise, but i am using 'vue-loader', 'babel-loader''file-loader'       
  },

  resolve: {
    alias: {'vue$': 'vue/dist/vue.esm.js'},
    extensions: ['*', '.js', '.vue', '.json']
  },
  
  
  performance: {
    hints: false
  },
}

webpack.client.js

var path = require('path')
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

const config = {
  entry: './src/client/main.js',      
  output: {
    filename: 'client-bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: I wont put them all here to reduce noise, but i am using 'vue-style-loader', 'css-loader'        
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  devtool: '#eval-source-map'
}

module.exports = merge(baseConfig, config);

webpack.server.js

const path = require('path')
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
const webpackNodeExternals = require('webpack-node-externals');
const VueSSRPlugin = require('vue-ssr-webpack-plugin')

const config = {
  target: 'node',
  entry: './src/server/main.js',
  output: { 
    filename: 'server-bundle.js',
    path: path.resolve(__dirname, './dist'),
    libraryTarget: 'commonjs2'
  },
  externals: [webpackNodeExternals()],
  devtool: '#source-map',
  plugins: [
    new VueSSRPlugin(),
  ]
}

module.exports = merge(baseConfig, config);

What I tried

I expected the server build would have the Express server bundled in with the Vue application code just like React and therefore I would just have to run the bundle from within the dist folder. I think this is a much nicer and cleaner solution.

I tried unsuccessfully to change the Vue app to build and run like the React application.

Remove VueSSRPlugin I removed the VueSSRPlugin reference in webpack.server.config.js and saw that in the "dist" file i now have the bundle and images, like with React. However this bundle still does not have the Express server in it. I still did not know how to get the express server in the dist folder

Move express file into src/server folder I thought about moving the express file (server.js) into my projects source hoping it will be added to the bundle. However I did not know how to change the express file seeing as it has a reference to the JSON file which the express server file ends up in.

server-side-rendering vue.js
2 Answers

I have resolved this for the time being by copying to my server the following

  • index.html
  • server.js
  • the "dist" folder (containing the server bundle)
  • the "public" folder (containing the client bundle, stylesheet and other files)

Then on the server i can run

node server.js

as the server.js and index.html has been copied onto the server.

I still prefer the way React is built so that the express server.js file and index.html are in the server bundle, but at least this is working.

user_26639160

I used my React SSR to figure out how to bundle all of my Vue SSR application including the express server into the server bundle.

The downside of this solution is that I can no longer use the "index.html" template and the "bundleRenderer".

The upside of this solution, is that the express server can now make use of variables set in WebPack config.

Project structure

My project structure is now the following. I moved the express server file into the src/server folder and removed the "index.html" file.

project_root
 - src
      - assets
          - any static images, such as "myImage.jpg"
      - client
          - client_main.js
      - components
          - lots of files
      - server 
          - server_main.js
          - server.js (the Express Server file)
      - vuex 
          - folders and files containing code pertaining to vuex
      - app.js
      - App.vue
      - router.js
 - webpack.base.config.js          
 - webpack.client.config.js
 - webpack.server.config.js

WebPack config changes

"webpack.base.config.js" no longer needs

devtool: '#source-map',

"webpack.server.config.js" no longer needs the "VueSSRPlugin" so the following can be removed

const VueSSRPlugin = require('vue-ssr-webpack-plugin');

plugins: [
  new VueSSRPlugin(),
],

Change the server entry to be the express server file

entry: './src/server/server.js',

Server main file : src/server/server_main.js

Return the VUEX store as well as the Vue app. This is because we have to manually extract the store data, serialize it and add it to the HTML returned to the client.

import createApp from '../app';

export default (context) => new Promise((resolve, reject) => {
  const { app, router, store } = createApp();

  router.push(context.url);

  router.onReady(() => {
    const matchedComponents = router.getMatchedComponents();
    if (!matchedComponents.length) {
      return reject(new Error('404'));
    }

    context.rendered = () => {
      context.state = store.state;
    };

    return resolve({ app, store });
  }, reject);
});

Create a renderer.js file responsible for generating the HTML to return to the client (i.e. the replacement of the index.html

NOTE: You do not have to have a separate file for this, you could include this code in your express server file if you so desire.

import serialize from 'serialize-javascript';

export default (store, html) => {

  return `
    <html>
      <head>
        <link rel="icon" href="/favicon.png" type="image/png">
      </head>
      <body>
        <script>
          window.__INITIAL_STATE__ = ${serialize(store.state)}
        </script>         
        <div id="root">${html}</div>
        <script src="/client-bundle.js"></script>   
      </body>
    </html>
  `;
};

Express server file changes (src/server/server.js) - no longer use bundleRenderer

Change the express server file to use the vue server renderer and not the bundle renderer. Call "generateApp" (i.e. the function in server_main.js which is unchanged) and when that promise has resolved all the HTML has been generated and the VUEX store contains all the data. Call renderToString on the vue renderer passing in the Vue app that has been created. In the callback function for renderToString call the renderer passing the HTML generated and the VUEX store. The renderer will create the HTML to return including the serialised store. The HTML is then returned to the client.

import generateApp from './server_main.js';
import renderer from './renderer';

const express = require('express');
const vueServerRenderer = require('vue-server-renderer').createRenderer();

const server = express();

server.use(express.static('public'));

server.get('*', (req, res) => {
  const context = { url: req.url };

  generateApp(context).then((createdAppObj) => {
    const { app, store } = createdAppObj;

    vueServerRenderer.renderToString(
      app,
      (err, html) => {
        if (err) {
          if (err.code === 404) {
            res.status(404).end('Page not found');
          } else {
            res.status(500).end('Internal Server Error');
          }
        } else {
          // BUILD UP THE HTML TO RETURN
          const content = renderer(store, html);
          res.send(content);
        }
      },
    );
  });
});

server.listen(8080);

package.json change

Now when everything is built the "dist" directory will contain the following

- server-bundle.js

This contains the express server file as the entry file, therefore to run the application you execute

node ./server.js

One advantage of this solution: Express Server can make use of variables set up in WebPack config

Vue supports adding variables into your "index.html" template using Template Interpolation, see https://ssr.vuejs.org/guide/#using-a-page-template.

However in my case I needed to use a variable setup in my WebPack config to put into the "index.html".

My WebPack config sets variables from a ".env" file which is then used in my Vue app.
I need to use a variable in this ".env" file in my "index.html". As the Express Server was not being parsed and bundled by WebPack, it would not have the variables set. I would have to read the ".env" file in the express server file. This would mean i would have to also have the ".env" file on my production environment where the express server file is located in order for it to read from it.

With the change described in this comment, WebPack bundles the express server file now, therefore the express server file has access to all variables set in WebPack, therefore it will have access to variables set from ".env"

user_26639160
Related