I use docusaurus 2.0.0-alpha.73
When I add baseUrl, page can't be loaded correctly in my local.
This is my code: git#github.com:WeBeautifulNow/document.git
This is the correct behavior:
And this is error behavior in my local.
Add this in config. Everything is ok
baseUrl: process.env.IS_LOCAL ? '/' : 'production base url'
Related
I want to consume an API using a proxy written in express. I use http-proxy-middleware for this. Here is the setup I have:
app.use(
createProxyMiddleware('/api', {
target: 'http://example.com/api/v2',
changeOrigin: true,
pathRewrite: {
'/api': '',
}
})
);
Then I make a request from postman or browser: GET http://localhost:8080/api/list?first=50
All I get from the API server is 404. I saw in the browser that the URL changes to http://localhost:8080/api/v2/list/?first=50 and I don't understand why.
All I want is to add an auth header which I managed to do using onProxyReq, but now I just want everything that comes after /api to be forwarded as is to http://example.com/api/v2.
I just got it to work. Turns out I had some things wrong. The first wrong thing target: 'http://example.com/api/v2' should be target: 'http://example.com'. Then, pathRewrite will rewrite anything it matches and redirect to the new path, so it ended up calling localhost:8080/api/list?first=50 and then localhost:8080/api/v2/list/?first=50. So with these 2 mistakes combined, in the end the API call would be example.com/api/v2/v2/list/?first=50 and that's clearly wrong. I replaced the target and I am now using /api/v2 as context for the proxy.
I would still like to call my proxy using localhost:8080/api/whatever and have it turned into example.com/api/v2/whatever, but it's just a nice to have.
I created a website with several pages on Vue.js.
Everything is working fine locally, but when I deploy to Heroku, all pages are only working when I click on an internal link in my menu that redirects to the corresponding page (using router push).
When I try to access directly /any-page from the browser I get a 404 with a message saying "Cannot GET /any-page" whereas the same page is displayed correctly via a click on a link.
As I mentioned when I locally serve my app I don't have this problem.
I really can't see where this can come from, thanks in advance for your help.
There's a deployment guide specifically for Heroku in the official Vue CLI documentation.
You'll quickly notice the relevant information:
static.json
{
"root": "dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
For SPA's (Single Page Applications), you'll want to point every route to the index. Vue router will take care of navigating to the proper page.
Heroku is serving the contents of your Vue build folder. Since Vue builds the app as a single index.html file, only the main route works.
Vue doesn't actually navigate to the route, it rather rewrites the the browser url using the history API and handles the loading of the new route.
You could use one of these options:
OPTION 1
You could use mode: "hash" to fix routes when reloading the page. However this will add a # before every route.
const router = new VueRouter({
mode: "hash",
routes: [...]
})
OPTION 2
Write an Node.JS (eg Express) app that routes every request to your index.html file. This is called a middleware
Reference: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I have installed PWA in my Vue single page app but when I turn off my internet connection only the home page works. Other routes don't seem to work. Google Chrome just shows dinosaur and "No Internet".
I have tried adjusting the deployment settings in Netlify but it doesn't seem to be the issue I guessed.
I have already added the _redirects file in my dist folder
# Netlify settings for single-page application
/* /index.html 200
Here is a sample of my service-worker.js on my dist folder.
importScripts("/precache-manifest.randomstrings123.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
workbox.core.setCacheNameDetails({ prefix: "app-name" });
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
const bgSyncPlugin = new workbox.backgroundSync.Plugin('queueExample', {
maxRetentionTime: 48 * 60 // Retry for max of 24 Hours
});
workbox.routing.registerRoute(
'https:/api.herokuapp.com/api/v1/add/item',
workbox.strategies.networkOnly({
plugins: [bgSyncPlugin]
}),
'POST'
);
My expected output in Netlify was that even internet connection is unavailable the form route '/form' page of my app would still be loaded by the service worker.
I have found a solution to this problem. One mistake is that as a single page app by default the PWA/Workbox will only cache the home page '/index.html'. It does not include any other pages unless you explicitly specify it.
Now, by adding the code below in ./src/service-worker.js I made my router-view available for offline:
workbox.routing.registerRoute(
'/form',
'GET'
);
as you can see registerRoute just speaks for itself. Just make sure that the routes is already working properly in online before you do this to avoid errors.
attempting to deploy a vuejs, express app to heroku. The app displays, but cannot access the api, because heroku seems to add 'undefined' in the middle of the base_url. Everything works locally as expected.
Here is my heroku config var:
BASE_URL: https://goore-todos.herokuapp.com/
Here is the Vuejs component api request:
fetchTodo () {
let uri = process.env.BASE_URL + '/api/all';
axios.get(uri).then((response) => {
this.todos = response.data;
});
},
As mentioned, this works locally.
the console shows the following error:
VM71:1 GET https://goore-todos.herokuapp.com/undefined/api/all 404 (Not Found)
and the view is empty.
requests to https://goore-todos.herokuapp.com/api/ via Postman work as expected.
In this case it looks like process.env.BASE_URL is undefined. As it is undefined, the url you're trying to access is considered to be relative. That means it uses your current domain and appends the path to it.
If your frontend and backend are running on the same domain there is no reason to try to pass the API url as a variable as you can just use relative URLs.
If you want to access the URL via an environment variable it is a bit trickier with a frontend app. The Vue app is running on the user's browser, not on your server so you can't directly access it.
I had this problem and had to go through and hard code all of my URLs with the heroku URL. I tried resetting the config variables in Heroku which had an extra slash at the end, but in the end hard-coding each API call was the only thing that fixed it.
I have a Polymer app running on port 5901 of my VM, and am using Apache reverse proxy to serve the app from the following URL:
http://www.example.com/polymer
The problem is when I go to the URL in a browser, I can see the page title but the page is blank. I also get this error in the console:
Failed to load resource: the server responded with a status of 404 (Not Found) src/home-page.html
I'm assuming that I have to somehow add the /polymer subdomain to the default URL for the app, but I'm not sure how to do this.
EDIT: In response to comment:
The relevant link for Polymer 2.0 routing is https://www.polymer-project.org/2.0/toolbox/routing .
Updating the route. The route object is read-write, so you can use two-way data binding or this.set to update the route. Both the route and routeData objects can be manipulated this way. For example:
this.set('route.path', '/search/');
Or:
this.set('routeData.user', 'mary');