I have a newbie question concerning the architecture of my app and what practice is better.
I have a Vue project, lets call it frontendProject (it does not really matter as my problem would have been the same with another framework) with all my file for the frontend of my website.
I recently discover all hidden feature of firebase (like function, deploy etc).
My question is simple, should i use Firebase CLI to install all functionnality like deploy, back end function etc IN the folder frontendProject OR should i create a new project dedicated for firebase and the backend, lets call it backendProject.
What is making me hesitate is the fact that i can deploy wathever is in a folder (which i pointed on dist from vue) in the firebase project, and i don't know if there will be new feature by the futur that need the firebase project to be mix with the frontend. But i'm not sure if this can mess up the project. The front end build only take the "src" folder to build if i'm right ? Which mean i'm not building useless file from firebas project when i build with vue.
If i'm not clear on any point don't hesitate to tell me.
Thanks in advance from the community
Answer from #MichaelBleigh
In root of the project set up firebase,and then put VueJs project in a web folder, then in the firebase.json, point the dist folder of vuejs so that you can deploy easily your project on firebase host
Related
I have a template based on a gulp, I want to host project on firebase, I tried to create a simple project and it went well, but with so many directories and also considering the fact that my main project is built on gulp, I ran into a problem.
this is my project's folder structure:
so, question is how I can modify firebase.json so that everything work fine and I don't have to change the whole gulp file ?
sorry I didn't describe everything in details but I think get the point of my problem.
I do have one Flutter web app, but because of our workflow we use multiple Firebase projects (dev, stage, prod) for hosting. This wouldn't be a big deal, if I don't need different index.html file.
Sadly we use Google SignIn and this will need a meta google-signin-client_id key. This differs between the projects.
What's the best practice to setup this project, so a CI/CD can deploy it without any changes to the index.html before upload? Is this even possible yet?
My own solution, that I found somewhere:
create flavor folders (eg. /web_flavors/dev and /web_flavors/prod)
create a script, which copy the index.html from that flavor folders into /web before the compile
This way you will always have the right configuration within you build pipeline.
My only "problem" is, that I have to maintain the two files, if I need more HTML/JScript code in the index.html.
I have created a web app using python-Flask and frontend using bootstrap. This app allows user to browse the AWS S3 bucket from web browser. Please excuse me this project is still is construction phase and I'm in learning path. I have manually downloaded the bootstrap code and placed it in static folder.
here is the link for the project.
https://github.com/amjad489/pys3browser
I want to know if there is a way where we can run a command it will upgrade the bootstrap and its dependencies.
Thanks in advance for your help!.
You can use Bower for managing your web packages. It is written for node js so you need to install this as well. This is a very common way to manage your frontend packages like jQuery, Bootstrap, ...
I have 2 different projects that I'm working on concurrently. I worked on the 1st project and have a native index.js file for that project. Then, I wanted to write Cloud Functions' code for the 2nd project. So, when I typed 'firebase init functions', it is saying that there's a default project that's selected (even after typing "firebase use project-id"). How do I rectify this?
PS: I completed the whole sequence once and the index.js file got overwritten. Luckily for me, I had a back up for the 1st project.
Edit 2: I changed directories and created a project but it overwrote the index.js file once again in the 'functions' folder. How to fix this? Should I navigate out of the home directory itself?
Configure Multiple Projects
The Web and Admin SDKs are configured by directly passing values to
their initialization functions. For these SDK, you can use a runtime
check to select development or production configuration variables.
On your development machine / project build out each app under a unique folder.
I am not 100% sure to understand the problem but here are two possible scenarios:
1/ You are working in a specific project, writing Cloud Functions (i.e. modifying the index.js file) and you want to work on another totally different project. Just create a new directory (outside of the current project) and initialize a new project there, as explained in the doc here: "https://firebase.google.com/docs/cli/#initializing_a_project_directory"
2/ You are working in a specific project, writing Cloud Functions (i.e. modifying the index.js file) and you want to deploy the same code to another Firebase project. Just do firebase use <alias_or_project_id> as you have mentioned and then firebase deploy (or firebase deploy --only functions). Of course, in this scenario, you may need to adapt some other parts of your code when swapping from one project to the other, like for example the JavaScript config object.
If this answer does not answer your problem, please give some more details.
there is yeoman generate for ionic and firebase and I know how to make them with yeoman-generator BUT I want ionic + firebase project.
some solution[1] [2] told me that making ionic project and add firebase js file by my hand, but I think firebasee can be added by bower or something easy way to go though.
should i generate inoic project and add firebase though bower?
should i generate firebase project and add ionic though bower?
which one is better way to make it? and what command should i use for this?
TLDR: Long story short, don't use yeoman. It's pretty easy to do it without yeoman.
I'd recommend setting up an ionic project, add the firebase.js files, link to it in your index.html, and add the firebase components to your module/relevant controllers. You'll find great step by step instructions here:
https://www.firebase.com/docs/web/libraries/ionic/guide.html
They won't tell you this up front, but you'll also want to look at the angularfire API here: https://www.firebase.com/docs/web/libraries/angular/api.html
In the Ionic guild they'll show you $firebaseArray, but that's it. For things like $firebaseObject, those docs are found in the angularfire API.
I'd forget yeoman to be honest. I'm sure you can set up custom projects for yeoman, but I wouldn't bother.