Server Side Rendering with Vue.js 3

youtubers join me today and experimenting with the latest vue 3 server side rendering features this is going to be a fun experiment with the raw api so come along so our goal for today is to create a view 3 application with u3 cli and then we are going to render that app on a server we are also going to use express and webpack and a lot of terminology my goal is to say focus so i'm not going to build the entire server side rendering solution i only want to explore the concepts okay so let's get started by creating a new view 3 application i'm using view 3 preview okay we are done jimmy and this is our regular view 3 application i suggest that we start by creating the server because this is server side rendering so let's create the server i'm going to use express and to start using this i'm going to have to install it first npm i express and now i can create a new file i'm gonna call it server.js okay let's start with these with the servers so first thing first i gotta require express and then i'm going to instantiate a new server server is going to be new express okay and now i'm going to work with path so i'm going to use any path server and get any path so that's going to be any the usual request response and then that's a new function i'm going to create some html const html is and i have some html ready that's it and now i need to response and with html finally i gotta listen server dot listen on board 88 okay so we have our server okay just to prove that the server is running i'm going to launch it in localhost 8080 and it's sending hello now comes the hard part we need to create a new build in a way that it's built for node.js this is going to be very interesting if you're into learning about how things work underneath i'm going to create a new file view config.js so one of the exports i need to add is chain webpack this is going to be a function and the argument i'm going to call webpack config this is not a raw webpack config it's mostly abstracted well the first thing i want to do is i want to know that this is actually server side rendering i'm going to call this environment of variable ssr okay if it's not set then just don't do any of these customization and the first thing we are doing we need to set webpack configuration and it needs to target node.js target is node another very important thing to do is setting the library target so output dot library target is going to be common js2 there is a lot of information in the webpack build but there's also a way to extract all the emitted files and this is going to be instrumental for a cause okay so we're gonna be using the webpack manifest plugin okay so i'm going to install that first and as i know it's being installed i'm going to import it into this file as well const manifest plugin is webpack manifest plugin a lot of typing i know okay in here i need to say config plugin i'm going to give it a name for every plugin that i add or that we add we also give it an identifier or name if you will so this is going to be my manifest name and i'm going to use new manifest plugin we can just use this plugin without any configuration but i can also show you that there is useful information that we can be using with this plugin and the most useful things for now is going to be the file name option and here's why manifest.json is something that our view3 cli is going to create for pwa progressive web app so we're going to change the file name from manifest.json okay and this is the option file name ssr manifest now we know what this file is actually for and this is the first difficult thing the second thing is going to be adding node externals so webpack config.externals and i'm going to need to set it up there is the library for that too and it's called npmi webpack node externals that's it and now i can close the terminal for a little while so we have more room on this side i'm gonna need to import node externals so we are going to use directly like so okay if we go to the view server side rendering guide and this is the guide for vue version 2 we are going to notice that they do the same thing as the externals are node externals the same plugin right here node externals and say and this says do not externalize dependencies that need to be processed by webpack okay do not externalize means internalize and you can add more file types here like view files so let's just add this whitelist css or you know what else we can do we can say css or view this is good we're making good progress and now we are going to need to disable something so obviously optimizations we don't need to optimize this for the browser for the consumption in the browser and across the internet this is going to be locally consumed in a node.js server so why don't we just disable things like um compression makes sense right webpack config again dot optimization split chunks is going to be well false because we don't need code splitting so much in node.js and minimize is going to be false as well so i don't want any compression to happen for this to be successful i had to investigate the plugins that are used by vue cli and i'm going to disable a view namely delete hot module replacement i'm going to copy this line a few times because i'm going to be replacing a few more preload okay and then prefetch all this is useful for the browser progress okay let's make things simple and friendly errors yeah i don't need that i'm going to give you a little secret if you ever want to see what this webpack config or chain webpack config is going to look like in webpack then you can actually output it console.log okay webpack config dot to config and this is going to spit out the entire config i'm going to comment this out because we don't need to bother with that but this could be uh useful for you to debug stuff and maybe you're just interested in learning about webpack and let's give this a try and if this is successful then the application is going to be built for the server if you remember we need to set the ssr environmental variable and i can do that by setting ssr to for example one and then i'm going to just build as usual npm run build okay and this is our first issue and honestly you know this is me copy pasting from view too and obviously i copied this white list config but meanwhile this was changed to allow list let's do this again ssr is one npm run build and there it is beautiful so i have app.js and app.css what if i didn't set npm run build no ssr let's test this out and now i have chunk vendors in the app you see how code splitting is working because now we have a new chunk that's a result of code splitting that's the optimization that i was telling you about split chunks so split chunk is going to work when we just run npm run build but if you run this with ssr equals one and then npm run build then vendors is going to be bundled inside the app.js and now we need to consume this in node so take a look at the dist folder and we see ssr manifest you see all the files that were created we are going to focus on these two now going back to the server i'm going to close the terminal again going up for this to work we're going to be working with two new apis that come with view three okay the first one is going to be create a server-side rendering application or create ssr app that's the first one the second one is going to be render to string because we are going to be consuming strings to send that as html okay create ssr app and that comes with require view and create ssr app looks very similar to create app you see create app view create app dot mount application we are just not going to be mounting but we are going to be creating we create app that we import um then we need to import the app.js obviously how do we do that we don't know the name of appgs because app.js is just app.then hash.js how do we know which hash that's going to be exactly ssr manifest app.js becomes that file so we need to import the ssr manifest.json into our server.js okay manifest is going to be required okay dist and then ssr manifest json okay now we need to import the app from manifest but let's see what it is const app path okay is manifest let's get back to ssr manifest to see that app.js dot well i can't say dot app.js okay this is the path however as you see this is slash js slash app okay what i'm worried about is slash js so i need to properly consume the path i need to make sure that this is going to be under the distribution of this folder and not the root of my computer for that we use i like to put path in the front path is going to be require path so just before manifest i'm going to write path dot join i'm going to say this current directory their name and then go back to this or distribution this folder and then join the manifest.app.js and close that function call and now i'm going to require it app is require app path and i'm going to be using the default export somehow while i was writing vs code included path for me but i did that manually without seeing that okay what do we do with the app we create an ssr app of course const and then app now lowercase app is going to be create ssr app app let me show you why we are doing this let's compare with main.js you see import app from app create app okay we are doing the same thing we are importing app and we're creating it's not just app it's server-side rendered app and we put that inside the app reference so with this we created the application but we haven't rendered yet for this we are going to be using the server renderer that does all the work for us in the background it's so smart and it's so unbelievably fast we need to do two things close this because so much mess second thing we are going to be importing this or installing first npm i view server renderer as this is being installed i'm going to require it right away right under requiring view okay render to string is going to come from view server render okay this is all i needed and it installed i'm going to close this for now render to string i'm going to use now app content is render to string app as simple as that let me tell you there's a lot of stuff that happens underneath the hood in render 2 string but eventually i'm going to get a string of app content and put it right here instead of hello this is going to be my app content but here's the catch because we use create ssr app in server.js can we also use create app can we also use mount now this is incompatible so we need to change the main.js logic so it doesn't do all that okay create app with dot mount that doesn't work with create ssr app so i'm going to copy and paste okay may not copy i'm going to name it main dot server okay main.server i'm going to remove create app and remove this line and all i need is to just to pass app.view okay export default app all i ever needed but i need to tell viewconfig how to use that main.server i'm going to go to the top because that deals with webpack config entry and this entry point is called app clear the existing value and add source main server dot yes okay this is not actually the same main dossier dodge yes okay and if i go to the terminal again i'm gonna use ssr npm run build let's see what happens good goody goody and now time for the truth server whoops node server okay going back to the browser i'm going to hello world reload and yes i see object promise you know why i see object promise because because this is a promise render to string is an asynchronous code so this is going to be an async function app content is a way to render to stream okay let's do that oh well we don't have to do that all over again just node server go back let's see does this work yes that works ha okay it kind of kind of works you know we don't have any css but i think by now you already figured this out and you know where to find the css so that's going to be a link and then that means it's a style sheet right and then we have some kind of href or position of it okay and then it comes from the manifest manifest and that's going to be have.css and we can close this proper now we need to tell express server to use these static files as statics so for every folder that we have here server dot use image and that's express static okay path join directory name and that's going to be distribution or dist image and i'm going to replicate that a few times okay and we have it for image and i'm going to have for js and i'm going to repeat that for css and one more favicon.ico all right and this is this is it i'm gonna save this and start the server again let's test this out that is it finally you know let's verify you know elements obviously but if i reload again go to network go to localhost and preview this is good response we actually do get html from the server wow if you think this is rewarding for you and for your friends feel free to share it like it subscribe that little bell icon and all that stuff thank you for sticking with me and see you again soon

Channel: Modus Create, Inc.

Views: 17,800

Keywords: Vue 3, Vue 3 Tutorial, Vue CLI 4.5, Vue Webpack Express, Vue Server Side Rendering, Vue.js SSR, Vue SSR tutorial, Vue.js Server side rendering, server side rendering tutorial, vue ssr tips, how to render vue 3 on a server, render vue 3 application on a server, vue tutorial, vue js tutorial, server side rendering with vue 3, server side rendering with webpack, server side rendering with express, vue 3 guide, vue 3 best practices, vue 3 tips and tricks, vue 3 partner

Id: XJfaAkvLXyU

Length: 18min 9sec (1089 seconds)

Published: Thu Oct 15 2020