How to deploy Next.js app to Firebase Hosting? Simple step-by-step tutorial

hello everyone uh today we'll be deploying our next chest app to Firebase hosting but this is a step-by-step guide you will be able to find link to this guide in the description the written version of this so basically it shows uh so basically I have prepared this guy to show people how to do deploy in xjs app to Firebase because not a lot of people talk talk about that not like there is not a lot of content on this I have found some documentation from Firebase but apparently uh it didn't work for me so I have prepared an actual step-by-step guide uh so that anyone could do and follow along on how to do this so let's start so first off uh since this guide basically shows how to do this from ground up let's do this so we will need some next.js app uh and I have a few but let's make it from ground up like from Total zero so I open vs code and in terminal run MPX createx app at latest and Dot in the end so basically this this creates a latest version of next JSF and here uh you can just follow along it doesn't really matter what it is here uh if you have your own application you can skip all those steps and go right to the um second or third step so basically if you already have a copy of your code uh you can go up to step three but if you don't you can follow along so basically sure when when I use typescript if you're no television CSS yes no Source directory yes a browser and no to import alias so it creates some boilerplate code for us uh I will just wait it for for a couple of seconds and you can already go to app folder let's delete everything from Main uh basically uh I will also delete those classes and let's just say uh H1 to um my first next JS app that's I uh will deploy so that's it and we can also run run Dev and also we should uh Delete all the styles from almost CSS just so it will not look ugly so let's try again brand Dev and turn it on and of course we get a localhost here uh it will compile and in a few seconds we will get this app so it's just H1 nothing fancy uh but this will work for multi-page apps as well as uh like one one page single page applications so you can just follow along what comes next so let's say that we have our our app uh of course you will probably have something something by faster than just H1 but once again um let's go to the next step so second step is making a copy of your apps code because uh what is going to come next is that we're going to install a few packages uh via in VM so I would recommend you to either store uh your files of the app unzip on your computer or of course you can also upload them to GitHub repo uh just to have them somewhere just to have an option to go back and um and to have the app without those changes that we're now going to bring to it and also if you if you will later decide that okay I didn't want to have my app hosted by Firebase I wanted I don't know like AWS or Versa maybe so um you should have the clean copy of your apps code so the next step is creating a Firebase project and the verification But first you probably do understand the Firebase structure but here it is for you this is visualization that I have prepared for this tutorial so basically it's quite simple you have your Google or Firebase account it's the same basically because all the Firebase uh projects are attached to your Google account so under this level you have your Firebase projects uh this basically uh one spec project and beneath this project you have different kind of resources so a resource what I mean by that is for example web application which we will be deploying today is uh is a resource a firestore database Cloud database could also be a resource and for example and they all are in one project so for example in one Firebase project you can have Android app firestore database and the applications all at once and they will share uh like uh like one Firebase projects they will all be stored in by one Firebase project so now hopefully that was understandable of course this image will be available for anyone this tutorial will be but you can check the link in the description to this written version of this tutorial of course uh that's all the links and code uh so but now let's do this let's create our uh Firebase uh project first so I go to console Firebase google.com and good great project so here let's just do some project test just just to test things out I'm just showing things to you so the next instruction tells us that um we don't really want Google analytics but if you are deploying your actual um you would want to enable this because it enables you to have analytics for free but just for the sake of getting this tutorial faster I will I will disable Google Analytics so right now we're waiting for our project to be created so once again we're creating a project right now so in in your Google account there will be a Firebase project and right now we'll be deploying our web application um so we just want to wait until this happens and next step is creating a web application in this project so you will be redirected to this page uh here you can just click here uh to web and get this page of creating your verification but if for some reason you don't see this button you can also do this via project settings so this icon product settings and on the very bottom you will have this button as well so there are multiple ways you can also do this by here so there are many ways to do this but the thing is you need to um choose to create web application not Android not iOS but verification and here you so let's do app test of course you want to have your uh app name here you do check this button because we do want Firebase hosting for this app and you also check uh sorry choose the project name that we have just created so uh it was Project test and Firebase added some unique ID to power project name so this is how it's called now so we choose that and we'll register an app so basically right now it's created uh but we need to of course install some things to make this work so first off uh let's go back to tutorial um uh so yeah we have we have checked the Box on Firebase Hudson so now we add Firebase to our app so this is uh you can also follow this link and this is official Firebase documentation on how to do this do it there is a lot of information on on this but let's just focus on the actual step-by-step tutorial because it's basically the same but I have collected all the information for you so it will be much easier so first off let's uh also uh clean clean this run npm install Firebase right now so it will install Firebase package in meantime we also need to copy this code uh to our project so basically in app directory you can create a file called something like buyer base dot Js probably can be in TSX I'm not sure I haven't actually tried it yet but you can try so let's for the sake of this tutorial let's do this dot JS file I save it of course uh while this package is installing uh so what what will do next so of course this code is unique just so we know this the script is unique uh and if you if you will need some additional packages here you can see what other buyer-based products you you can install but we just want to deploy our app so we don't need anything else right now uh so let's see okay so it has installed uh after that here it says that you will need to export this function uh but it's actually um like for this tutorial we don't have a script that needs to be exported so you can actually ignore this but if you like in this um in this file if you have some scripts for example you you have activated firestore uh you need to export this function but you you probably will figure this out because if you use firestore you're probably an advanced Firebase user but for this tutorial we actually don't need this but you can keep in mind that if you have some grids that are used in your application you need to export them um so next we install Firebase CLI uh I just insert this script here uh it installs phone number package uh slash g stands for Global so uh we install this package as well and next we'll need to log in to our fireplace so just a few seconds here and it is installing in meantime we can check on what steps come next basically quite easy as you can see um and yeah you can see we have already installed what's the packages so this is why I have mentioned to make a copy of this code of your applications code so next we log into Firebase as you can see I get this error it happens sometimes I'm actually honestly not sure why this happens but I have found the solution on um stackable 4 for this uh you can just copy this it basically overruns some um uh policy like strict policies it is and it will work fine so once again we do Firebase login and it will work just fine so I'm already logged in with my email with my Gmail actually Google account so uh if you're not logged in to Firebase and this is your first time doing this uh you will get a link uh so after running Firebase plugin uh in terminal you will get a link that you need to control and left click so basically you need to follow this link and log in with your Google account so um and of course it has to be the same Google account that your Firebase app is on so they those accounts needs to be the same so after we log in um okay let me see we logged in uh so since I have already done this let's just make sure that they actually logged in and can see our project so I found this command uh Firebase projects list and it shows our project so as I have shown you I had one previous one project previously and this is the one that we have created for the sake of the tutorial project slash test you can see the projects ID um and so I can identify that yeah indeed uh I have logged in and uh we can move on to step number five uh which is integrate our next.js app with Firebase this is once again the official documentation on our Firebase recommends doing this so I will just copy this code let's run it it basically enables um this is experimental function of Firebase this enables its Integrations with web Frameworks like xjs um so you will see this message enabled uh experiment a web Frameworks then we run a Firebase init hosting um which is kind of self-explanatory you will see this message and it will ask you I already proceed to press yes we already proceed and here you need to choose either you want to use an existing project for this or create a new one so we have already created that but of course theoretically you could have skipped this tab and created this in intramill but I'd like to do this on Firebase just for the sake of uh like Simplicity of this so yeah we choose existing project enter um here we choose the project that we want to to use for this we have created project test so we choose this one uh we need to wait for a couple of seconds it will uh okay so it says detected and existing xgs code base in the current directory should we use this yes we should because this is basically what webs uh web Frameworks allows us to do it really helps us with deployment so here we we choose the server side uh which is the reason for uh service server side content generation uh so it's if applicable but you choose the server that is the closest to the user base the user base for me it's Euro I mean for this application it's just once again for the sake of tutorial uh so here uh do we want automatic builds and deploys with GitHub no uh but you can of course set it up but for the sake of this tutorial I will not be covering this topic uh so after this um so we have ran our basic housing and this all the things uh of how do you need to answer to those questions and then we run the final command which is Firebase deploy and we wait so this is basically the longest it will wait in this uh tutorial and after this our app should be deployed um so it also shows a bunch of is for links for you to use so the documentation you can also file a bug there so in the tutorial that I have prepared for you there are a couple of links links including the stack Overflow issue that uh that basically overrides this execution policy I think it's called so basically you can follow along and check out this stackable overflow issue and also um there are some links to Firebase tools repositorium and you can also file a Blog about Firebase tools if you encounter any so basically well we're checking on this our app got deployed so we check it and as you can see on web app which is a Firebase domain and we have a sub sub domain on this which is our project ID and here's our next.js app so let's basically get we can also open console of this web app so as you can see uh this is Project test and in this project test we have app test which is our web application uh and as you can see it shows here everything of all the data and this is the script which also may want to copy again and have so basically oh this is done like our app has been deployed uh of course you can also later configure Uh custom domains and all that stuff but this is that I will not be covering this in this tutorial so uh our goal here is done our next.js app is deployed so hopefully this was useful for somebody um and yeah good luck everyone with deploying your own next GS apps I guess goodbye

Channel: Aliaksandr Tsykin

Views: 11,528

Keywords: next-js, react, it, firebase, hosting, deploy, webdev

Id: ItO5dqXjjro

Length: 18min 16sec (1096 seconds)

Published: Fri Aug 18 2023