I am new to using Firebase and after I developed a react project, I tried to deploy my application with firebase but it doesn't work. Firebase is already connected to my app for the database.
This is what I did to deploy it:
firebase login
firebase init (I tried all possibilities, I always chose HOSTING
and then as a public directory I tried with public / build / dist )
firebase deploy
but still, it gave me 2 links as following :
and when I click to the Hosting like, this is what it shows (not the app) :
Also, this is what my firebase.json file looks like (when I use build as a public directory)
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
maybe I do have to do some changes in this file ?
I also tried firebase serve to test it locally, and it shows me the same page (welcome page).
But when I try my app with ng serve, it works.
Could you help me please ? Thank you !
I think you may be opening the wrong url. If localhost says the setup is complete, you shouldn't expect to see your hosted website in localhost, but rather at the link which firebase deploy provided for you.
In your case, that should be https://gouvproject-64316.firebaseapp.com (take a look at Hosting URL in your console or terminal).
Keep in mind that localhost addresses are hosted locally within your device so that means no one else has access to them but you. This is what you do when you setup a server on your pc (i.e. through node.js) . On the contrary, hosted websites are saved in a server remotely by a hosting service provider (in this case done by Firebase through firebase deploy) and are given a public worldwide-unique address for anyone to be able to visit them.
I visited the page url and your website seems to be hosted just fine, by the way! If you need help in anything related, don't hesitate to ask.
Hope this helped, Panos :).
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 an existing ASP.NET Core application (that uses razor pages) and I am trying to convert it, one component at a time, to React until I can completely make it a SPA. The idea is to create an entry point for each of my razor pages until I can combine them all into one SPA. I have most of this working except for the use of webpack-dev-server to serve my bundles. The problem I am having is the ASP.NET app runs on port 44321 and the dev server runs on port 8080 so the script tags in my .cshtml files cannot see the bundles that are being hosted from webpack.
I can temporarily change them from:
<script src="./dist/[name].bundle.js"></script>
To something like:
<script src="http://localhost:8080/[name].bundle.js"></script>
To get around this, but this is not long term solution.
I have created a sample application to showcase what I am trying to accomplish here: https://github.com/jkruse24/AspNetReact.
Is there any way to either get my ASP.Net application to listen on the port that webpack-dev-server is serving to (without changing my script tags) or to have my webpack-dev-server serve to the port that my ASP.Net app is running on?
I have tried to use the .NET CORE SPA middleware (Microsoft.AspNetCore.SpaProxy) but either I have not configured it correctly or I am misunderstanding what it is used for. Upon adding in the below code (which is commented out in my github sample) my application still looks at the .\dist directory for my bundles (which are still there from running actual builds).
if (env.IsDevelopment())
{
app.UseSpa(spa =>
{
spa.Options.SourcePath = "./ClientApp";
spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
});
}
I ended up getting this working using the .NET Core SPA Middleware. When I originally tried to used the middleware, it was working fine, but I didn't have my webpack dev server configured to serve my bundles to the correct location.
As you can see above, I was serving them to
http://localhost:8080/[name].bundle.js
when they needed to be served to
http://localhost:8080/dist/[name].bundle.js
My problem was that my webpack publicPath was not set correctly. I made an update commit on my repository here. More specifically, this was the file diff that solved my problem.
A complete newbie to AWS but I have a client project I am trying to host on Elastic Beanstalk (Angular App)
Currently, I have a spring boot app that I managed to deploy successfully to AWS EB yesterday which serves the front end the data it needs based on API Calls. I am now trying to upload the front end side of the project into its own S3 Bucket and host it as a static website. As far as I am aware, I have made all access to the bucket public, but still get the 403 Forbidden - Access Denied.
This is what I get in the browser after following the link generated by AWS which apparently serves my static site:
The steps I have taken are as follows:
I have created a new Bucket called three-counties-medical and added the project folder containing the built files from ng build --prod. These get uploaded successfully.
The bucket contents are as follows:
Once the bucket was created correctly with all of files added successfully, I then went to the Bucket Properties, scrolled down to the very bottom to Static Website Hosting and clicked Edit. I then enabled static website hosting and configured my index.html as the index page of the static website. The config looks as follows for the Static Website Hosting:
However, when I click the link created by S3, I get the 403 forbidden displayed in the browser.
In the Permissions Tab, I have turned Block all public access to OFF:
Something else I have noticed is that the Bucket Policy is completely blank with no Json.
Whether this is correct I am unsure, but from reading various sources online, it became apparent that the site needs to be public so it can be seen from anyone (Im guessing?)
I have also tried to make every file accessible/public by clicking on the file going to the Actions dropdown and selecting - Make Public. However, the error still remains.
I have tried looking at this post also:
Similar Error
If anyone has any answers please let me know. There is obviously some problem with the deployment of the app or some sort of config.
Cheers!
*** Edit ***
I have now added the following Bucket Policy from this answer Answer
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": "arn:aws:s3:::three-counties-medical/*"
}
]
}
But now I get a 404 - KeyNotFound index.html:
But index.html definitely exists in the bucket!!
Ok so it turns out the issue was that I didnt have a Bucket Policy created. I then solved the 404 by deleting the contents of the bucket and then re-uploading the files in to the bucket rather than a folder containing the files. Guess this is why it could not find the index.html file!!
If anyone has any issues like this then please ensure you have a Bucket Policy. You can use the one in this answer!
We created a Linux Web App in Microsoft Azure. The application is static written with React (html and Javascript).
We copied the code into the wwwroot folder, but the application only showing only hostingstart.html and when we try to get page index.html we have this error:
Cannot GET /index.html
We tried with a sample of Azure in GitHub (https://github.com/Azure-Samples/html-docs-hello-world) but the error is the same.
The url is this: https://consoleadmin.azurewebsites.net/index.html
Last week the application was running correctly.
We forget to do something?
MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.
I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question. While the accepted answer is a nice workaround (but requires more work than just adding the index.js file), there's something a simpler than that.
You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:
The web app by default points to opt/startup/hostingstart.html
It also puts a hostingstart.html in home/site/wwwroot
When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.
So how to change the default pointer? It's simpler than it looks:
Go to Configuration tab on your web app and add the following code to startup script:
pm2 serve /home/site/wwwroot --no-daemon
If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:
pm2 serve /home/site/wwwroot --no-daemon --spa
This will tell the web app to serve wwwroot folder. And that's it.
Image for reference:
Screenshot explaination
PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.
Ok you are gonna love this. This happened to me today also. Same exact thing.
I am pretty sure the azure team flipped a switch somewhere and we fell through a crack.
I found this obscure answer with no votes and it did the trick (with a little extra finagling)
BONUS! this also fixed my router issues I was having only on the deployed site (not local):
Credit: #stormwild: Default documents not serving on node web app hosted on Azure
From #stormwild's post see here:
https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
Steps:
Go to your azure portal, select your app service and launch ssh
In ssh terminal, navigate via command line to /home/site/wwwroot
create index.js there with the following code:
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup
Be sure to restart your app service if it doesn't do so automagically
A workaround, I changed the webapp stack to PHP 7
Another solution would be to add a file called ecoysystem.config.js right next to your index.html file.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
This will tell pm2 to associate all requests to index.html as your app service starts up.
Very helpful information here: https://burkeholland.github.io/posts/static-site-azure/