gatsby-plugin-s3: 301 Redirect

Creating a fork duplicates the project into a repository that you own. You can change that freely. If we make updates to our version you can pull those into your repository, and if you make changes that you think we’d like you can submit a Pull Request to us.

In your website’s package.json you have a line that looks something like this:

"gatsby-plugin-s3": "^0.3.8"

If your fork is hosted on GitHub, you can alter this to point to your fork by doing something like:

"gatsby-plugin-s3": "ahmadkhalaf1/gatsby-plugin-s3"

You can find more details here:

• https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo
• https://docs.npmjs.com/cli/v6/configuring-npm/package-json#git-urls-as-dependencies

Best of luck 😃

302 redirects in S3 Static Website Hosting are usually to add a trailing slash. If you add a trailing slash to your redirect’s toPath it should only need a single 301 redirect.

Thanks for the offer to buy me a beer. We don’t have any mechanism set up for tipping, and I’m just happy that it’s working for you.

Fixing the bug permanently should be fairly straightforward, but first I want guidance from the Gatsby Core team on how they think redirects should be handled. Unfortunately they recently restructured their community, and now it’s harder to get in touch with them. I might try resubmitting my question as a bug instead of a discussion to see if that gets better visibility.

At the moment I’m thinking the best solution would be for us to subtract pathPrefix from the beginning of the fromPath of all redirects, then to add bucketPrefix. This is basically just a workaround for what I consider to be a bug in Gatsby.

gatsbyjs/gatsby#27988

Thanks a lot ! i will check the documentation u mentioned and update you with the result tomorrow ^_^ thanks again for your time , good night

it working !!! i removed my lambda edges for Cache and add index.html as you once told me here https://github.com/jariz/gatsby-plugin-s3/issues/208#issuecomment-725027672 and now its working !!!

it was redirected in 2 stages from 301 to 302 then to 200, no idea why 😄 but i am now super happy its working .

i want to thank you very much for your time and effort , i would like to tip you or buy you a beer 😃 please let me know how can i do that.

also would like to know what is the next step to fix this bug so i can switch back to your version and removed my Temp NPM .

Thanks a lot

Check out the “Make a CloudFront Distribution” sectin of this guide. They added the origin while creating the distribution, but you can do the same thing when adding an origin to an existing distribution. Basically you just need to put the S3 Static Website Hosting endpoint in the Origin Domain Name field.

Good question, it was late at night when I gave my last reply and I didn’t think it through properly. 3 options:

1. Publish your fork to npm. Then in your website, change package.json to say "ahmadkhalaf1/gatsby-plugin-s3": "^0.3.8"

2. Make a branch in your fork called “build” or “javascript”. Remove *.js and *.d.ts from .gitignore on this branch. On your website, change package.json to say "gatsby-plugin-s3": "ahmadkhalaf1/gatsby-plugin-s3#build"

3. On your CI, after you’ve run npm ci for your project, run:

cd ./node_modules/gatsby-plugin-s3
npm ci
npm run-script build

(That last one might or might not work, I’ve had issues before with npm in nested projects)

It seems from here and here that maybe Gatsby itself is prefixing the paths. I’ll try to raise this with the Gatsby Core team and see what they advise. This is unlikely to be a quick fix sorry, but I want to make sure we do this right.

In the meantime, your best option might be to create a private fork and remove these lines.

@JoshuaWalsh ok i guess i find out why its not working , and i think ( not so sure ) that there is a bug that does not handle pathPrefix with createRedirect in Gatsby plugin s3 .

so in short , here what i could find out in my config i have

pathPrefix: '/de',

and 
bucketPrefix: 'de', in gatsby plugin s3 option .

so my main domain is , https:/www.mydomain.de/de/index-page-title/slug-title for example .

so after my build is done , my s3 bucket contain 1 main folder de and all my build files are inside this folder.

create redirect

 createRedirect({
            fromPath: `/${indexPageTitle}/${oldSlug}`,
            toPath: `/${indexPageTitle}/${newSlug}`,
            isPermanent: true,
            force: true,
          });

checking my ```s3.redirectObject.json ```
i can see it contain 

{
	"fromPath": "/de/index-page-title/old-slug",
	"isPermanent": true,
	"redirectInBrowser": false,
	"toPath": "/de/index-page-title/new-slug",
	"force": true
}

now at the final step , when i do npx -n \"-r dotenv/config\" gatsby-plugin-s3 deploy --yes

all my build files are copied under de folder in my s3 bucket , but what i find out that all redirect objects are copied under another /de folder inside the main /de folder which is wrong and i am kind of sure that this is the problem .

this is one of the output i see while syncing to s3 
⠦ Syncing...
  Created Redirect de/de/index-title/old-url => https://stage-mydomain.de/de/index-title/new-url

as u see the problem is here ,de/de , this is why i assume its an issue with this step of Gatsby Plugin S3.

and this is a picture how it look like inside my S3 Bucket

this is the main DE folder

and this is what we see inside the de folder

now inside the second de folder i can find folders with (index-title) name , and inside it there is an object with meta data x-amz-website-redirect-location pointing to the right redirect url . but its an object not a folder with index.html inside , is this how it should be?

Thanks and sorry for the long post 😃 i hope we can solve this before my boss get more angry 😄