I just deployed my Vue app to my website using GitHub Pages.
The website is successfully hosted at https://astroorbis.com.
Here's the problem; When you click the "links" button at the top of the page, it successfully nagivates you to https://astroorbis.com/links, but when you try visiting the URL itself (typing in https://astroorbis.com/links) into your browser, it returns a 404.
There are other links that have the same error, such as /discord, /github, etc.
I tried the solution at Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links, but it failed as well.
What would be the solution for this?
As stated in this section of the HTML5 mode
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
So, the solution would be to use something like that
const routes = [
// will match everything and put it under `$route.params.pathMatch`
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]
On Netlify, you also need to add the following for it to work
/public/_redirects
/* /index.html 200
So I'm not sure about Github Pages but you should have something similar there, some way of catching all routes and sending them to the index.html of your initial SPA page load.
Otherwise maybe just give a try to Netlify with the _redirects configuration.
Maybe this article could help regarding Github pages.
The hack in your given link seems to be the only viable solution but it's still bad for SEO so yeah, depends if you want any (I guess so).
In that case, you could try Nuxt.js, Gridsome or Vitesse if you want to have some statically generated pages (best approach regarding SEO).
Related
I use the latest recommended SPA + .Net Core-based Web APi pattern where the FE referenced to BE, FE serves proxy to BE during development, and app.UseDefaultFiles()serves index.html where the SPA resides during production. This pattern means no proxy middleware is required as it was in opposite direction when the BE serves FE as a proxy.
app.UseDefaultFiles(); <-- Here the site is loaded first time
app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("/index.html"); <-- Here the site is reloaded if URL typed(changed) manually
Client-side routing is the point. Specifically, I use Vue Router and IIS hosting. When the site is already opened, and a user types URL in the browser, it falls down to app.MapFallbackToFile("/index.html") and then Vue router handles the route.
The problem is that the site is always completely reloading when the URL is just changed (let say from mysite.com/a to mysite.com/b) in this scenario, as I would press F5. It's not always necessarily bad but I would like to control it.
The question is: how to get rid of app.MapFallbackToFile("/index.html") and somehow pass the captured URL to the SPA, as it would be naked SPA without backend which now stays in front of frontend.
If have tried Vue Spa with ASP.NET Core 6 minimal setup and it seems for me, that there is no way to achieve what you want.
When user enters or changes the URL address, the browser navigate away from the page and do a GET request to BE (Backend).
Here is the catch-all fallback route required, otherwise the user gets the 404 error from the web server.
I presume you use the HTML5 History Mode. Here is a part from the Vue Router Docs about this problem.
Since our app is a single page client side app, without a proper
server configuration, the users will get a 404 error if they access
https://example.com/user/id directly in their browser. Now that's
ugly.
Not to worry: To fix the issue, all you need to do is add a simple
catch-all fallback route to your server. If the URL doesn't match any
static assets, it should serve the same index.html page that your app
lives in. Beautiful, again!
If somebody yet knows the solution, please post a new answer.
It would be great to know how to do it!
I am developing a simple app to showcase CRUD operations with Appwrite and Nuxt 3 (Release Candidate 11). The source code to the same can be found here.
I am using the landing page of the app (index.vue) for simple redirection i.e. if the account exits in the accountStore, I want to redirect the user to /workouts route, else ask them to login by redirection to the /login route.
The problem I am facing is when I am landing on the index.vue page (with no user session in progress in Appwrite), I am still getting redirected to /workouts route, instead of the /login route. I presume the reason for the same is the following error that is being logged in the console.
I need help in figuring out from where is the error message originating and how to possibly remedy it.
Here is my public github repo: https://github.com/EshaanAgg/workout-buddy
Maybe this is a bug with Nuxt 3 or Vite since Nuxt 3 is currently only a release candidate.
Also, in my opinion, Server Side Rendering (SSR) always complicates things so much. It doesn't look like you're using SSR, so you could possibly update your nuxt.config.ts to disable SSR:
{
// ... other stuff
ssr: false
}
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
Reading through the Vue Router docs this seems like it should be pretty simply, but I can't get it to work.
First I tried to use the file in S3
{
path: '/rules',
redirect: 'https://s3.amazonaws.com/itsclarke/vue-project/pdfs/rules.pdf'
}
This resulted in the redirect being appended to localhost:8080/#, so I got localhost:8080/#/https://s3.amazonaws.com/...
Also tried using the same approach with the static folder:
{
path: '/rules',
redirect: '../../static/rules.pdf'
}
This kept the path relative, but inestead of showing the pdf, it took me to localhost:8080/#/static/rules.pdf which isn't the path. localhost:8080/static/rules.pdf is what I need. This needs to use hash mode as well.
Using alias mode isn't much help either because I don't have components for these files. I know these redirects can be down on the server level, but I want to do it within Vue Router.
I don't think this is possible out of the box with vue-router - it expects the redirect value to be another client-side route, not a server-side url. I think your best bet would be to use a beforeEnter guard on your /rules route to redirect (using window.location) to the url. Alternatively, you could have your /rules route return a component that displays the pdf in an iframe.
I've realized that my ReactJS application using react-router does not have any external links. Search engines do not recognize that the site has a lot of linked content. Prerender.io seems like a good solution to this, but I cannot get it to work for my ReactJS application.
Can prerender.io be used with ReactJS? If not, is there another good way to improve SEO for my site without doing all the rendering server-side?
EDIT: Upon further digging, I realized that the issue here is that react-router uses a "#" by default, and not a "#!". Is it possible to make react-router work with a "#!"?
Prerender appears to expect real urls, because otherwise you can't serve the cached html to normal people (the hash isn't sent to the server).
When setting up react-router ensure it's using the history mode:
Router.run(routes, Router.HistoryLocation, function (Handler) {
In your server you'll need to ensure that all routes that don't match a static file are served by either sending index.html, or using prerender.
You can search for 'send all requests to index.html {insert server name here}' to find details on this.
It seems that by default prerender only applies in certain situations. Here's an example if you're using the express.js middleware in node.js:
require('prerender-node').shouldShowPrerenderedPage = function(){ return true }
You should be able to figure out similar modifications for other middleware (it'll require a fork in less flexible languages).