How to deploy Nuxt SSR app on firebase using firebase cloud functions and firebase hosting.

hello my name is MMO I mean sake I'm a fronting software developer from mahadesh and in this video I'm going to show you how to do your next SSR app in our base using firebase host and private firebase cloud functions I'm making this video because first of all I could not find any into you tutorials on how to do mine next it's a wrap on firebase there is a video if you go to youtube and search how to deploy in action SSR in firebase you would see there is a video posted by the official firebase YouTube channel about this topic party was posted almost two years ago so it is quite outdated now and secondly if you go to knock store official website which locks just org and go to the FAQ section you would see that there is a bunch of documentation about deploying you're not strapped on various hosting platforms like github as your portal but there is no mention of firebase here so I'm going to guess that there is no official documentation about how to deploy you knock step on firebase so in order to solve this I went to the internet and searched for various resources but a bunch of blocks and was finally able to solve the problem and successfully deploy my not step on firebase way I'm going to share the steps involved in the process with you so let's begin ok so first of all I'm going to follow this blog on your screen here and I'm going to link this block in the video description and I highly recommend you go through the full blog and read it thoroughly I'm going to make some modifications the modifications to the steps shown in this block so let's go through the steps involved first the first step is to create your back step in your local system the second step would be creating a fire based project in firebase console the third step is initializing firebase in your next project and then we need to write our cloud function we need to specify the render function in our firebase cloud functions then we need to modify firebase to Jason config for table deployment and finally deploy our projects let's go through the steps one by one so first of all let's go to terminal and then look at the directory I want to create my app in and now I'm going to type npx create NOx tap firebase first so this is going to create an app named demo firebase next in my current directory and initialize it so it's asking for my project name which is demo firebase next programming language Java Script phase-in p.m. let's use eval framework sure if you pronounce it that way and yes take your exchange sterling non-universal I'm ready okay oh it's now installing my packages at the project that's wet okay so now our project has been created and initialized so let's go to our project directory and run our development server by typing in PM r on Dave so you can see that our app is being served from our local host port thousand so let's head over to our browser whoops so we can see here it is working and now for the next step we have to create a firebase project in our base console Oh let's head over to the console dot fire-based or google.com you may have to login first before you can busy page so let's click add project give our project name okay so it's creating our project let's wait for it to finish so our project has been created so let's head over to our project dashboard and we can see our postings and functions from here when they are deployed we will be able to monitor and see them from this dashboard next we need to initialize firebase in our next project or now we head over to our terminal wrong path available to the project to Tory okay so to initialize firebase in our project it to type in firebase so before you can run this command you need to make sure you have installed firebase first without firebase tools installed you cannot use the virus command so in order to install firebase tools first you need to type in in TM minus G install firebase tools you need to run as administrator sudo so I already have firebase tools installed so I'm not going to run this so I'm going to run firebase in it it is going to take some input we are going to use functions and posting okay we need to use our existing project within the selected project and select all language yes oh it's turning all the dependents to our firebase realization so now the Sierra is asking us what do we want to use what directory we want to use or public directory so in case of firebase the public directory hosts all our static assets and static pages this is the directory that gets deployed to firebase hosting oh I'm going to specify our public folder as our publicly known we don't want to configure it as super Jeff and our firebase initialization is complete you can see that there is a new folder which aimed functions our project directory Solar is going to post server-side code that is going to deploy to firebase functions two more files are generated which is the firebase of C and firebase JSON firebase JSON is going to we are going to need this firebase Jason to configure our firebase deployment commands the public directory also gets created and to file sorry written here one is 404 dot HTML and indexed arrays so now we are going to write our cloud function let's head over to the blog and I'm going to obey this code and paste it inside our function slash index dot J's five let's paste it oceans is already potent okay let's go through this code at first we have imported functions from firebase functions then we have imported asked from knock start we have used knock start instead of next the reason that we use NASTAR that have not explained well in the blog so I highly recommend you first then we are going to import asked on feet from notched or configure J's but if you look closely there is no natural conflicted J's inside our functions folder so before we do our cloud functions we need to copy our natural conflicted chase from root directory to inside functions and then the config object is modified for deployment or production deployment so we have Dave and debug to false and build it to notched his building T indicates the folder in which our build files are stored so if you look again inside the functions folder there is no built it renamed next so before we deploy our cloud function we need to build our project and opie our build files inside next folder that should be heated inside the function folder next we initialize the next object and write a cloud function name is a syrup inside which we simply wait for not to be ready and return in October Middleville and that's it our cloud function is ready and the next step is to modify our firebase tour JSON or deployment so first of all I'm going to defy a source property which indicates the source of our functions which is the functions folder and then I'm going to write some commands inside the pre deep level a commands inside the pre deploy who will be executed every time we deploy the firebase cloud functions so in this PD player who we are going to post run in p.m. run build so this is going to build our project and store our build files inside the dotnet folder and then I'm going to remove function slash next folder so what this does is if the function slash matched folder exists inside the functions and it is removed so remember this the function / - folder is our built directory as mentioned that our cloud function indexed or chase F so we are going to first remove it if it exists then we are going to copy simply okay our contents of the dot next folder to the function / Smashburger and also we are going to copy our natural conflict or Jess from root inside our functions so this is our pre deploy hook and auditory deployer functions we need to do one more thing into sure that packages we used our development the packages that are used inside our project are all show also mentioned in our I guess rotation inside our functions so I'm going to look over this to Ives and Opie we the dependencies that are not present the deputy last and here I'm not going to install next and set our file with functions before because we actually you start on - I'm going and run in TM - - prefix functions installed so this command is going to roll all the packages inside the package dot JSON at the functions folder and install them inside the node modules which is also inside our function folder let's run it and furthermore I am going to install next star so much that our function older it start its presentation so now let's see if we can our functions cloud function oh and one more we have to go pee this is our function Jason five mr. Thyssen but what this does is point SSR F function which led inside our interest of J's inside functions it basically points are points to the function that we run when a page is requested from our five s server so SSL function will then handle the request and return the correct generated index dot HTML Oh now let's deploy our virus function sorry not in firebase deploy - - only focus that it's running our pre deploy cooks project is yield see telling us that unexpected token export I darn Ashkan figure chase this type of error is caused because of mismatch in the egg my script standard between two files so our function slash index dot J's is written in es5 and the Nash config dot J's is written in es6 it consists of export or default so in order to solve this problem what I am going to do replace this export dot default with module dot exports which is pipe syntax you to give us a linking error and going to knowledge for this line so now again the previous command or now again our project you it seems that it is working okay see that our deploy is complete so if we head over to our dashboard and go to functions we should see our functions syrup is deployed also telling us that roaches it has been deprecated no matter we will upgrade it later so our next step we configure our hosting we declare commands in firebase two adjacent so let's settle to I bastard and inside our hosting we are going to a similar pre deploy hook open that and this here so before we write rewrite this particular command for hosting deployment you need to see that when we run our in p.m. run build next Li builds our project that got next folder inside the dist and it creates two different folders one for server and one for client we are going to need opie this client folder from here side the public folder so I'm going to do that Delta PD playbook so let's write our command and that is at first we need to delete our old public folder every time we deploy in the contents of the public folder actually delete the contents of the public folder and make a victory named underscore next here underscore notched is the default public path for next projects our backs dot next slash this slash client folder should be inside his public slash matched folder in order for our Nashua to correctly serve our pages so you can rename this folder from underscore next to anything you want but you will also have to modify the next configure JS build object and specify that public but here let's say if I say public path per se NXT then we can change this to NXT so for now we are going to leave it as default and want to modify it so that default public part is matched and so after making the directory publics like not next you will have to copy mine because stably copy our not /t / client folder ooh public ash underscore next folder and also copy all our static assets instead of public folder okay now let's run in the defy this deploy ash - only hosting and we have been error hosting pitiable comment terminated with and not step - this client no such file or directory okay so the dist folder is gone from dot not folder okay let's turn in p.m. run build again this and previous aren't again you okay let's visitor you working okay too says that a file does not exist there was no index dot HTML found in kind entry this generally means that our syrup server is not working sometimes it takes a bit of time work after deployment so ok so after a bit of debugging I finally found the problem it seems that our pirates property or alerts area should be inside our host object inside fire mr. Jason oh I'm going to obey these rewrites array inside our hosting object so what this does is basically rewrite our traffic power function srf function and this is our FX function ultimately runs the NOx render function which returns the knock-knock stranger middleware which actually generates are pages and returns them to the client so now I should turn our best employ and okay I have a syntax error I run out of it you so deployment is complete no less visit again and pose and I'm and we have another error in order to deviate Jones and goat power logs see the logs from our server basically just saying that index error has occurred so these types of errors generally occurs when our inherited code by the build command of not generous Java scripts that are not supported by the firebase second so in order to convert the build JavaScript codes something that is supported by the firebase backend we are going to modify our Nash config DOJ's so at first not perfect node.js in our build object I extract CSS to true and then we are going to use Babel plug-in to convert our JavaScript code to supported partial so this basically initializes and asked babble preset F plugin and specifies the north are shown and browsers so the note version is ten point two point zero so inside our functional slash index yes very functional slash Peggy's dad Jason we have to upgrade our nor chase in to or from in Oh all our JavaScript codes after we run NPM run build JavaScript codes that are being generated will be supported by firebase OJ's back-end oh now this let's see what happens another syntax error okay and you a node.js version is updating to orphan 10 ok our deployment is complete so let's again visit our H okay that web page is generated correctly we looked up a horse we can see that the whole ml by Iris Clarke's function okay so we have successfully deployed our not necessary to our base using firebase cloud functions and firebase hosting I hope this video was informative enough to help you all the codes will be available via github repo I will give a link in the on the blog that I used here will also be linked below thanks for watching next time

Channel: M.A.Muhaimin Sakib

Views: 4,314

Keywords:

Id: _aTvdnqY3ek

Length: 28min 44sec (1724 seconds)

Published: Sat Jun 27 2020