I have a local theme, and I want it to use some components such as MainHeader and Footer.
I have created a folder in my theme folder named components and I can make it work if I edit my client.ts file of the application to use the new compoent.
import MainLayoutHeader from './theme/components/MainLayoutHeader.vue'
export default defineClientConfig({
enhance({ app, router, siteData }) {
app.component('MainLayoutHeader', MainLayoutHeader)
},
setup() {},
rootComponents: [],
})
But I want to add this configuration within the local theme.
The documentation mentions that I can create a theme client config and link it with a hook in the main client config.
Usage of Client Config in Theme
How to link these two files?
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 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
}
}
Some days ago I came across Nextra, which is a static site generator based on Next.js.
The docs explain how to deploy a site to Vercel and I am wondering if I can deploy the site to GitHub Pages or any other platform that host static HTML sites.
From my understanding yarn build will create a folder that includes html, css and js files which can be uploaded to GitHub pages. Am I on the right track? Respectively can Nextra pages be hosted on GitHub Pages?
I cannot find a build folder that includes the generated website or something similar.
Thanks for every advice in advance.
To generate static files with no need of a Node.js server for hosting you can export your next app after build.
In package.json:
"scripts": {
"export": "next build && next export"
}
Then yarn export and you will get the files in the out/ folder.
With basic Nextra config you will get an error about image optimization:
Error: Image Optimization using Next.js' default loader is not compatible with next export.
To avoid that error you should deactivate Next.js image optimization by providing the images.unoptimized option outside require("nextra")({}).
Like this:
// next.config.js
const withNextra = require("nextra")({
theme: "nextra-theme-docs",
themeConfig: "./theme.config.tsx",
});
module.exports = {
...withNextra(),
images: {
unoptimized: true,
},
};
Here is a working example being deployed to Github Pages.
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.
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();
}