flutter web host | flutter web white and blank page | flutter web app host free | flutter tutorial

okay you have just finished building your fantastic flutter WB app everything's look great and Flawless on your local machine and you are ready to share it with the world but wait you deploy it on GitHub pages and you get a blank screen frustrating right but don't worry because today we are going to have a look at this problem and by the end of this video you will be able to host your web app to GitHub Pages without any problem before we dive into the solution make sure to hit that subscribe button so you never miss out video like this let's run our web app it will take some time in that time uh let's create a two repo first with name no edit index. html. github.io you can give any name but make sure to write the github.io at last similarly let's create a second repo name edited index. html. github.io you can see see our web app look like this let's build this web app and deploy it on the GitHub first repo our web app has been built successfully now let's upload all file from output uh build web folder to our G GitHub first repository let me write a quick commit and our web app has been hosted on our first GitHub repository without any changes now let's clean all our build and get packages to properly host it on the GitHub you have to modify the index. HML file inside the web folder uh you can see there the default base URL for running our web app it is for learning locally but when we hosted on the GitHub the base URL should be do/ as all the reord file are inside in the same outer directory the first file required to load our hosted web app is the a flutter. GS Javascript file so we have added do/ before path of flutter. GS similarly we should add do slash before the Manifest do Jon also do/ before icon basically add slash to every path inside the index D HTML file as we upload on the GitHub the relative path of every file can be accessed by the slash when you enter flut run with the URL do/ then it will not run or your on your local machine so for running on the local machine we use the above a default router Bas HF it is showing error when we use the dot slash for running on our local machine when we run using the default base URL it will run without any problem let's run fter build web to build our web app for the hosting in the meantime while it's building the web app uh let us quickly host our GitHub repository we have already uploaded file in our first repo and I'm writing a quick commit for this second repo we have added dot slash to every path inside of the index. HTML file inside the web folder this is only the change that is required to host our web app properly it's still building uh let Host this is and host the main branch a quick tip if you have any problem while hosting on the GitHub account then simply create a GitHub repo the same name as username on your GitHub and wr. github.io at last after it create any dummy file in my case I am creating index.html commit change go to setting page and host the main branch our web app has been successfully built now let's copy and paste our whole build inside of the second repo our first repo is already online when we go to the first repo it is showing the blank screen and we are getting a error the base URL not found but if we go to our hosted second rep then our web app is successfully displaying

Channel: Flutter Tips

Views: 706

Keywords: flutter web, flutter web app, how to build flutter web, flutter web hosting, nodejs and flutter web hosting, flutter github pages, flutter web to github, deploy flutter web to server, flutter for web, flutter build web blank screen, flutter build web white screen, flutter web host on custom domain, flutter web development, flutter web deploy, flutter web firebase hosting, flutter github tutorial, flutter github actions, flutter github guide, github actions tutorial

Id: DLq36Af6a88

Length: 5min 38sec (338 seconds)

Published: Sat Jan 27 2024