I am trying to host my dynamic Node.js website using Firebase Hosting but I am having difficulty based on my file structure. Here is what is looks like:
In my code, I am not using an index.html file but when I ran firebase init it automatically created one for me along with a 404.html file. When I deploy my code, only index.html file seems to execute. But when I try deploying after deleting the index.html file, I can see the 404.html file.
This is the firebase.json file. that I am using:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
None of the files in the 'public/html' folder seem to be executing. I tried changing the public field to public/html in the firebase.json file but then I can only see Cannot GET / when deployed. How do I run the files in the 'public/html' folder when deploying along with the js files in the 'src/js' folder?
I have an error.html file in my code which is located under 'public/html/main'. If I want to use it besides the 404.html file, will I have to place in directly inside the public folder?
Additionally, I also have a lot of backend files. In order to use those, do I need to use some other service offered by firebase or that can be accomplished by using Firebase Hosting itself?
With Firebase Hosting, if you want to see web content when you load the "/" path, you will need a file called "index.html" in your public directory. It will not look in subdirectories. By default, with the configuration you're showing, all the paths are served relative to public.
It's hard to tell what you're expecting to work differently. If you want to refer to foo.html nested under html, then your path will need to be "/html/foo.html". If you want to change the hosting configuration to do something different, I suggest looking over the documentation.
Related
I have complete all process
Firebase Login
Firebase init
Firebase deploy
now finally i got a link https://testing-37553.firebaseapp.com/
but my website not showing so what should i have to do.
What you are seeing is the default index.html page that is created by the CLI when you create a new project.
You should adapt this index.html page as you whish (i.e. by modifying the HTML/CSS/JS code of this page, in your local project directory) and re-deploy the project with
firebase deploy
or
firebase deploy --only hosting
Go to your firebase.json file and make sure that the 'public' key under "hosting" is set to "build" like below:
"hosting": {
"public": "build"
}
It was likely set to "public" by default when you ran firebase init. In which case it would look like this:
"hosting": {
"public": "public"
}
The problem with the default is that React places all your static assets in the 'build' directory when you run npm run build, so that is where you want to point firebase to.
I faced the similar issue, my application was on react built using create react app. I was trying to deploy via firebase but getting the default page of firebase then i figured out that I havent build my application so firebase was not able to find my application html file and hence it was trying to deploy the default one.
I solved it by running yarn build, then when I do firebase init selected "hosting" option . After this step while selecting folder to deploy rather public I selected "build" and this solved my problem and my application got hosted. Hope this helps!!
For Angular 8.
If the name of your project is "ManyuDictionary".
1)Run firebase login.
2)Run firebase init and choose:
a) hosting
b) What do you want to use as your public directory? dist/ManyuDictionary
c) Configure as a single-page app (rewrite all urls to /index.html)? Yes.
Firebase will now write configuration info to firebase.json and project
information to .firebaserc.
3)Run ng build --prod.This will replace the default index.html in dist/ManyuDictionary.
4)Run firebase deploy.
And here is your website [https://manyudictionary.firebaseapp.com].
For Angular 7+, here is the straight forward solution that works for me as of August-2019
Just delete the index.html file at the root of your /dist folder.
Then, copy all the content inside the directory(named like your project main project folder's name) found in your /dist folder
Lastly, rerun firebase deploy
Enjoyed!
Solution that worked for me as of 9/17/2020
1- Finish the firebase init steps.
2- Add this to your firebase.json file:
//"public": should be, dist + project name on your computer
//"site": should be the app name which you created on your firebase cloud
{
"hosting": {
"public": "dist/your-project-name",
"site": "firebase-project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
3- ng build --prod
4- firebase deploy
Firebase asks wehn you type firebase init hosting.
File dist/your-project/index.html already exists. Overwrite?
Press
NO
And you are good to go!
If you follow firebase Hosting steps, but not solve your problem.Then you can follow this step for solving your problem:
Deploy your project in netlify.
Take the live project link from netlify.
Go to firebase > your project > Hosting > Dashboard.
Click the Add custom domain Button.
Paste the netlify project live link in input box.
Click the Continue button.
That's ok.
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
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.
I find that the firebase docs are not clear about what files are uploaded on firebase deploy. For instance if I have a README.md, should I manually put it into hosting ignore?
Here it says "firebase deploy creates a release for all deployable resources in your project directory. ", but it didn't say what is considered "deployable".
In the default firebase.json for hosting settings, we see this:
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
The "ignore" field here can be understood in two ways:
A: ignore if found within the public folder,
B: ignore if found in the whole project folder.
If A, who would put firebase.json or node_modules in public?
If B, then I'll have a ton of various files in the project folder that I'll need to ignore. The most common one is src, but I have all kinds of others.
The "ignore" field here can be understood in two ways: A: ignore if found within the public folder, B: ignore if found in the whole project folder.
It only applies to content under public, which is the root of deployment. Content outside of that folder is not deployed.
who would put firebase.json or node_modules in public?
I don't know. But it's safe to say that someone's local project configuration should probably not be deployed, regardless of where the file ends up. You are free to remove that from "ignore" if it doesn't apply to you. You are of course obliged to add other ignores if you don't want that content under public to be deployed. Or you can take steps to make sure your public folder contains only content to be deployed. It's up to you.
I have some folders in www/web/ which is the root.
It's the following folder: assets/exports/
And it contains a file export.xsl
When I do in javascript:
window.open('/assets/exports/export.xsl');
I'm going to the following link:
http://mywebsite/assets/exports/export.xsl
But I get a: 404 not found
Is symfony somehow protecting this link?
So, my question is, how can I access this file, so it starts downloading for the visitor?
From Symfony Documentation:
Keep in mind that web/ is a public directory and that anything stored here will be publicly accessible, including all the original asset files (e.g. Sass, LESS and CoffeeScript files).
Make sure you put the files in a proper directory: <symfony_root_dir>/web. See below.
Then accessing the http://mywebsite/assets/exports/export.xsl returns the file's content.
Check also your server configuration, virtual host config and read web server configuration guide from Symfony to see if you configured it properly.