I have a failed case using SingleSpa with vue apps. Vue apps are using module federation to share components.
The case is as follow:
App1 uses module federation and exposes one component.
App2 uses module federation to read the exposed component from App1
The above works as long as single-spa is not added to the projects. So App2 will use the App1 components.
But when single-spa is added, App2 no longer works as standalone, it cannot apparently load the App1 components anymore with the following error:
ChunkLoadError: Loading chunk vendors-node_modules_vue_vue-loader-v15_lib_runtime_componentNormalizer_js-node_modules_vueti-2692ba failed.
Also on the root project which is a single-spa container, it loads App1 successfully but can't load App2.
I assume that this can be a webpack config which I'm missing either in App1 or in App2.
Here is an example repository where SingleSpa is added to the projects and you can see App2 doesn't load anymore unless you disable ModuleFederation or remove SingleSpa
Example: https://github.com/farhadnowzari/singlespa-module-federation-failure
Related
I'm trying to create a nuxtJS module to make some changes to the routes based on the URL or request, i simply want to access the request.header.host inside a nuxtJS module but I'm unable to get it, i tried to check it process.server, this, context but unable to get the request object, i just want to get the full domain only, so how can I do that?
You can only get the hostname in the Browser JavaScript not internally in running nuxt app. As for nuxt app, it is running locally on the server (for example http://localhost:8080).
The information regarding hostname is present in services like Nginx/Apache.
Solution (One of them):
Use #nuxt/dotenv and store hostname in the environment variables:
hostname=example.com
then use wherever you want in your nuxt application with process.env.hostname
$ tree .
.
├── main.go
└── static
└── output_of_npm_run_build
I used vue.js with vue router for the frontend and golang for backend. What I tried to accomplish:
use golang (either standard library or gorilla/mux) to take care of example.com/api/...
vue router to take care of all vue components (example.com, example.com/about, example.com/login, etc.)
RESTful APIs example.com/post/{post_id} for both frontend and backend
If I go to example.com and click the button about, vue router would display the about component and change the url to example.com/about without talking to the backend, which is expected. But if I enter example.com/about directly to the address bar and press enter, the request goes straight to the backend. Since the file about does not exist, it returns 404.
Is there a way to return static/index.html and somehow tells vue router to render xxx component even if example.com/xxx is sent directly by the browser to the server (with exception of example.com/api)?
Who should be responsible for routing example.com/post/{post_id}?
You need to update the hosting configuration. This issue used to be happened whenever I used Front-end JS frameworks such as React, Vue and so on.
So if you type example.com/about manually on address bar, the page would show '404 Not Found`.
I recommend this answer to solve your issue.
Vue router is not working with nginx
I have a single page (SPA) application written in Vue.
Now I need a separate page that should be available without being signed in.
To me it seems like a need to enable multi page app (MPA). I see in the documentation (https://cli.vuejs.org/config/#pages) that I need to set this up in vue.config.js. But I the documentation is unclear to me. Do I need to edit/rerun the Vue CLI setup? Or do some webpack changes. Just adding a new page entry with corresponding files does not work (webpack does not insert anything in html-file).
From SPA View, i would likely go like this
Inside /views folder
- HomePage.vue (no auth)
- Login.vue
- /users/ subfolder (auth needed)
- DashBoard.vue
- About.vue
etc
Then define the routes (paths,components,etc.) with requiresAuth as auth-check, redirects back to the route with HomePage.vuecomponent then.
and SPA mostly comes with MPA Challenges such as SEO, SSR concerns. The routing roughly the same to Vue/Nuxt.
I am currently building a SPA app using Vue.js and webpack to do our bundling. The backend API is built with .Net Core. When running locally, the Vue app is hitting localhost on the backend. I need to be able to change the route of the API dynamically based on the environment. Is there a way to do this without having to do a big switch statement that considers the current url? A requirement is that we are not allowed to change the webpack bundle for different environments, in other words, once it is bundled, it has to stay bundled. I have tried to pass static config files through to the bundle and dynamically change them based on the environment, but unfortunately that does not work, as it hits the values that were originally in them.
webpack dev server has a proxy capability. You could use this to proxy to your locally running backend when developing.
https://webpack.js.org/configuration/dev-server/#devserver-proxy
e.g. you can point anything from '/api' to 'localhost:8888/api' with the config.
Is your app the backend running on the same url when deployed? If not, you'll likely need a reverse proxy to pass along the requests to the backend.
You can use an axios interceptor so you only have that switch in one place:
axios.interceptors.request.use(config => {
// check location.host name and append the backend url you want
});
see https://github.com/axios/axios#interceptors
However, this is a little dangerous as the URLs in your switch statement will be strings, and therefore all of your environment URLs can be pulled out of your code even if minified/concatenated.
Another option is to add some sort of endpoint to the server your client side code is hosted, and when you start your app, query for that configuration.
What are the best practices (and how to go about doing it) to support offline mode when using html5 history api for url rewrites?
For example, (hypothetically) I have a PWA SPA application at https://abc.xyz which has internationalization built in. So when I visit this link, the Vue router (which ideally could be any framework - vue, react, angular etc.) redirect me to https://abc.xyz/en.
This works perfectly when I am online (ofcourse, the webserver is also handling this redirect so that app works even if you directly visit the said link).
However, its a different story when I am offline. The service worker caches all resources correctly so when I visit the URL https://abc.xyz everything loads up as expected. However, now if I manually type the URL to https://abc.xyz/en, the app fails to load up.
Any pointers on how to achieve this?
Link to same question in github: https://github.com/vuejs-templates/pwa/issues/188
Yes, this is possible quite trivially with Service Workers. All you have to do is to configure the navigateFallback property of sw-precache properly. It has to point to the cached asset you want the service worker to fetch if it encounters a cache miss.
In the template you posted, you should be good to go if you configure your SWPrecache Webpack Plugin as follows:
new SWPrecacheWebpackPlugin({
...
navigateFallback: '/index.html'
...
})
Again, it is absolutely mandatory that the thing you put inside navigateFallback is cached by the Service Worker already, otherwise this will fail silently.
You can verify if everything was configured correctly by checking two things in your webpack generated service-worker.js:
the precacheConfig Array contains ['/index.html', ...]
in the fetch interceptor of the service worker (at the bottom of the file), the variable navigateFallback is set to the value you configured
If your final App is hosted in a subdirectory, for example when hosting it on Github pages, you also have to configure the stripPrefix and replacePrefix Options correctly.