I have a Pages Single-Page App (SPA) with a hello world function. I've got it working on Cloudflare servers. the '/' route works great. '/api/hello' my function works great and also '/about' which is resolved by my SPA router works fine.
However, when I proxy the tooling to run it locally using "npx wrangler pages dev -- npm start" and try '/about' I get a 404 error. Is this a bug in Wrangler? It seems it does not recognize this is an SPA and is either trying to find a function or a page. Any settings I'm missing?
Exact error:
Exact Error:
404 File Not Found
Url: /about
File: /Users/…/…/…/www/about
(using … to obfuscate exact directory names)
Related
Developing a next.js application that uses next-auth for authentication. It is currently setup with GitHub as the only Provider.
In development, the authentication works just fine.
In production, after I click "Sign in with GitHub", I am directed to a 404.
I'm 99% sure this has to do with the callback URL I have setup in my GitHub OAuth app. For dev purposes it is set to http://localhost:3000/api/auth/callback/github. Obviously this is no good for a deployed app, but I don't know what to set it to. I've tried a couple of different URL's with no luck.
Other than the callback URL is there anything else I need to set up in my code to get this working in production?
Other than the callback URL, this is from the docs:
https://next-auth.js.org/getting-started/example#deploying-to-production
When deploying your site set the NEXTAUTH_URL environment variable to the canonical URL of the website.
NEXTAUTH_URL=https://example.com
You should set this as a production environment variable on the Vercel dashboard to link to the URL where Vercel deployed your site.
It is possible that this is because you changed your .env.local file to contain your GITHUB_ID value, but did not restart next.js to pick up the new value.
Try stopping your dev sever, and restarting it (with npm run dev).
The clue is that the Github authentication URL contains &client_id= at the end, with no Github ID token.
I ran into the same issue and I used next export for static HTML export. Without next export, just simply to use next build, it worked for me on vercel.
I had the same 404 problem, it was due to the changes in Version 4 of NextAuth, I was getting a 404 page when logging in and changing the code in nextauth.js fixed it for me, you could try the following:
import NextAuth from 'next-auth'
import GitHubProvider from 'next-auth/providers/github'
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
}),
],
})
I have Vue website works correctlly on localhost ,after I build it and uploaded it on server ,the routes works fine but have two problems :
1- when I click on route and the page open ,then if i refresh the page it gives me an error 404 page not found.
2- the connect to api by axios don't work?
How can I solve them?
The problem is your web server. Make sure that your web server (Apache, Nginx, Express etc.) always points to the Index.html.
Your web server is not aware that the SPA should do the routing.
If I try mywebsite.com/NON-EXISTENT-PATH for my site on Google App Engine, I get a 404 response.
However using create-react-app's local development server for another app, if I try localhost:3000/NON-EXISTENT-PATH, it just gives me the response for localhost:3000, rather than a 404. This also applies to hosting the app on ZEIT Now. Why is this?
Create React App is auto-detected and a wildcard route is added so that any path that doesn’t match a static file will serve /index.html.
https://zeit.co/docs/v2/build-step#optimized-frameworks
This is necessary for frameworks that don't create HTML files for each page but instead create a single index.html file and use JavaScript to route on the frontend.
This pattern is typically called SPA.
Well in my application I have a link to download a report, the report is dynamically generated. During testing the generation happens in a test server, to which CRA normally correctly redirects for xhr requests.
The link is called like:
<a href={'/api/event/2/report/csv'} download={"report.csv"}>
Load CSV report
</a>
CRA runs on port 3000, and it should act as a transparent host for all request to /api - redirecting them to localhost:3000/api. For the xhr requests this works smoothly by using the default reverse proxy. In package.json:
{
"proxy": "http://localhost:1337"
}
However this doesn't work at all. When I test above link I get a failed no file error on chrome. If I remove the download parameter I get a 404 page.
If I manually link to http://localhost:1337/api/event/2/report/csv it works (given there's no cookie so I the code shows a permission denied, but that's expected).
How can I get cra to work with this?
We need to deploy two different Angular5 project on Amazon S3, like
/assets (folder)
/index.html
/clients (another Angular5 folder)
/clients/assets (folder)
/clients/index.html
For example my domain is https://example.com
Now, When we try to access root index.html files with https://example.com, it is working fine. but, When we trying to access https://example.com/clients, it returns an error "Error: Cannot match any routes. URL Segment: 'clients'"
One more thing, We have setup 403 redirection on rootpath index.html, because we need to access login page when customer directly hit URL : https://example.com/login
So, When I am trying to access https://example.com/clients, it is automatically redirected on https://example.com
Could anyone please help me on this?
The project should be built with this command:
ng build --base-href /clients/
Option base-href indicates that, you what is before the Angular routes.
On the other hand, it's posible you need something like nginx in your server that redirect the request to different projects.