I'm in trouble releasing my React app with firebase.
404 error page show when access to https://[myAppId].web.app/reactApp and https://[myAppId].web.app/reactApp/build
The output directory by building is public > reactApp > build
I'd like to run reactApp and vueApp at the same time in public directory.
(otherVueApp in public directory already works properly.)
Directory structure is like this:
ー public
ー otherVueApp
ー reactApp
ー build
ー firebase.json
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"functions": {
"port": 5001
},
"ui": {
"enabled": true
}
},
"functions": {
"source": "functions"
}
}
Where and how should I change the settings in reactApp?
Thank you in advance.
Related
{
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": [
{
"public": "dist/nur",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "nur",
"public": "dist/nur",
"ignore": [
"**/.*"
],
"headers": [
{
"source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
}
]
},
{
"source": "/#(ngsw-worker.js|ngsw.json)",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
"storage": {
"rules": "storage.rules"
}
}
Tried firebase deploy command through Firebase to deploy the changes.
Deploying to 'nur-beta'...
i deploying database, storage, firestore, hosting
i database: checking rules syntax...
database: rules syntax for database nur-beta-default-rtdb is valid
i firebase.storage: checking storage.rules for compilation errors...
firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
cloud.firestore: rules file firestore.rules compiled successfully
After all resources deployement it gives assertion failed message.
Error: Assertion failed: resolving hosting target of a site with no site name or target name. This should have caused an error earlier. May I know what I'm missing while deploying the changes to already LIVE web-site hosted under Firebase Hosting.
There is no problem with your JSON file.
For deployment to firebase hosting first of all you have to build your project then you push your project to firebase hosting
command to build the project and deploy it to firebase
For angular use the ng build command in the terminal of your project location.
after building run the firebase deploy command
See the Magic
I ran into this issue recently and what worked for me was adding the target name in firebase.json:
"hosting": [
{
"target": "TARGET_NAME",
....
}
]
Please note that this is a hotfix. I have not fully investigated the root cause, but it helped me to deploy the app when I needed it.
I had the same issue, I fixed it by running
firebase init and reinitializing the project.
Is it possible to add a NextJs app as a subdirectory to a ReactJs app on firebase hosting? I have the main app already deployed to firebase with a domain and I want to add a NextJs app to its subdirectory "/blogs" for SEO purposes. Is this possible? If yes how? I have tried rewrites but did not get any success.
Update
I managed to make it work a little with the following:
The directory:
.
+-- _projectFolder
| +-- firebase.json
| +-- .firebaserc
+-- Reactjs Files...
+-- nextApp
| +-- server.js
| +-- Nextjs files...
firebase.json:
"hosting": [
{
"target": "blog",
"public": "./nextApp/public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nextServer"
}
]
},
{
"target": "main",
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/blogs/**",
"function": "nextServer"
},
{
"source": "/blogs",
"function": "nextServer"
}
]
}
],
"functions": {
"source": "./nextApp",
"runtime": "nodejs16"
}
}
The code for the server.js
const { https } = require("firebase-functions")
const { default: next } = require("next")
const isDev = process.env.NODE_ENV !== "production"
const nextjsDistDir = require("./next.config.js").distDir
const server = next({
dev: false,
//location of .next generated after running -> yarn build
conf: { distDir: nextjsDistDir },
})
const nextjsHandle = server.getRequestHandler()
exports.nextServer = https.onRequest((req, res) => {
return server.prepare().then(() => {
return nextjsHandle(req, res)
})
})
/*
firebase-admin,firebase-functions
require these plugins, install them
*/
The next.config.js has a basePath of basePath: "/blogs"
The only problem now is somehow the next.config.js is not being detected when the build is live on firebase. None of the Image domains or the basePath is working there, these work fine locally, is there any change I need in the server.js file?
Actually the config seems to be fine. You can only add a /** for taking all requests.
{
"hosting": {
"target": "main",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/blogs/**",
"destination": "/nextApp/index.html"
}
]
}
If this is a nextjs app i would suggest to check that you set the base path correctly -> documentation
If you would like to use multiple different frameworks in one project you might want to consider using Astro.
This video by Fireship explains Astro really well.
I have a ReactJS app I built that works locally , I followed the instructions on the Firebase site
https://medium.com/#devesu/host-a-react-based-website-free-of-cost-with-firebase-hosting-and-connect-with-your-own-domain-53146731807f
and everything went to plan ,inthat there were no errors however when I follow the link provided
https://hydrometric-54ec0.web.app
or
https://hydrometric-54ec0.firebaseapp.com/
I get a default Firebase page and not my app, I think my firebase.json is missing something here it is below
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you are deploying any React project in Firebase. look for the below steps.
Once the react build is done through npm run build
Do firebase init
Select Hosting
Then CLI will ask for public directory- Write build and hit enter.
rewrite all urls to /index.html- Type Yes
File build/index.html already exists. Overwrite?- Type No or else it will overwrite your index file with firebase default index.
Before firebase deploy do the following things.
Replace this code in firebase.json
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Then inside your react package.json
do blank path for homepage
"homepage": ""
Now yor are good to go for firebase deploy
I use create react app hosted on firebase hosting.
Even with changes pointed in docs https://facebook.github.io/create-react-app/docs/deployment#firebase-https-firebasegooglecom the latest changes are not picked.
My firebase.json config file.
{
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [{ "source": "/service-worker.js", "headers": [{ "key": "Cache-Control", "value": "no-cache" }] }],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Any help pls
I've deployed my angular app to firebase. I can see the sign in page fine but I get the following error when I reload the page:
This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.
Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.
So as the error suggests I checked my firebase.json file and it displays this:
{
"firebase": "******",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Here you can see that my public folder is my dist folder. This dist folder is actually where I place all of my files (css,js,html and the index.html) when gulp builds it all. The folder structure looks like this:
dist
css
images
js
templates
index.html
So the destination folder above does have an index.html page - so why am I getting this error? Angular should be stepping in here and handling all routing but that doesn't seem to be the case.
EDIT
I fixed the problem - this problem is caused by Firebase (indeed all servers I think) believing that each Angular state is a folder which should contain its own index.html file - obviously this isn't the case.
What needs to happen is for it to only refer to our index.html in the root of the folder. To do that you need to modify your firebase.json file to the following:
{
"firebase": "app-name",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}]
}
The important parts here are the rewrites and the source objects. Refer to the firebase.json explanation page for more info on this: firebase.json
2018 and had the samed problem. Katana24 gave a good answer but since then, firebase updated a bit. Here is the Katana24 answer updated :
firebase.json:
{
"functions": {
"predeploy": [
"npm --prefix \"%RESOURCE_DIR%\" run lint"
],
"source": "functions"
},
"hosting": {
"public": "dist/YOURAPPNAME",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}
],
"storage": {
"rules": "storage.rules"
}
}
}
If you use firebase-tools you can hit y (yes) at the question:
Configure as a single-page app (rewrite all urls to /index.html)?
in `firebase.json`, `hosting` section add the `rewrites`
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ],