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.
Related
I am using intl-tel-input in my project which I installed using npm. Every thing seems to work fine when I test using Firebase emulators but it stops working post deployment.
Upon checking the Sources tab in Chrome dev tools, I can see that the module is not properly included. (Pls check images) However, I am completely unable to figure out why. Please help!
Emulator Screenshot with the Telephone Input field working fine.
Screenshot taken post deployment with the Telephone input field broken.
Source File - intlTelInput.js located at /node_modules/intl-tel-input/build/css/intlTelInput.js
Source File - intlTelInput.css located at /node_modules/intl-tel-input/build/js/intlTelInput.css
By default Firebase ignores node_modules directories when deploying.
There are a few options you could use to resolve this.
Use a build tool like Rollup or Webpack to generate bundles that include node dependencies.
Copy required node_modules files to a different directory like assets and load them from there.
Update firebase.json to not ignore node_modules on deploy. Note that this will probably greatly increase the size of deployed applications if you have any number of node packages.
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.
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
I'd like to do the inverse of this question/answer:
How to include TypeScript files when publishing?
The thing is that I'm trying to publish an ASP.NET MVC 5 Project. Unfortunately the dreaded Visual Studio and the hungry Jack Typescript interpreter ignores any tsconfig.json file and decides to go deep down and look for any .ts file that is not accompanied by a .js. I have lots of npm packages nested down and some of them have uncompiled typescript files.
Funny thing is, that they are not included in the project (not even an exclamation mark). (I even checked for the .csproj and no files were found).
Is this a bug? How can I prevent this from happening? Using VS 2015.2 (Update 2).
I had a very similar issue. Publish kept failing because it couldn't find foo.js as it wasn't in the same directory as my ts/tsconfig files, even though outDir was set to another location. I don't know if it is a bug or not but I couldn't figure it out using the tsconfig. Instead, I was able to get things working by using the inbuilt TypeScript Build settings instead.
First, I deleted all tsconfig files from my project (I made sure I kept a backup just in case). The TypeScript Build was originally greyed out because I had the tsconfig files in my project.
Next, I created a new folder directly under Scripts to save the js files into.
I then went to Project Properties and selected the TypeScript Build tab. Under Output, I checked the Redirect JavaScript output to directory and browsed to the newly created folder. I repeated this for all build configurations.
Finally, I included the new folder in my project and then built. Folders and files which aren't included in the project can be seen as a ghost icon in the Solution Explorer if you have Show All Files icon selected. I think that if you have multiple TypeScript projects with their own tsconfigs, the file structures are replicated under the chosen output directory but I haven't tested it in many cases so I'm not certain.
Obviously I had to redirect my script bundles to the newly created js structure.
When I first followed this process, I got a few build errors mainly due to my own daft mistakes in my TypeScript code which I'd set the tsconfig to conveniently ignore. Another error was multiple references for objects, which I managed to fix by deleting the definitions files and making sure that the Generate declaration files option was unchecked in Typescript Build. Once I fixed those issues though, I was able to publish without that annoying error - happy days!
Hi i just finished installing asp.net core1 so got introduced to npm , bower and nodejs after researching a lot i chose to go with angular2 .
now my problem is that i have never used gulp, grunt etc even though i know how it works and why to use it. there are lots of instructions on web to setup angular2 project with mvc6 but not explaining the thing which is new with mvc6.
anyways i dont want to get myself confused with gulp/grunt etc right now so i am just copying files from node_modules to my script folder and giving it path but it works almost for everything related to angular.
for eg.
import {anything} from 'angular2/core' or from RXjs etc(this import is from node_modules) and i have to give a path in my index files where i have copied all the files.
but when i try to include some plugins like ng2-select, ng2-bootstrap or toastr etc it doesnt work the way it should it throws errors.
my question is do i need to copy whole folder from node_modules to my script folder and then linq it or what , how it works?
Do I need to copy whole folder from node_modules to my script folder and then link it or what, how does this work?
I have an example in my blog post of what you should be doing in this situation. Ideally, you will use a gulpfile.js to orchestrate your desired file needs. For example, if you're looking for Angular2 it is rather simple. You create a gulpfile.js by adding a new item to your project. In that file you write some simple "tasks" that automate this move for you. You look in node_modules and move over anything that you need. For Angular2 I move over the following .js files (in this example):
var angularJs = [
'./node_modules/angular2/bundles/angular2.js',
'./node_modules/angular2/bundles/router.js',
'./node_modules/angular2/bundles/angular2-polyfills.js',
'./node_modules/angular2/bundles/http.js'
];
So to answer your question more directly, no. You do not need to copy the entire folder -- just the files that your application needs.