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"
],
...
Related
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": "/"}
]
}
I am struggling to understand how firebase.json redirect rules work.
Here I define the hosting to my website, which works perfectly pointing to dist/project-name directory.
"hosting": [
{
"target": "project-name",
"public": "dist/project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
...
...
However, things start to get confusing when I try to implement redirect rules. Let's say I want requests to non-existing files and directories be redirected to my hosting public target. I would assume that this is the proper way to define it:
"rewrites": [
{
"source": "**",
"destination": "dist/project-name"
}
]
But making requests to random endpoints like localhost:5000/abcdef, localhost:5000/testing are not being redirected so the request fails. What should the source be then?
Now, let's say that instead of redirecting to my public target directory, I want to redirect to a firebase function with Express.
"rewrites": [
{
"source": "**",
"destination": "app"
}
]
Well, that does not work either in the emulator localhost:5000. Even though I can see functions work (Express app) in the emulator localhost:5001
I am thinking because the /functions directory is not part of the dist folder. But then why redirecting to dist/project-name does not work either? Any ideas? Thank you!
Alright, I had to try a few things and read the documentation to understand what I was doing.
Docs:
https://firebase.google.com/docs/hosting/functions#use_a_web_framework
https://firebase.google.com/docs/hosting/full-config#rewrites
First, I was thinking that by doing "destination": "dist/project-name" in the rewrites, the url was always going to redirect to the hosting site. So no matter what path I go to (i.e. /abc) it was going to show me the index.html file. Well, that is not the case. The rewrite is not even happening and I could see that in the logs http://localhost:4002/logs. I think that is because of the priority order.
Second, my Express.js app is deployed as a function in firebase. Rewrites to Cloud Functions should be "function": "app" not "destination": "app".
Last but not least, my Cloud Function with Express.js was deployed to us-east1 like this exports.app = functions.region("us-central1").https.onRequest(app);. However, here we can see that Firebase Hosting only accepts us-central1 for Cloud Functions at the moment.
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 am struggling with the deployment of a Vuejs front-end on my local IIS.
I would like to have my app deployed into a folder named FE_STB which is a sub-directory within my C:\inetpub\wwwroot folder.
Ideally, the URL to access the front-end would be http://localhost/FE_STB/.
In order to do so, I tried the following in vue.config.js:
module.exports = {
// Used to build the path for the css, js
baseUrl: process.env.NODE_ENV === 'production'
? '/FE_STB/'
: '/',
// The folder where the app will be built in the project directory instead of the default dist folder
// outputDir: 'Vue',
};
running npm run build generates an index.html, a favicon.ico, my img, js, css and fonts folders.
The index.html contains link tags such as (<link href=/FE_STB/css/chunk-05c5.672f5bfa.css />) and i thought it was going in the good direction.
However, it keeps returning a
404 not found error
when i try to access http://localhost/FE_STB/.
On the other hand, If I copy only the index.html into the root directory of my IIS installation (wwwroot) instead of the FE_STB subdirectory, and check the http://localhost/ URL, my app appears correctly.
However, when I start browsing the app and hit the refresh button, I get an error. For example, If I am on http://localhost/about/ on my app and refresh it with F5, I will get a 404 error as it’s looking for C:\inetpub\wwwroot\about\ directory which doesn’t exist obviously.
I also tried the web.config and the IISrewrite solutions as explained on the vuejs website or tried to add:
const router = new VueRouter({
mode: 'history',
// To define sub-directory folder for the deployment
base: 'FE_STB',
routes,
linkActiveClass: 'active',
scrollBehavior(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 };
},
});
in my router.js but it doesn’t change anything.
Any tips or directions would be really helpful.
Thank you
S.
I have an API project with Sailsjs, this was created with option --no-frontend.
So, i have an action that make an image upload to a folder named "uploads" in root directory, images are uploaded with success and i can see them in this folder, everything's ok till now.
When i try to access this image from another application via URL like:
http://localhost:1337/uploads/image_name.jpg
I got 404. My question is: How can i access my uploaded images via URL in my custom folder uploads?
I have one technique that I prefer and it's pretty simple.
Inside .sailsrc add paths config like this:
{
"generators": {
"modules": {}
},
"paths": {
"public": "public"
}
}
Add folder to root of your app called public and inside add uploads folder like this:
After this, just lift your app and test.jpg will be available on localhost:1337/uploads/test.jpg
I end up serving images with Nginx block, like this:
server {
server_name myapi.dev;
location ~* ^.+\.(jpg|jpeg|gif|png)$ {
root /var/www/myapi/uploads/;
}
}
So, i can access images via URL:
http://myapi.dev/279b68b9-ae43-4674-a85d-94d5bad3365a.png