Deploy Flutter Web to Server | Flutter Web Hosting | Flutter Web Deploy [2024 text file updated]

[Music] hello everyone in this tutorial we'll learn how to deploy flutter app on the server and linux server i'll walk you through step by step so this is the flutter project i have and this is uh right now i'm in the terminal okay so in the terminal let's run this project locally to run a project locally you will do flutter run d and then chrome so it will run the project in chrome browser and it might take a few moments okay all right so uh well let it compile and connect it on the local browser and at the same time we'll take a look at the other things we need to do so we have to come over here this is our website over here i laid out the steps that i need to do step by step oh yes right now our flutter app is getting started as you can see from the browser okay this is the app name and now eventually it started so this is the app that i've hosted it locally now we'll see how to host it on the browser uh sorry on the server itself okay so uh to do that uh we have to follow some steps okay the first thing we have to follow it's this command flutter web build so let's go ahead and run it so first i need to uh stop this process over here okay so now we'll copy paste this one let's go ahead and do it so just copy paste this one in your root folder flutters root folder uh in your project folder inside this one so now as you can see that it's compiling and it might take a bit of moment okay all right so that's the first step we are doing now let's go ahead and look at the second step uh well it says that once the build is done then you need to copy everything inside this web folder build web folder which is this one so we need to copy paste and then it says that we need to zip them into a new file we can name it anything so let's go ahead and do it let's see if the build has been done yes the build has been done and now we are inside this folder this is the flutter project and now over here we are we need to build uh sorry zip this files all these files from here to here okay that's a copy paste and we don't need to copy paste them actually we can directly compress them right so this is the file archive.zip and it contains all of these files okay let's see what else it says okay so we are done with this now it says step three go to linux machine and uh we have to create a folder the folder's name is web.thebestech.com but it could be any name you want but this is the name we would be using to visit our website from the browser once the hosting is done and everything else is done okay so let's go ahead and create a folder like this okay so i'll create amkit there um web.thebeststack.com okay fine and what else it says it says after that we need to sit into this folder and create another folder the folder's name is public flutter okay so i'll copy this one so let's go inside this folder okay well this folder is empty so we'll do amkit there yes so now we have this folder okay it's called public flutter and next step uh four is we need to create these two files app.js and page package json so let's go ahead and create that so we'll create a file using vim editor so called app.js and later on it says that we need to copy all this code in the fjs file let's go ahead and do it so we'll just copy all this content over here and we'll save it so wq save it and we need to create another file it's called pick as json let's go ahead and do it so veeam this one it's open now let's go ahead and copy all this content over here and we'll copy it all right we're done now let's go to step five step five it says we need to install node.js but which already installed early and uh i guess i did let's check it okay let's go ahead and run this command to install node.js okay nothing to do because node.js has already been installed i have the latest version next it says that we need to run this command let's go ahead and do it [Music] perfect it's installing and next we need to install this cookie cursor [Music] perfect and next we need to install this morgan dependency okay perfect so step six uh well it says that uh the folder in zip two step two we need to put it in public flatter folder which we created in step two okay and we need to use any uh ftb client or party client whatever you want so let's go ahead and do it uh so i'm over here so here i have we should have this uh web dot this one and this file over here as you see we have everything ready inside node node modules and things like that now we need to copy this file which we have early over here we we zipped it so just copy paste drag it over here and now it's loading okay it's done loading now we'll go to our terminal and would be able to see in our public flatter directory we have this one so what we could do we can unzip it and zip prescribe okay i don't know well i guess yes yes yes yes okay done all right okay so now we have this uh uh dart file but in js format and things like that so uh now what what do we need to do so it says step seven so we need to create a virtual host for this uh uh website so what all we need to do we need to copy paste this uh thing because without virtual host we won't be able to point it from outside world so let's go ahead and copy it that looks like i'm not able to copy though i'm not sure why so okay now we are good so now let's go ahead and open a virtual host so copy paste this things over here and make sure this this name is same as your folder name from where you you want to uh access this and this is also your domain name actually it could be www it could be secondary domain anything you want all right let's go ahead and save it and now see uh step eight okay all right so it says that do this one let's go ahead and run this command in our terminal okay all right actually there is another step that's not written in there so all we need to do we need to step back one over here and then uh that should be actually step nine so we need to run our node application which is app.js okay perfect so hopefully it's running now so the next thing we want to do we want to run this one in our terminal uh so in our browser and we'll see that if we can access our web application from there so let's go ahead and run it from here okay so we are waiting if we can able to visit it from here it looks like we are going to visit it because this is the terminals uh our website title name it which already showed up and i guess it's loading the application we can see from here well yes okay perfect so loading has been done and yes our website is a live congratulations if it's the first time you are loading website on server okay so definitely it is helpful video and if you liked it and if you learned something please don't forget to subscribe and share the video thank you so much

Channel: dbestech

Views: 70,362

Keywords: flutter web hosting, flutter website, flutter web development, flutter web deploy, flutter web, flutter tutorial, flutter web app, flutter web firebase hosting, flutter hosting, flutter web tutorial, flutter web responsive, flutter deploy, deploying website, flutter web app tutorial, flutter web publish, flutter web app hosting in linux server, flutter tutorial for beginners, flutter web hosting with nodejs, nodejs and flutter web hosting, flutter web 部署

Id: 9GaivTXkyko

Length: 9min 19sec (559 seconds)

Published: Wed Jun 23 2021