Confused With Node Modules For Production - javascript

I am building a small extension plugin for use with Photoshop.
Part of the app I am using Firestore to store some user details.
I have installed the Firebase v9 SDK using npm i firebase and the app seems to be working fine so far.
When I packaged up the app, its now sitting at over 60mb in size which is due to everything in the node_modules folder. most of which I probably don't use.
Is there a way I can just use what I want from the node_modules folder and delete the rest?

Related

How to add firebase sdk to React Native?

I am really close to the solution but I still don not get it. I want to start a new React Native project and use Firebase as a database and image storage.
The steps I took:
I installed React Native
I did "npm install#react-native-firebase/app"
I created a new project "expo init react-native-firebase"
I created a new FireBase project, then I started my project with Metro Bundler.
And after that it is unclear that how can achieve that my folder struckture looks like this with all the firebase sdk's in it:
My folder structure is missing all the dependencies for Firebase, like the android and ios folders etc.. I tried to cd into my project in the terminal, then ran "yarn add firebase", but that did not work. I can see the necessary files are in "C:/MyReactNativeProject/node_modules/#react-native-firebase/app/".
Currently my project looks like this:
What am i missing? :/
Today, you can't have the Firebase react-native sdk with expo
As the react-native-firebase documentation says, you need to eject your app if you want to use this library with expo. Be mind that eject action is not reversible.
But wish to make use of features such as Realtime Database (without offline support) & Authentication, you can still use the Firebase Web SDK in your project.
To use Firebase in expo Project, follow their docs
👉 https://docs.expo.dev/guides/using-firebase/

Using the Google Firebase app deployment with Aurelia how do you setup and deploy just the packed assets?

Currently I am trying to setup a successful configuration with Aurelia and Google Firebase. The intent is to deploy just the compiled assets as a Google Firebase app.
I am a newbie with these new web frameworks since I am recently entering the world of compiled NodeJS apps and was wondering how these frameworks can coexist nicely and be deployed with the minified HTML, CSS, and JS.
Also, I have been using the Aurelia CLI up to now according to their documentation examples, but I don't know if this will work for Firebase deploys.
And Lastly, do I need to keep the Aurelia and Firebase directories separate, or can I just install aurelia-cli and the firebase-tools in the same app space safely?
You'll need to deploy the compiled assets, which means either:
Changing the platform.output property to match the public path in the hosting config of firebase.json, or
Do the reverse and change the public directory in firebase.json to match the existing output path (likely dist)

Vue.js PWA Plugin not loading service-worker.js when deployed to subfolder (Github Pages)

I used the Vue CLI to create a new Vue project, and selected PWA support when using 'vue create'.
I also used the vue-gh-pages plugin to deploy the app to a github pages URL.
The problem is that it's attempting to load
http://myusername.github.io/service-worker.js
..instead of:
http://myusername.github.io/app-name/service-worker.js
Inside of /src/registerServiceWorker.js I can noticed:
register(`${process.env.BASE_URL}service-worker.js`, {
But when I attempt to set the BASE_URL in vue.config.js with:
module.exports = {
baseUrl: '/app-name/'
}
..it breaks the links from all of the other scripts.
The app works when I run it locally, along with the PWA support. Anyone know how to get this to work with sub folders / github pages?
Thanks
I think you are forgetting to build your project before you deploy it. If you are running a Vue CLI that uses a build process, you should be running npm run build which will generate a dist folder that has all your resources as a static bundle.
You should commit that to your gh-pages branch and serve that instead.
I'm saying this because process.env.BASE_URL is something that the node.js side of things understands. GitHub pages won't be populating that for you at runtime since it only serves content statically.

How do I find out what packages I had installed in my previouse meteor app?

I recently upgraded to the latest version of meteor. The currently installed meteor version is Meteor 1.4.1.
In trying to continue developing my app (from the previous version) in the upgraded meteor environment, I figured I would create a new app (meteor create newApp) then copy (the code from the original app) and paste (the code into the newly created files) then run it.
I quickly released that I have to re-install the packages that my original app was depending on or else I get error messages.
The issue here is I don't remember the packages my original app is dependent on. I still have the original app folder, which I created in the previous meteor version. Is there a way to extract the list of packages from the original app?
Alternatively is there a way I can merely continue developing and running the original app without having to create a new app and copy and pasting the code? If so how do I do this?
Any help is greatly appreciated
In the app root go to ./meteor directory. In that folder open packages files. All your installed packages names will be there.
Alternatively, you can use meteor list command in the app directory.
Answer to the second part, yes you can continue developing the same app. The packages will be upgraded accordingly. You may face some issues with bcrypt if you are using accounts-passwords package but there are workaround to get over that.

How do I install Meteor Atmosphere packages locally so I can make modifications to it?

I am trying to get up and running with Meteor and seeing what it can offer, while I like it overall, it seems it's a very very rigid system.
I set up a small testing setup using Velocity, it opens a small overlay window on the side which has a class of "velocityOverlay". The overlay is really small and makes error stack traces wrap. All I wanted to do was to edit the css of the "velocityOverlay" and increase the width.
I somehow (after wasting time) managed to find that Meteor is actually putting all the packages in my user directory by default, once I found that, I found the needed css file...
velocity_html-reporter/.0.5.1.aykpxq++os+web.browser+web.cordova/web.browser/packages/velocity_html-reporter/lib/client-report.less.css
And I did a small edit to the width, next thing you know the meteor app crashes when trying to launch using the "meteor" command throwing a "Error: couldn't read entire resource" error. I can't even edit the bootstrap.css file I installed using "ian_bootstrap-3".
Further more, I can't find any way to install packages locally just for my particular project, what if I wanted to modify a package only for my particular project? this is very easy to do in vanilla Node.js, you simply don't use the "-g" when using "npm install".
To add to that, within my project root, there is another ".meteor/local/build/web.browser" folder with most of the global package files replicated again. When does Meteor use which? This is very confusing.
You can run a package locally very easily.
Download it from Github (for example) and put it in the packages/ directory of your application like this /packages/package_name.
Then add it to your application with the same meteor add package_name command as usual.
Meteor will automatically look in the local folder before anywhere else and compile the package with the rest of your code.
This allows you to do any modification you want on the package and test it locally before publishing it to the registry.
Also, folders located in .meteor/local/* are used for building purpose only and are generated automatically by Meteor. So it is not the best place to edit the files!
This worked for me https://atmospherejs.com/i/publishing. mrt link-package didn't work for me, might just be outdated code.
Steps:
Download (or clone) package from GitHub to local dir
Stop meteor if running
2.1. Make sure you have a packages folder: mkdir packages
Locally link your package:
3.1 If you have mrt installed: Run mrt link-package /path/to/package in a project dir
3.2 If you don't have mrt: ln -s /path/to/package packages/package
Then run meteor add developer:package-name, do not forget to change package name
Run meteor in a project dir
From now any changes in developer:package-name package folder will cause rebuilding of project app
Download the package and place it in new package directory in your project root.
open the package.js inside the downloaded package and remove the author's name in the property "name:"
e.g: - name:'dburles:google-maps' to name:'google-maps'
then run
meteor add google-maps

Categories