Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Firebase - Putting files in multiple directories

Tags:

I'm attempting to organize my project to make it more maintainable. I have a large number of html templates and am forced to put them all in the public directory. I really wanted to organize it like this

public directory   views     index.html     register.html     terms.html     privacy.html     support.html   stylesheets     styles.css   scripts     script.js     authentication.js

but instead it looks like this

public   index.html   register.html   terms.html   privacy.html   support.html   script.js   authentication.js   styles.css

Here is my firebase.json file

   {   "firebase": "funmathgame",   "public": "mathgame",   "ignore": [     "firebase.json",     "**/.*",     "**/node_modules/**"   ] }

Here is the error message I get

Page Not Found

The 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.

The first structure is better because it separates the code. This structure works whenever I run the files in my text editor. However, it does not work whenever I deploy to firebase.

As an example, this is how I would reference my stylesheets

<head>   <title>Frequently Asked Questions</title>   <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>    </link> <link rel='stylesheet' href='../stylesheets/styles.css'></link>

In the above directory structure, I am in the public/views directory. I use .. to move back one directory into the public directory and then forward into the stylesheets directory. However, here my index.html file is not in the public directory, but rather the public/views directory.

I have looked at the Firebase website, but still can't find any ideas.

https://www.firebase.com/docs/hosting/guide/full-config.html

like image 411
Richard Hamilton Avatar asked Jan 16 '16 16:01

Richard Hamilton

People also ask

What file format should I use for multiple sites in Firebase?

If your firebase.json file defines the configuration for multiple sites, use an array format:

How do I share a firebase project across multiple sites?

Share project resources across multiple sites. You can set up one or more Firebase Hosting sites in a single Firebase project. Since the sites are all in the same Firebase project, all the sites can access the other Firebase resources of the project.

What does Firebase look for when deploying to a public directory?

When you deploy to Firebase, Firebase is looking for an index.html file inside your public directory. This public directory is also known as the root directory. I was working with an angular app, and I was simply using the wrong paths in my partials.

How to initialize Firebase Hosting in Firebase?

Let’s initialize firebase hosting. If you successfully logged in then you will have a menu to chose a firebase project in your account. You will be asked to select a folder that contains files to be hosted. You can give a folder name that is in the root directory. public is the default directory name.

2 Answers

If you're willing to have /views/index.html in your app's address bar, you could just do a redirect from / by adding a redirects element to your firebase.json. Also it looks like your public attribute may be incorrect. So change your firebase.json file to:

{   "firebase": "funmathgame",   "public": "public",   "ignore": [     "firebase.json",     "**/.*",     "**/node_modules/**"   ],   "redirects": [     {       "source": "/",       "destination": "/views/index.html",       "type": 302     }   ] }

This way, any user who goes to https://funmathgame.firebaseapp.com/ will be redirected to https://funmathgame.firebaseapp.com/views/index.html and all relative URLs will be resolved correctly.

like image 167
heenenee Avatar answered Sep 20 '22 13:09

heenenee

This was a difficult problem for sure. When you deploy to Firebase, Firebase is looking for an index.html file inside your public directory. This public directory is also known as the root directory.

I was working with an angular app, and I was simply using the wrong paths in my partials. This was pretty tricky though.

I had to set up an angular controller, that injected the $document dependency to get the title of a page. If the title of the page matched the title of the root page, I would use ng-href to prepend the views directory to the relative url.

Otherwise, if you were in the views directory, and searched for more views, it would show a path like views/views/page1.html. That's why we'd have a different ng-href conditional for these.

This is what my navigation looked like

<ul class='nav navbar-nav'>          <li><a ng-href="{{ page == home ? 'views/help.html' : 'help.html' }}">Help</a></li>         <li><a ng-href="{{ page == home ? 'views/achievements.html' : 'achievements.html' }}">Achievements</a></li>         <li><a ng-href="{{ page == home ? 'views/scores.html' : 'scores.html' }}">Scores</a></li>         <li><a ng-href="{{ page == home ? 'views/shop.html' : 'shop.html' }}">Shop</a></li>         <li><a ng-href="{{ page == home ? 'views/faq.html' : 'faq.html' }}">FAQs</a></li>         <li><a ng-href="{{ page == home ? 'views/related.html': 'related.html' }}">More Games</a></li> </ul>

In the end, my directory structure looked like this

public   assets     stylesheets       styles.css   views     partials       scripts.html       header.html       footer.html     page1.html     ...   scripts     controllers     script1.js     ...   index.html

It is possible to place the index file inside the views directory as well, if you change the firebase.json file.

{     "firebase": "firebase-app",     "public": "root/views",     "ignore": [       "firebase.json",       "**/.*",       "**/node_modules/**"     ] }

You just change the public keyword in the firebase app. It took a lot of fiddling around, because I forgot I had to conditionally change the paths. Also, to navigate back into the previous directory you would have to do something like ../

like image 20
Richard Hamilton Avatar answered Sep 18 '22 13:09

Richard Hamilton
Sign in to Comment

Related questions

How can I evenly balance text over multiple lines?
How to debug a forked child process using CLion
JPA Hibernate Persistence exception [PersistenceUnit: default] Unable to build Hibernate SessionFactory
Firefox - document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
Cannot npm install due to node-gyp: binding.gyp not found
Keras retrieve value of node before activation function
Performance of various numpy fancy indexing methods, also with numba
How is JobIntentService related to JobService?
Why does `"foo".bar = 42;` throw `TypeError` in strict mode in ES6?
Example of using dput()
In ASP.NET Core SignalR, how do I send a message from the server to a client?
conda equivalent of pip install --user

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!