As part of learning Vue3 I am trying to piece together code that will mock API calls using Axios and a local Json file. However I am getting a 404 when accessing the file and suspect the route is not setup correctly.
The data files are in my root folder and I have the following in the routes.json file in the root of the project
{
"/api/*": "/$1",
"/hero": "/heroes",
"/reset": "/reset"
}
I have no reference to the API in the router config (vueRouter) and not sure if needed?.
When I call the ../api/heros (file) I get redirected to my page not found handler.
{
path: "/:catchAll(.*)",
name: "NotFound",
component: PageNotFound,
meta: {
requiresAuth: false
}
},
I am not sure my routes.js and router/index.js affect each other?
Expectation: I can navigate to the JSON data in the browser and also use this in Axios
Related
I’m building a website with Next.js and I need to add a page called "Index" under xyz.com/index
It works fine locally but when I deploy the website to vercel, /index shows the home page which is located under xyz.com/
Is there a way to make this work through rewrites or configuration on vercel?
Would you try to create a folder named Index, then under Index folder create js file called index.js.
You can see this image--
As of now (next 12.0.3) the solution that works for me is using a rewrite:
Name the page something like "indexPage":
/pages/indexPage.js
Rewrite /index to /indexPage:
In next.config.js:
module.exports = {
// …
async rewrites() {
return [
{
source: '/index',
destination: '/indexPage',
},
]
},
// …
}
Using the following folder structure only worked locally for me but not when deployed to vercel:
/pages/index/index.js
I am trying to fetch images from Strapi into my NextJS Application, but whatever I am trying to do I am always getting the error
"url" parameter is valid but upstream response is invalid"
The console is stating:
Failed to load resource: the server responded with a status of 400
(Bad Request)
I already updated "next" to the latest version:
Here is my Snippet from my Image Code:
What else can I try to not receive an error anymore?
I think you didn't add the source to your image domain, probably you should read more on the Image docs here https://nextjs.org/docs/api-reference/next/image
To get rid of this error, create a 'next.config.js' file in the root of your project. Add Domain of all images except local host to the domains array, like so:
module.exports = {
reactStrictMode: true,
images: {
domains: [
"platform-lookaside.fbsbx.com", //facebook
"firebasestorage.googleapis.com", //firebase-storage
"scontent-atl3-2.xx.fbcdn.net", //facebook
"pbs.twimg.com", //twitter
],
},
};
So in your case since, you're fetching from an external source, don't include 'localhost'
May it help someone, I had this issue because I had changed the names of the properties of the response object received from the api from its default case (snake_case) to camelCase while generating a typescript type for it.
I'm building Next.js app, my main page is 'hybrid' amp page
export const config = { amp: 'hybrid' };
export default function Home({ data }) {...}
export async function getStaticProps() {
return {
props: { data: {...} },
revalidate: 6000,
};
}
I'm deploying to serverless using npx serverless
When deployed the /index.html home page has in its <head> the reference to the amp version of the page, which is /index.amp
<link rel="amphtml" href="/index.amp">
When I got to the amp page /index.amp I got 404 page
Any one know what's the problem please
"next": "11.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
Instead of directly accessing /index.amp, add ?amp=1 to the end of the URL you want to load the AMP version of the page.
Ref- https://nextjs.org/docs/api-reference/next/amp
Edit:
Ref- I am not aware of any AMP logic as of now, so it should be unsupported.
After lots of debugging, I found that AMP is not supported for the hybrid approach in serverless-next, although it working fine AMP-only configuration export const config = { amp: true }. That's the reason why it's working on localhost but not on deploy.
You can achieve this behaviour using nextjs server-side redirects.
It's not officially supported as of version #19.0.0.
My serverless.yml file
myApp:
component: '#sls-next/serverless-component#1.19.0'
Edit 2:
Finally it's working when I don't specify version.
My changed serverless.yml file
myApp:
component: '#sls-next/serverless-component'
My working deployed serverless amp version url is here
Note- If you do not specify the version, it will use the latest tag, which refers to the latest stable version here (i.e not alpha versions).
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module
We wanted to download PDF files using:
http://username:password#myapp.com/Folder/client.pdf
How can I achieve this using meteor?
I have added the recommendation below to the router.js:
https://github.com/Rebolon/meteor-tuto-routerAndFileDownload/blob/master/tuto-routerAndImage.js
But getting this error on the browser:
Exception in callback of async function: ReferenceError: Npm is not defined
Download File in Meteor
Base on iron router documentation you can use this.
Apache servicng static file
If you want to force to download you can use .htaccess.
Router.js
Router.route('/Folder/:filename', function () {
this.response.end('some file content\n');
}, {where: 'server'});
Download.html
Download File
Why Npm is not defined i appearing.
You must run the router with where: 'server'