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.
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 have a NextJS app without an integrated api that I want to deploy to Vercel. It works fine when I run it locally yarn run dev and I can also build it yarn run build without any errors. When I deploy it Vercel, however, I receive a 404 Error.
Here is my folder structure:
app/
- components
- pages
- editor
- [id].tsx
...tsx
- public
- utils
- db
api.ts
I am using NextJs 10.0.3.
Here is a link to the deployed app.
I don't have a nextjs config file. My assumption is that the error is caused by the dynamic route but I can't find my mistake. Also, no page is working when the app is deployed as opposed to only the dynamic page.
Do you have pointers on where to look next?
EDIT 1:
Here is a link to the GitHub repo.
EDIT 2:
I found an issue but don't know how to fix it.
This is how my build output looks like on Vercel:
This is how it's supposed to look like on Vercel:
Not sure why the whole _next folder is missing.
I just had this exact same issue.
I have my Next app in a sub directory. I think that might be the cause of some problems.
What worked for me was.
Make sure to pick the right sub directory. Mine had a little Next Js icon on it.
The framework preset needs to be set to Next.js.
Go to Project Settings
Change Framework preset from Other to Next.js
Redeploy the project.
Edited
Try to deploy using
now --prod --force
The --force flag will clear your build cache (in production) and force production push.
If still no working then make sure to add now.json
Also make sure to choose Next.js as Framework preset (and not other). You can find that in Project settings and under Build & Development Settings.
More here: https://vercel.com/docs/concepts/deployments/build-step
My issue was that I first attempted to deploy Vercel through a team. When I created a new Vercel project under my individual Vercel account and deployed the same code, it worked! I hope this saves someone else time because I just lost 3 hours trying to find this. I'm using Next.js as well.
If you are trying to deploy through a team, you might need to configure the team ID in your vercel.json first e.g.
{
"currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}
ref: https://vercel.com/docs/configuration#global/config-json/current-team
I'm pretty new to Firebase, and Web Development in general. Does anyone know how to avoid errors like these in WebStorm?
Ideally I would like to be able to point Webstorm towards some resource so it recognizes these functions. Everything works and this is technically just an annoyance, but I haven't been able to find a solution.
To link Firebase as a library in WebStorm's JavaScript project do as follows:
Hit Ctrl+Alt+S to open Settings page.
Open page Language & Frameworks > JavaScript > Libraries
Hit ADD... button on right
Fill name as firebase
Hit + and Attach Directories
Find your node_modules\#firebase folder inside current project
You can OK twice to confirm and close Settings page
Now your Firebase is recognized by WebStorm and all #types are defined, and you can Ctrl+Click any function, and get code completion!
Best regards!
Adding firebase as a dependency to package.json and then doing npm install should do the trick – WebStorm fill index the source files and provide code completion for Firebase APIs.
Alternatively, you can download firebase-app.js and firebase-auth.js from the CDN and then configure them as a Library in WebStorm as described in the docs.
I have installed cordova-plugin-firebase.
In the root folder of my app I have zipped www folder, config.xml, google-services.json and GoogleService-Info.plist.
I use this file in phonegap build and it builds fine for ios.
I have installed the app in a iPhone 7, but when I run the app it crashes.
In the plugin page I can read (https://www.npmjs.com/package/cordova-plugin-firebase#important-notes):
"IMPORTANT NOTES
This plugin uses a hook (after prepare) that copies the configuration
files to the right place, namely platforms/ios/\/Resources for ios and platforms/android for android.
Firebase SDK requires the configuration files to be present and valid,
otherwise your app will crash on boot or Firebase features won't work.
PhoneGap Build
Hooks does not work with PhoneGap Build. This means you will have to
manually make sure the configuration files are included. One way to do
that is to make a private fork of this plugin and replace the
placeholder config files (see src/ios and src/android) with your
actual ones, as well as hard coding your app id and api key in
plugin.xml."
So I think what is happening is that GoogleService-Info.plist and google-services.json are not placed in the right place.
But, how can I fix this? I don't understand the solution about making a private fork?!?
Any help?
Thanks
I answer myself.
Because of hooks doesn't work in phonegap build I have installed Xcode and Android Studio.
Now the plugin is working in android, but not ios.
I will post a question for this.
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!