Serving single page React app from Google Cloud Storage - google-cloud-storage

I am trying to serve a React app from Google Cloud Storage. I built the React project and uploaded the contents of the build/ directory to Google Cloud Storage. I made sure every file inside is publicly accessible. However when I go to my Google Cloud bucket link http://storage.googleapis.com/BUCKET_NAME/, I get some XML about a permission error:
<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>
Anonymous users does not have storage.objects.list access to bucket BUCKET_NAME.
</Details>
</Error>
Then, I tried to navigate to the URL http://storage.googleapis.com/BUCKET_NAME/index.html, which brings up a blank page. In the JS console, there are errors:
index.html:1 GET http://storage.googleapis.com/static/css/main.9a0fe4f1.css
index.html:1 GET http://storage.googleapis.com/static/js/main.871fec8f.js
These errors look like the BUCKET_NAME is not in the URL that was fetched. However, my built index.html is referencing them relatively, as so:
<script type="text/javascript" src="/static/js/main.871fec8f.js"></script>
I'm not sure what's going on, there are two issues. First is that index.html is not the default served page when going to the bucket URL. Second issue is that the relative paths don't seem to be resolving the right URL. Any help is appreciated.

This was a problem on my end. This method should work.

Related

Deploying my website on firebase doesn't create .json file

This is the message I get when I go to view my website after completing hosting setup.
Welcome Firebase Hosting Setup Complete You're seeing this because
you've successfully setup Firebase Hosting. Now it's time to go build
something extraordinary!
I've done the following (per firebase support):
Run the command, firebase use to make sure the local config is pointed
to the correct Firebase project.
I've made sure that an index.html file is present.
However, I've not been able to do this (per firebase support):
I can't check the firebase.json file to make sure the public folder
(or public attribute) is the same as the location of your hosting
files.
It's because it looks like firebase init failed to create the firebase.json file as they are not in my root directory, so I'm suspecting this to be the problem.
I'm deploying from VS Code, please.
How can I get that file created? I am scheduled to launch this site tomorrow and I can't get any further responses from support (presumably it's cos of the weekend).
Many thanks for any help.

How do I export a website made in Dotcms?

I'm trying to save one of my websites (with all its files) to my pc so i can upload it to another server. I've tried using Httrack and wget but with both I only got a small part of the images and most of it was scattered in a new folder called contentAsset. could someone please help me out?
dotCMS can publish your site statically - set up a static Push Publishing endpoint and then right click and publish your site to it. dotCMS will write out your site and assets statically to a folder under the /assets directory.

FireBase not hosting index.html

So I have followed all the steps and I am sure my steps are correct but still firebase is not hosting my index.html. it is showing default index.html which doesn't even exists. I have only index.html under my root folder and no matter how many times I do 'firebase init', it says that the project is hosted but no json file or dist file or any other file is ever created.
firebase login
firebase init
your-build-command-here
firebase deploy
Tried all the above steps but didnt work. Need some help.
Put your html into a public/index.html directory
and type n when firebase asked you to override your index.html file
follow the steps given in below Url.
https://medium.com/#aleemuddin13/how-to-host-static-website-on-firebase-hosting-for-free-9de8917bebf2
you try these fixes as well.
Firebase not running index.html file

Cannot pass the lighthouse audit for CRA PWA

I am trying to build a PWA with CRA and ran into some issues. However, even though I have registered the user (serviceWorker.register() in index.js) and can store the files in cache storage and run it offline, I still cannot pass the audit and I get (I've built my web app already, so it's running in production mode):
1.start_url does not respond with a 200 when offline Unable to fetch start URL via service worker.
2.Current page does not respond with a 200 when offline
3.Does not register a service worker that controls page and start_url
Which in my opinion is caused by wrong start_url.
I have a manifest.json and index.html in public folder and serviceWorker.js, index.js inside the src folder (inside public). and I get service-worker.js and manifest.json in the build folder after I build the app.
I've tried changing the start_url to "." , "index.html", "/" and some other options, but it did not change anything, still the same error.
Edit
I am also getting this
Network tab in Chrome
Console in Chrome
Error in this line in serviceWorker.js:
fetch(swUrl)
Seems like service-worker.js, manifest.json are not precached. This is weird, because from my understanding it should be precached automiatically. What is the solution here ?

Firebase Hosting - How to prevent access for some files

I have couple of html files in public folder at firebase hosting listed as below.
index.html
content_1.html
content_2.html
app.js
app.css
consider domain name is example.com
as of now user can access all these file using syntax example.com/content_1.html or example.com/app.css.
is it possible to prevent direct access to these files but index.html ? I use these files while building the index.html through jquery
In Apache would have used Order allow,deny and Allow from all at httpd.conf, but not sure how to achieve this on Firebase Hosting.
Thanks in advance for your help
is it possible to prevent direct access to these files but index.html ? I use these files while building the index.html through jquery
You cannot simultaneously provide indirect access to a resource required by a web page and block it from direct access at the client level regardless of the web server being used unless you're assembling things on the server first.