$ 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
Related
I'm working on a Vue 3 app (using Quasar) with Vue Router. I want the user to be able to click on certain links (with paths beginning '/api/') which bypass the router completely and go straight to the backend API. But everything is getting picked up instead by the catch-all route (path: "/:catchAll(.*)*"). I tried adding a route without a matching component, path: "/api/*", but that doesn't work.
Is there a way for me to tell the router to ignore certain paths and let them be handled by the server?
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 started to create a web app using Vue JS as the front end framework. In this process, I'm using Vue-Router to route paths to my vue components. And I'm serving this web app using Go with gorilla mux as my router.
Here I am not able to load any component to <router-view></router-view> in App.vue.
I found a similar question here. And I tried removing mode: 'history' but no luck. In the comments, it was mentioned that he let Go redirect all not-found URLs to /# + r.URL.Path. I didn't understand this bit.
I'll appreciate if anyone can guide me with some example.
If possible, don't serve the front end from within the Go app. Here's what I do:
Go app is the backend, provides RESTful APIs for the front end to use.
There's a nginx server setup as a reverse proxy for the Go app.
nginx serves the front end directly
I use nginx to serve the Go backend in a certain url location or different port
Modern single page applications use routing mechanisms which don't have to rely on fragments or additional url parameters, but simply leverage the url path. How does the browser know when to ask the server for a resource and when to ask the single page application for a spa-page controlled by a router? Is there a browser API which makes it possible to take over the control of url handing which is then taken over by e.g. the vue-router or another routing spa library?
In Vue Router (and I assume other libraries/frameworks are the same) this is achieved through the HTML5 history API (pushState(), replaceState(), and popstate) which allows you to manipulate the browser's history but won't cause the browser to reload the page or look for a resource, keeping the UI in sync with the URL.
For example, observe what happens to the address bar when you enter this command in your browser's console
history.pushState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')
The new URL is even added to your browser's history so if you navigate away from the page and come back to it you'll be directed to the new URL.
Of course all these URLs are non-existent on the server. So to avoid the problem of 404 errors when a user tries to directly access a non-existent resource you'd have to add a fallback route that redirects to your index.html page where your app lives.
Vue Router's HTML5 History Mode
React Router's <BrowserRouter>
How does the browser know when to ask the server for a resource and
when to ask the single page application for a spa-page controlled by a
router?
SPA Frameworks use routing libraries.
Suppose your javascript app is already loaded in the browser. When you navigate to a route that is defined in your routes array, the library prevents an http call to the server and handles it internally in your javascript code. Otherwise the call is forwarded to the server as a GET Http request.
here is an answer that discribes this behaviour with a clear scenario
I am using axios inside a vue component and trying to call an "external" php file. I have my src folder. Inside that are my components. My root is court. I have a folder named ajax where all of my php server side pages live. From my component I am trying to call a page from the ajax folder but don't know how to get to it.
Court\
ajax\
results.php
src\
components\
search.vue
So in search.vue i have an axios call
axios.get('ajax/results.php',.....
But it never reaches that page. I am also using the built in server and when I try http://localhost:8080/court/ajax/results.php it can't find that page. How do I call results.php?