I have a frontend project setup with preact-cli, which leverages i18next with http-backend. This configuration is to facilitate the serving of the translations on demand from the CDN the app is to run in production on. So far I can get this to work by doing:
npx preact build --no-prerender
followed with a deploy to AWS Cloudfront
Now I would like to statically prerender some of the major routes, but regretfully, a naive: preact build --prerenderUrls ./prerender-urls.js does not work. The reason for this is that once it is to do the step of prerender-ing those routes, it is trying to leverage the i18next-http-backend in the absence of an http server running. At this point, preact build just keeps on hanging(as if I am doing a preact build --analyze).
As such, for that step, I need to use the i18next-fs-backend instead. Regretfully, while this will work for bundling in the translations on a CI/CD-server for those prerendered routes, it will not work for the translations that need to be served over the http-backend.
I only see two types of solutions to this problem:
Do the build in two steps. First with --no-prerender with an i18n.config.js that leverages the http-backend and then with --prerender with an i18n.config.js that leverages the fs-backend. The problem here is that the hashes are different between the two builds so I can not simply copy over the prerendered routes with the other build.
Setup an http server during the build that can serve those translations. This is possible in itself, but a rather brittle work-around.
There is the concept of a chained-backend with i18next that would allow me to define a fallback, but in the context of a browser, how does it make sense to have i18next-fs-backend as the primary source?
What would greatly help me at this stage is if someone can point out that
Either there is a third viable option that I failed to consider
Either I misunderstood some way of doing chained-backend
Either a confirmation that I am correct and that a strong case can be made that preact-cli needs to allow us to do the build in two parts.
Related
I have a very particular question, cause I wish to create a webpage that works without a server, and I'm trying to do it using vite, my whole project is using vue + vite.
if I try to use "vite build" command, the page deploy as blank, and the only way I can see the page is if I use "vite preview".
would it be possible, somehow, to load the content of the html page using vite, without needing the "vite preview"? just double clicking on index.html
Using vue-cli, this is possible by setting the publicPath in the vue.config.js file to an empty string, see: https://cli.vuejs.org/config/#publicpath
I've personally only used it with Vue 2, but from what I read online it should also be possible with Vue 3, if you're okay with switching to vue-cli.
Using Vite, I found this question and answer which shows a way by bundling all the scripts, css and images into a single file:
How to open a static website in localhost but generated with Vite and without running a server?
I did try that and it mostly works, but not currently for svg files which I use a lot of in my application. It might work fine for your use-case.
I did also need to add "type": "module", in my package.json to get rid of an error saying
"Error [ERR_REQUIRE_ESM]: require() of ES Module
/path/to/dist/index.js from /path/to/vite.config.inlined.ts not
supported."
If you open your page simply as an index.html, you will be limited regarding some API calls and alike. Nowadays, you will need a light server to be hosting it via a simple vite preview as you saw. This is mainly because the files are being worked with bundlers like Webpack and Vite.
I'm not sure that there is a way of loading the whole thing with just an index.html because files like .vue are not natively supported, you need a specific loader.
One simple solution would be to use Vue as a CDN, but it will limit your DX experience regarding SFC files, but you will be able to use Vue into a regular index.html file.
PS: your performance will also be worse overall (because of the required network requests).
If you want something really lightweight, you could of course also use petite-vue, maybe more suited towards super simple projects with a tiny need of reactivity.
I still recommend using something like Netlify or Vercel, to host your static site for free + having the whole Vue experience thanks to a server running vite preview for you.
I want to create two versions of an app with slightly different content. Therefore I thought about having two "www" directories (lets say "www-foo" and "www-bar") and tell capacitor in the capacitor.config.json which one to use (with "webDir" setting). Also the "appId" should be different then.
So I guessed the easiest way would be to have these capacitor.config.json files with different "appId" and "webDir" settings and when running the build script to specify which config file to use (like it's known from webpack with --config flag). But I can't find any information if it's possible to specify the config file to use for building the app.
Is it just not possible (yet) or am I too stupid to find it? :)
Otherwise I would try to create the capacitor.config.json file with webpack before running the capacitor build script.
I used this article as a guide for my project.
I don't know if exist any option for two or more AppID/webDir in Capacitor.
But understanding you necessity my suggest is create a custom build script in Node.js that change info in capacitor.config.ts (appId) > build (www/www-Two) > sync & copy to platform
I am building a micro front-end using Vue 3, Typescript, and Vite and for this, I have a wrapper in single-spa, let's call it wrapper.product.com.
And I also have a micro front-end, let's call it A, so it is placed at a.product.com and it is built using code split.
The problem is that A only works with referenced dependencies. Therefore, when A tries to get assets/somefile it tries to fetch from wrapper.product.com/assets/somefile.
I am also using the build.base in the vite.config.ts to mention the right domain, but it didn't work.
I know there is a possible solution using webpack (systemjs-webpack-interop) but is it possible with Vite?
Any ideas to fix this and have all dependencies of A being fetched from the A domain?
I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.
I use Browserify at the moment to bundle my client-side modules into bundles. Each bundle is then loaded as a script tag.
However with HTTP/2, my understanding is that bundling and minification are no longer best practices due to the amount of simultaneous connections available between the client and the server.
So how do I load npm modules in the browser without bundling?
I guess I want to be able to do
var someModule = require('some-module');
And have 'some-module' fetched from the server dynamically.
(I am aware there may be adverse affects on older HTTP/1.1 clients.)
You can't (without hacks and/or rewriting the files), because CJS require is sync. Even if you could, it would still be slow.
JS thread needs to be suspended waiting for the dependency to be loaded and executed. Without modifying source files doing this would require hacks like sync XHR or document.write, but these won't be able to load dependencies in parallel.
You could theoretically use some tool to rewrite the files to convert imperative require to callback-driven one (sort-of like conversion of CJS to AMD or ES6 yield compilers for ES5), but that would probably defeat your goal of using npm modules as-is.
And finally, even if you could load them (or used ES6 modules and travel a bit to the future), it would still be slower than bundling, because the browser doesn't know the full dependency tree, so it has to wait to discover dependencies of dependencies.
I do recommend webpack chunking (use the analyzer to find chunkable parts of the app) if you'd like to load your app in smaller pieces. It requires using an async require.ensure(cb) though.
Depending on what you're using to build your JS into a useful browser bundle, the tools will vary.
If you're using webpack, they have a built in feature for lazy loading:
https://github.com/webpack/bundle-loader
If you're using browserify, there is a module called externalize that aims to do this:
https://github.com/epeli/browserify-externalize
If you're using something else, I'd recommend searching for that builder's name and "lazy loading". I know RequireJS has supported this for a long time, too.