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.
Related
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
I have a custom .js file that I place inside the public folder in my NextJS app. I need to be able to use environment variables in that .js file, but environment variables don't seem to be available there.
I read that files in the public folder don't go through the webpack build process.
How do I customize my Next.js app so it builds an additional file inside the public folder? I found a suggestion (option 1 in the answer) on how to do it in a Vue.js app. Anyone know how to achieve something similar in Next.js?
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.
So I know perfectly well how to use Firebase hosting and platform for a website code file such as index.html or app.js(in this case, use Cloud Functions). But what about a website that has zero code in html but only ejs code ? I tried running Firebase for it and it didn't work because Firebase could not find any index.html file sitting in Public folder because there was no html file to begin with and then when Firebase searched for app.js file in functions folder, it failed as well because there was no file with the extension ".js". So is there no way to run a website purely written in an ejs file?
I don't think EJS is supported in Firebase hosting. You'd have to host your own Express site elsewhere
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();
}