Firebase hosting not recognising next.js index page - firebase

We have picked up a very messy half built project and are trying to get it into an external beta testing state...
It is a next.js application which works fine if we run npm run build and then npm run start.
We prefer to host it on Firebase, for all the normal reasons and I believe it should be possible to do so.
However, when we install firebase and enable firebase experiments:enable webframeworks and firebase init hosting and accept the default options (Y,N) it adds the standard firebase index.html to the public folder - even though it didn't ask if we wanted that...
If we leave that index.html in place in the public folder then run firebase serve or firebase deploy, the /public/index.html is delivered as the root page of our site. When it should be the Index of the next application. If we delete the firebase index.html, and then rerun firebase serve to rebuild, then we get an 'undefined url' error (as it can't find the /public/index.html presumably).
We have an index.tsx in the /pages dir and when we run firebase serve, the build process does seem to be placing index-xxxxx.js chunk files etc. in .firebase/sitename/hosting/_next/static/chunks/pages.
We have tried adding rewrites in the firebase.json of various sorts, changed versions, everything we can think of. But still can't work out why firebase is not recognising the site root index page when it is running just fine on npm run start.
Any help appreciated to help us troubleshoot.

Related

Getting firebase.json

Using the Firebase console, I created a project and two apps, connected my own domain, and set up a few dynamic links.
Everything works perfectly!
Now I need to add some redirects in the hosting section in firebase.json. I have installed the CLI for this.
The problem is, I don't know how to get the firebase.json file generated by the console in order to modify it.

Firebase hosting application deploy

I tried to deploy my application using Firebase (in build folder I have an index.html file) but I get the following error:
Does anyone know what might had gone wrong?
That's actually the default content in the automatically generated index.html file by the Firebase CLI when you initialize your project. That's not an error; If you already have HTML ready to go, just paste it inside the index.html file inside your build folder.
Your screenshot is showing the local index.html file, make sure to deploy your site by running firebase deploy --only hosting; And also double check your public attribute within your firebase.json file is configured to take the build folder.

Firebase dynamic links on customdomain rewrite in hosting but how

I've setup a custom domain to use for firebase Dynamic Links. Hosting has been setup in Firebase Console and I tried to use dynamic links without the customdomain, but just a xxx.page.link.
Now I want to return to use the custom domain, but from the console I'm told that:
A configuration already exists for this site. Add the snippet below to your firebase.json file and redeploy your changes. Be sure the rewrite rule is the first match for your dynamic link.
I'm not exactly sure how to handle this. Should I use the CLI and init a project to make this change or can I somehow do this from the portal itself.
If I need to use the CLI, how do I then access the existing project and make the change?
It seems you're already using Firebase Hosting outside of just for Dynamic Links. In that case you'll need to configure it through the CLI.
The configuration for Firebase Hosting must be made through deploying the firebase.json file through the Firebase CLI. There's no way to configure this directly in the Firebase console.
You can create an empty directory, run firebase init in there, and configure it to your existing project. Once that is done, you can create and deploy the minimal firebase.json file required as shown in the documentation on setting up your custom domain.

Firebase Deployed URL not working?

So I have built a simple firebase and javascript app that uses firebase database and hosting.
I have successfully built the app and deployed to Firebase hosting, however when the cmd provides the url that leads to the app it takes me to some completely random firebase landing page.
All deployment is correct and I know all my code is correct, but it keeps sending me to the random landing page: https://firebase.google.com/docs/hosting/
When you first create a project on firebase it asks you for the public directory: What do you want to use as your public directory? public
Usually the default its public, so the firebase generates a random welcome index.html there.
When you setup the firebase init configure the public directory to your files and you should see your app instead of the welcome index file, or simply put all your files inside the public directory you've chosen above.
Here I found a very simple tutorial on how to get started on that: https://www.brooks-patton.com/deploying-a-static-website-to-firebase/
Another way - you can just edit firebase.json file, in the line with "public" change the path where is your code was built.

Deploy Vue.js app to Apache server

i need some help. I wrote an SPA using VueJs. I ran "npm run build" so i can test my app on my Xampp server. The build generated a "/dist" folder. I changed the index.html in the dist folder to index.php. I tried serving the dist folder with Xampp but it shows a blank page. Please help. I have uploaded the image showing the errors
https://i.stack.imgur.com/ae7GM.jpg
I had the same issue; a bunch of 404's in my console after running
npm run build. Ceejayoz is correct in suggesting you take a look at your network tab to see where the server is expecting to reach the file.
His suggestion tipped me off that my application did not have a base URL set.
Vue's docs on this.
After setting the path my app was located at, I reran the build process and it came right up.
dist files can only be served via http, you have to deploy it to your hosting server before you can see the output of your vue app

Resources