I have finished creating a react app using typescript and below is what I did to deploy the app to firebase
yarn build
firebase init
firebase deploy
Now I have pointed the public folder to my build folder as below
"hosting": {
"public": "build",
"ignore": [
I am using typescript in the react app
Yet, whenever it deploys I always get a blank page.
What am I doing wrong?
OMG! I'm so sorry guys..It was my bad.The deploy is working flawlessly, it was a bug from my end.
I am using react router and I forgot to setup a default route before deploying that's why I was getting a blank page.
I have setup a default route and everything is working well as expected.
Thanks all for your input.
Related
I am trying to deploy my react app on firebase but i get this image shown all the time.
Steps I did
firebase init
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
What do you want to use as your public directory? - public
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) - No
? Set up automatic builds and deploys with GitHub? (y/N) - No
File public/index.html already exists. Overwrite? (y/N) - No
Then I get `✔ Firebase initialization complete!
firebase deploy
then I get `✔ Deploy complete!
when i check the URL mentioned I see the message as shown in the screen shot Firebase Hosting Setup Complete.
When I also tried changing the path for public to "public": "public/firebase-auth-test",in Firebase.json file
{
"hosting": {
"public": "public/firebase-auth-test",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Definitely I am doing something wrong but unable to figure out.
this is my project structure if that helps
Please provide more details about your react project build.
i did a small extercise project to deploy a vue js application and you need to proper build your frontend project and then call the firebase hosting deploy.
Check the package.json and other relevant files to fix your setup.
here is .web link: https://al-realtor.web.app
here is my .firebaseapp link: https://al-realtor.firebaseapp.com
The Web showing me Site not found!
But the FirebaseApp showing everything is all Right
I am Using in my code:
React
Tailwind
FontAwesome
React Router
and there is no error on my code. It running on netlify and .firebaseapp but not only .web app
There are usually 3 situations where people are making mistake.
They set up bad public folder when firebase init. This setup is in firebase.json file.
"hosting": {
"public": "dist/public",
...
}
They build project then init and by mistake when init they overwrite index.html file.
They have server side rendering app. Hosting should redirect requests to a firebase function but what they not know is that every home page request is equal to example.com/index.html when hosting has this file it not trigger function and return file. So you need to rename it before deploying.
Might be late to this but for anyone having this problem. The solution is just to wait. Most likely the google servers near you don't have the latest information about your site. You can usually access the site anyway by using USA VPN.
I have just noticed that in my react app the urls don't work when user refreshes the page. The weird things is that locally everything works fine. I have created the app using create-react-app. I was reading the React-router urls don't work when refreshing or writing manually but since the build process is run automatically through github actions it is not clear how to solve this. Can anyone suggest a quick solution?
I had the same problem with GitHub pages and this is because the routes don't exist on the server and are handled by the frontend router.
I solved it by replacing the 404 page with my index.html. The index.html will load in react-router which in turn will handle the routing.
You could try to replace or redirect the Azure 404 page to your index.html.
The answer to the problem is fallbackroutes found on this page https://learn.microsoft.com/en-us/azure/static-web-apps/configuration.
Add staticwebapp.config.json at the root folder of your react app with the below content and push to git:
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
Add this file
routes.json
with the below code
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}
I'm building a React plugin in Wordpress (for my own purposes).
I've used 'create-react-app', then 'yarn build' and then upload the production 'build' folder into Wordpress to a custom directory '/apps/my-custom-app/frontend/build'.
I've used this tutorial to create a Wordpress plugin that gets all the assets from the 'build' folder and renders the React App in the target div on a Wordpress page.
All of this works as expected, the React App renders on my Wordpress page "https://mywebsite.com/wp-page-slug/" and the React routing/navigation works fine ... but only within the React App.
The issue is that if I'm on a React page (except for the root slug) and refresh the browser, I end up getting a 404 error.
After researching on StackOverflow, I've found that this is resolved using the .htaccess file.
I've used this function from the solution in this article ...
add_action( 'init', 'my_custom_app_frontent_rewrite_rule' );
function my_custom_app_frontent_rewrite_rule() {
add_rewrite_rule('^react-app-root-url/(.+)?', 'index.php?pagename=wp-page-slug', 'top');
}
... to add a rewrite rule, but there's something wrong. When I enable it, the entire frontend of the website goes blank (white screen).
Is the 'add_rewrite_rule' not correct? I don't know what's wrong here.
Wordpress Permalinks are currently set to 'Post Name'.
The Wordpress page slug is '/wp-page-slug'.
The React App Router Base URL is '/react-app-root-url'.
And the homepage property in the React package.json file is '/apps/my-custom-app/frontend/build'.
Any assistance would be appreciated, thank you.
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])