Enabling SSR

We finally have all of the configuration files in place that we'll need in order to render our app on the server. We now need a file that will be invoked directly from our MVC view and will be responsible for actually rendering the application for us. Create a new ClientApp/renderOnServer.js file, then start it off with the following:

process.env.VUE_ENV="server";

constfs=require("fs");
constpath=require("path");

constfilePath=path.join(__dirname, "../wwwroot/dist/main-server.js");
constcode=fs.readFileSync(filePath, "utf8");

constbundleRenderer=require("vue-server-renderer").createBundleRenderer(
code
);

 

The important part here is how we physically read the wwwroot/dist/main-server.js file, then create a bundle renderer using the contents of it. The main-server.js file is the product of our server-side webpack configuration, bundling our application based on the contents of the server.js file we defined earlier. The bundle renderer we create from this file is ultimately what...