There is a requirement to add a custom page without CMS Integration. So, far it is configured like described below.
RouterModule.forChild([{
path: 'test/bla',
component: TransactionListPageComponent,
canActivate: [AuthGuard]
}]),
The page is rendered without issues. Still there are calls against OCC CMS REST API which return 404. Can we avoid those calls?
Related
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).
I'm using Vue Router with Vue 3 in a web application I'm working on, and have a 'catch all' route defined as the last route:
{
path: "/:catchAll(.*)*",
component: () => import("pages/Error404.vue")
},
This is picking up everything, though, including calls to the /api/ back end (although not via Ajax), and even things like '/test.csv', which is a link to a CSV file in the root directory.
How can I bypass the router for certain URLs, allowing them to be treated as regular requests?
Incidentally, I don't know whether this is relevant, but the application in question is a PWA built using Quasar. When I make the call to e.g '/test.csv', I see a request for 'service-worker.js' with a 304 response code in my nginx access log, confirming that the request is being handled by the router rather than nginx.
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'm using Symfony 4 and Nelmio Api Doc Bundle to create a service that will be only accessible trough APIs (both public frontend and private back office will be created using a JS framework)
I need 2 documentations (maybe more later) :
/api/doc
/admin/doc
Right now I have some Controllers in src/Controllers/Admin and src/Controller/API since they are really different.
I don't understand how to use Nelmio Api Doc Bundle to handle the 2 documentations in 2 differents urls. I know there are areas but I just don't get how to deal with them...
Can someone help me by providing a simple example ?
Thanks
As you mention you need to configure the areas section of the nelmio_api_doc.yaml file as listed here https://symfony.com/doc/current/bundles/NelmioApiDocBundle/areas.html
In your case you would have the package nelmio_api_doc.yaml file as something like:
nelmio_api_doc:
areas:
default:
path_patterns: [ ^/api ]
admin:
path_patterns: [ ^/admin ]
Or whatever the patterns in your routes are to these so it knows which controller function(s) to check for the swagger annotations.
And in your routing config nelmio_api_doc.yaml:
app.swagger_ui:
path: /doc/{area}
methods: GET
defaults: { _controller: nelmio_api_doc.controller.swagger_ui, area: api }
So the api documentation will be accessible via /doc or /doc/api, any other areas can be accessed by adding appending the area name for example /doc/admin etc.
Note that I have set the route as /doc/ to prevent a conflict with the firewall pattern set for ^/api picking it up first as it may conflict, you could add an extra firewall rule to catch it first, I decided to just change the route for this.
If you went with the swagger ui route as /api/doc you would need to change the default area path patterns to:
path_patterns: [ ^/api(?!/doc$) ]
As show in the symfony docs.
I am using nuxt for a static webapp, using "mode: spa" and "nuxt generate".
The docs say that dynamic routes do not work with this, but my app (/dist) still works on static server after generating, even though the routes aren't generated. I cant figure out why.
Before generating, my routes look like:
export function createRouter () {
return new Router({
mode: 'history',
base: '/',
routes: [
{
path: "/",
component: _36d3a217,
name: "index"
},
{
path: "/:focus",
component: _fbe76838,
children: [
{
path: "",
component: _6d415767,
name: "focus"
},
{
path: ":view",
component: _19cdee48,
name: "focus-view"
}
]
}
],
fallback: false
})
}
Now, the generated /dist does not create the /focus directory as expected...But In my app, I am using route URL params to query an API and it still works.
ie a route like below, the component will use "thisFocus" and "thisView" as parameters in the API:
/thisFocus/thisView
Since the dynamic routes do not exist in /dist, i would think that this would not work anymore. So how does the app still use those URL params successfully without the routes existing?
Edit: another more simple way to ask maybe: why can i still access /:focus/:view route.params even though the routes dont exist?
If you use nuxt generate, you usually want a statically generated page. That means, having one HTML file per route which contains actual HTML which was rendered by the server.
You want that because it'll give you the "best of both worlds", good SEO, faster TTI and so on but without running a Node.js server all the time. (Further read)
If you want a traditional SPA, you typically have just one index.html file with almost no HTML but Javascript included.
Source code of a typical SPA
Dynamic routes
When you "pre-render" (=== statically generate) your page, Nuxt needs the information which routes it should render. For routes without parameters that's easy (e.g. about.vue or posts/index.vue). As soon as there are dynamic parameters, Nuxt can't "guess" them.
So yes, dynamic routes are "ignored" because Nuxt don't know what do to with them except you tell Nuxt which routes to pre-render.
These routes will then be generated. This does not mean that you can't access dynamic routes that you didn't provide to Nuxt. You can still access them (example: a post that doesn't exists) and the requests will be parsed (depending on your server config and whether you have generate.fallback enabled or not) but you lose the SEO benefit and see a spinner as the fallback file is equivalent to the index.html from your traditional SPA.
Source: Replied on github by manniL who is a nuxt core member