I am getting a 404 error from my vercel deployment of flutter web project. The error has a link which redirects me to this url.
I get the error when I try to access a route www.foobar.com/post/123456.
I am using go router for my project. And the build command is as follows:
flutter build web --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false --release
Most of the flags in the build command is necessary for my project. What might be the issue and how to solve it?
The initial route which is "/" loads without any issue. The problem only happens when I try to navigate to any other route
For single page apps you'll have to return the index.html for all URLs.
You can do this by configuring rewrites in your vercel.json config.
Here's how it looks like in my vercel.json for example:
{
"version": 2,
"name": "myappname",
"rewrites": [
// rewrite all URLs to "/" which will serve the index.html
// if you have more rewrites then put them above this one
{"source": "/:a*", "destination": "/"}
]
}
Related
I am trying to move my application's API to Vercel. It is written in Typescript and uses Express.
The index.ts is located in <root>/src. The npm run build compiles it into <root>/dist directory. The file contains the following:
const app = express();
app.use((req: Request, res: Response, next: NextFunction) => {
//blah, blah, there is a lot going on here
})
app.use('/', common);
//... other app.use(s)
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));
module.exports = app;
I've got the following in the vercel.json file which is located in the root directory where the package.json also is:
{
"version": 2,
"installCommand": "npm install",
"buildCommand": "npm run build",
"outputDirectory": "dist",
"builds": [
{
"src": "dist/index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/index.js"
}
]
}
When locally I run npm run build, then vercel dev --listen 5000 I get Ready! Available at http://localhost:5000 and can go to http://localhost:5000/ping and get a response.
Now I commit the files to git, the deployment runs, but judging by the logs the npm install and npm run build commands are not running. No functions are created my /ping endpoint returns "Page not found".
Here is the deployment log:
This is what Build & Development Settings look like (the Root Directory is left blank):
I followed several recommendations I found online and according to them everything should work. I probably miss some setting somewhere. What is it?
If more information is needed, please let me know, I'll update my question.
Thank you.
--- UPDATE ---
I have set the Root Directory to src and checked the "Include source files outside of the Root Directory in the Build Step" checkbox. Now the npm install and npm run build are executing. As you can see some static files are deployed, but there are still no serverless functions and my /ping route returns 404 and "home" page, i.e. / route returns the content of the index.js file. In addition the local is not working either anymore, also returning 404 now.
Without that checkbox I was getting
Warning: The vercel.json file should exist inside the provided root directory
and still no install or build running.
Also worth noting that I had to change my tsconfig.json to have "outDir": "src/dist" instead of "outDir": "dist", otherwise I was getting
Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.
Removed the Root directory and back to square one, no npm commands running but local is working with / route returning Cannot GET / and /ping returning correct response.
For everyone out there who's looking for an answer, maybe this will help you.
In my case, what I needed is to create a folder, called api in my src folder, i.e. the folder that is specified as Root Directory in Build & Development Settings in Vercel. Within this directory, each serverless function needs a file named the same as the path of the route. For example, the file named "my-route.js" will be accessible via https://my-app-name.vercel.com/api/my-route.
All this file needs is an import of index.js file and module.exports. For example:
import app from '../index';
module.exports = app;
The index.js should also live the Root and contain your express setup.
If you want to have dynamic path parameters, the files' names in the api directory should be wrapped in square brakets, like [my-param.js]. You can also have sub-directories in the api foler.
Here are a few links that helped me figure this out:
https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa
https://medium.com/geekculture/deploy-express-project-with-multiple-routes-to-vercel-as-multiple-serverless-functions-567c6ea9eb36
https://ryanccn.dev/posts/vercel-framework/#path-segments
No changes were needed in my existing Express setup and routes files.
Hope this will help someone. Took me quite a while to figure it all out :)
I simply followed the doc by adding this to my next.config.js
module.exports = {
reactStrictMode: true,
async redirects() {
return [
{
source: "/",
destination: "/coming-soon",
permanent: false,
},
];
},
}
It does work on my machin even when I build the app but on netlify there is no redirect at all for some reason
According to the official Netlify docs:
Redirects and rewrites using next.config.js aren't currently supported for Next.js sites on Netlify. If you have these specified in a next.config.js file for your project, check out our redirects and rewrites docs to learn how to set them up in a _redirects or netlify.toml file instead.
So you basically need to create a _redirects file at the top level of your project with the following contents:
/ /coming-soon 302
The 302 status code is equivalent to permanent: false that you've done in your config.
If you have a netlify.toml, then you can add something like this to make your stuff work:
[[redirects]]
from = "/"
to = "/coming-soon"
status = 302
force = false
References:
Redirects and rewrites | Netlify Docs
Redirect options | Netlify Docs
Migrating an existing Next.js project to Netlify
When we deploy a Next.js project on Netlify it automatically gets all the necessary dependencies including the Essential Next.js plugin (If it is not installed in the plugin tab, we have to install it manually). This plugin configures your Netlify site to allow essential Next.js capabilities. Version 4 of the Essential Next.js plugin adds support for native Next.js rewrites and redirects.
Basically, you can use native Next.js redirects/rewrites (configured in next.config.js) in Netlify by installing the Essential Next.js plugin version 4 or higher to your Next.js site deployed in Netlify.
Refer this to learn more about using Next.js and Netlify redirects/rewrites rules.
https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/redirects-rewrites.md
I have created a Node.js application and trying to deploy in the Firebase for hosting. Before deploying, I am making sure that it will work properly using the command firebase serve --only hosting,function. This command creates the server and I am able to access the Home page of the application using the URL (localhost:5000) provided by Firebase but for some reason, my Angularjs HTTP request is unable to find the Node.js controller due to which I am getting the 404 URL not found error in the brwoser.
As soon as the index.html is accessed using the localhost:5000 I am trying to populate various dropdown options in my frontend. These options are present within the Node.js controller file populator.js. Hence I am making an HTTP request from angularjs to my node.js controller but I get the 404 URL not found error. I am guessing there is some issue with folder structure or the firebase.json file due to which the code is unable to find my Node.js controller.
My firebase.json file:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "app"
}
]
}
}
My index.js file:
const functions = require("firebase-functions");
const express = require('express');
const app = express();
//call function to popultae the fields
app.get('/populateFields', function(req,res){
populateFields.BusinessStep(function(data){
res.send(data);
});
});
exports.app = functions.https.onRequest(app);
Here is my folder structure
Firebase Hosting (root)
|--functions
|---index.js
|---package.json
|
--public
|---index.html
|
--firebase.json
--.firebaserc
I tried running the command firebase serve --only hosting,function in both the root directory and within the functions folder but none worked and still getting the error The requested URL was not found on this server.
I found many post related to this issue but could not find there solution after trying the methods mentioned there hence posting this question.
I was running the command wrongly so I was getting that issue the actual command is
firebase serve --only functions,hosting
If anyone is facing the issue then run the command correctly.
"I was running the command wrongly so I was getting that issue the actual command is
firebase serve --only functions,hosting"
I guess that the error was for specifying function instead of functions
I have a site with a classic SPA redirect, like so:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
The problem is that when I try to submit a sitemap to google search console, placed on the root of my site, it always renders /index.html. I've tried redirecting /sitemap.xml to /static/sitemap.xml and nothing.
Am I doing something wrong? What am I missing?
You need to add the custom rules in Netlify for your robots.txt and sitemap.xml.
I've just created a __redirects file on the same level as my index.html with the following contents:
/robots.txt /robots.txt 200
/sitemap.xml /sitemap.xml 200
/* /index.html 200
After doing that, when you access yoursite.com/robots.txt you should see that the SPA router does not work and Netlify gives you a 404. That means the redirect worked.
Now all you need to do it's make sure you have those files in the directory you deploy to Netlify.
If you're using Angular, make sure you add your files in the angular.json config, under assets:
"architect": {
"build": {
"assets": [
"src/favicon.ico",
"src/assets",
"src/_redirects",
"src/robots.txt",
"src/sitemap.xml"
],
...
I am developing a web application using ASP.Net core MVC. Initially to get started I manually copied the bootstrap and jQuery directly under wwwroot/lib folder. This worked fine.
To make the code maintainable, I thought it would be better to use client side library manager like libman.
This is what I have got in libman.json
{
"version": "1.0",
"defaultProvider": "unpkg",
"libraries": [
{
"library": "bootstrap#4.1.3",
"destination": "wwwroot/lib/bootstrap/"
},
{
"provider": "cdnjs",
"library": "jquery#3.3.1",
"destination": "wwwroot/lib/jquery/"
}
]
}
When I restore the client side library, I can see the files correctly restored under lib folder
Now when I compile and test the app locally using IIS, I am getting 500 error in developer tools while fetching bootstrap.css, jquery.js and bootstrap.js
When I tried to load bootstrap.css directly, I get 500 and message that access to the file is denied
UnauthorizedAccessException: Access to the path 'C:\code\wwwroot\lib\bootstrap\dist\css\bootstrap.css' is denied.
Any thoughts what would be causing this error?