With npm being the recommended packaging system as of Meteor 1.3, I now have both server-side and client-side packages in my node_modules directory. Meteor attempts to bundle all of these into one huge modules.js file.
The only way to get meteor to completely ignore files appears to be to change the file or directory name (1, 2).
But I don't want to completely ignore the files - Some modules I need only on the server side, some only on the client side.
Is there a way to get Meteor to only include certain node modules in the client side bundle, perhaps through creative naming or hacking .babelrc?
Everything needs to go into the bundle, which you place on the server. When you go to your web site, the server makes your HTML, CSS and JS available and is loaded into the browser. Only the node modules needed by your browser get loaded.
There is no need to do this :)
Hide them in server folder and import them indirectly.
To exclude certain npm node_modules from being bundled into the massive modules.js file and prevent useless megabytes of script being sent to the client: conditionally require a file that itself imports modules from within a server folder.
Like so:
/* /my-import-file.js */
import { Meteor } from 'meteor/meteor';
if (Meteor.isServer) {
module.exports = require('./server/server-only-file');
}
And the file that actually imports your large, useless-on-the-client npm modules:
/* /server/server-only-file.js */
// Import some modules that will NOT be sent to the client
import mailgun from 'mailgun.js';
import cheerio from 'cheerio';
import juice from 'juice';
export { juice, cheerio, mailgun };
Your other code can then do like so:
import { Meteor } from 'meteor/meteor';
import myImport from '/my-import-file'
if(Meteor.isServer){
myImport.doServerOnlyStuff();
}
Related
I'm trying to add push notifications to my svelte site using Firebase/Google Cloud Messaging (FCM), and a service worker JS file needs to exist at the absolute path: https://example.com/firebase-messaging-sw.js . However, Vitejs is bundling this with the other svelte/js code in my project. I can manually place the file there, but then it won't be transpiled. Aka these imports here won't work in the file:
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
So how do I tell Vite not to bundle this file and have it output at the root dir?
Alternatively, I saw there might be a way to pass a service worker differently, if that removes the need for the js file please let me know roughly how it's done.
Thank you.
I have created a vueJS website and I have used the history mode for routing in order to get rid of the # in the URL which shows in the default has mode routing. However when I deploy my project to the server after
npm run build
it runs fine but when I reload any page or type the url in the browser manual i get a 404 error instead.
I have used the history mode for routing. I am using firebase for the backend. I read the documentation on how to fix this however I did not quite understand it.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode : 'history',
routes : [
{
path : '/',
name : 'dashboard',
component : 'Dahsboard',
}
]
})
I don't have enough reputation to answer in the comment section under your question, so i provide an answer here.
You can find the code that tells the web server to serve the index.html file for every routing request here. Just create a .htaccess file and upload it to your server.
In your example above you also need to import your Dahsboard-Component if you are using single file components.
What is the approach for doing a Meteor.call to the server from a js file within the /public folder?
I tested, but the call does not work. I am unable to get any result from Meteor.call when using it within the js filed that is served on the public...
Will I need to create a middleware api ?
Why is the JS file in the public directory? If you want the JS code to be executed on the client, then put it in the /client directory and the functions will be available to the client.
If it's in the public folder, then it is served "as-is" to the client. From the docs:
public
All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as . This is the best place for favicon.ico, robots.txt, and similar files
UPDATE
Since now I can see you are trying to load an external JS, the correct answer is to either use NPM (with meteor 1.3+) or place them in the client/compatibility directory. From the docs (http://guide.meteor.com/structure.html):
client/compatibility
This folder is for compatibility with JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
It is recommended to use npm for 3rd party JavaScript libraries and use import to control when files are loaded.
I want to organize my Meteor app in modules, i.e. having a folder for each specific section or functionality of my app containing all related files.
This would preferably also include static assets such as images but the special public/ folder only seems to work in the project root.
Or am I missing something?
For my project, it feels like overkill (less clean, even) having the overhead of creating a proper package for every little module of my app.
Unfortunately the only way to do it is to use a package. You can add static assets to a package, and the file can be accessed with the URL: /packages/[package name]/[path to file]. Here's an example of a package.js for hopscotch:
Package.describe({
summary: 'A framework to make it easy for developers to add product tours.'
});
Package.onUse(function(api) {
api.versionsFrom('1.0.0');
api.addFiles('img/sprite-green.png', 'client');
api.addFiles('img/sprite-orange.png', 'client');
api.addFiles('css/hopscotch.css', 'client');
api.addFiles('js/hopscotch.js', 'client');
});
As you can see, all of the images are under the img directory within the package. To access the sprite-green.png file, I would use /packages/hopscotch/img/sprite-green.png.
Is there a way to prevent automatic loading of all assets in my /client folder?
I am looking at a scenario where my login page uses different css/js files than my registration or view users folders. What is the best way to do this?
The closest I have come to a solution is this but that still doesn't solve my problem.
Or the best approach is to host my files externally then user the external-file-loader with conditional statements?
I have just published modules smart package which more or less does the job for you. You can add it to your project with
mrt add modules
Then, you will need to change the extensions of all files that you want to load asynchronously to .module_js or .module_html (currentlly we do not support css). Now suppose that the structure of your directory is more or less
modules
module1
file1.module_js
file2.module_js
module2
file1.module_js
file2.module_js
client
main.js
server
public
...
Initially only main.js will be present in your application. To load additional code for the client use the asynchronous require call:
require('module1', function () {
console.log('the files contained in module1 folder are now loaded');
});