How to redirect?

[artrn]

Hello.

I’m very new to Netlify and kind of a newbie regarding deployment, building, redirecting… So please take that in consideration.

I recently developed a website using Gatsby and deployed it on Netlify (don’t have a custom domain name for the moment but I plan to – just experimenting right now). This website includes a portfolio. I’ve got a portfolio section with project cards and in each card there is a link to the project (<a href=""></a>) in order to try it (for instance a single webpage app).

One of this project was developed using pure Javascript (no React), but as I did not figured out how to render it on my Gatsby website I decided to deploy it from its own github repository on its own domain.

But now I would like to make the link between my main domain (Gatsby website) and this little project hosted on another domain in a proper way. When the user will click on the anchor in the project card, I would like him to be redirected to an URL that looks like so:

“https://myfuturedomainname/myportfolioprojectname”

Unfortunately I feel clearly overwhelmed and I don’t know where to start to achieve what I want. Does someone can explain me in a very simple way how to proceed?

To help me I already read this:

[Support Guide] Can I deploy multiple repositories in a single site?

Say you have an awesome blog as part of your larger website. But you’ve chosen to have your awesome blog in its own, separate git repository apart from the rest of your site content. How can you make this work so that your visitors have a seamless experience browsing that content as well under your one, main hostname? Proxying to the rescue! Yes, Netlify is built around the “single code base per site” model. But this isn’t to say that you can’t host multiple repositories under a single hostnam…

[Support Guide] Making redirects work for you - troubleshooting and debugging

First Steps You’ve put blood, sweat and tears in to building an incredible static site with all the bells and whistles. However, you’ve configured some redirect rules and you’ve come unstuck… they don’t appear to be working! Ensure you’ve followed the correct guidance Your first port-of-call should always be the Netlify Docs. Our redirects and rewrites document covers a broad range of use cases, from status codes to proxying another service and everything in between. Ensure you’re using the co…

[Pie]

Hey there!

What you’ll need is a proxy rewrite! So long as both of the sites are within the same Netlify team, you could have a redirect rule such as:

/images/* https://maindomain.netlify.app/images/:splat 200

The rule would live in a file called _redirects in your projectsite (not your maindomain) repo.

This means that any resource under /images/ on your project site (such as https://projectsite.netlify.app/images/banana.png will actually serve content from https://maindomain.netlify.app/images/banana.png… but in your browser, it will show https://projectsite.netlify.app/images/banana.png !

I hope that this is what you’re looking for!

[artrn]

Hi Pieparker. Thank you for this really fast answer.

I tried what you adviced but still didn’t obtain a satisfying result. I’m not sure I really get what you wrote.

My maindomain right now is a random netlify app name as my project domain (let’s call it projectsite as you wrote) – so two netlify apps at the moment (same team). I plan to add a custom domain name to my maindomain like https://myfirstnamemylastname.com.

So when the user will click on the link in the project card at https://myfirstnamemylastname.com, he will be redirected on the projectsite, and browser URL will display https://myfirstnamemylastname.com/project/projectname or https://myfirstnamemylastname.com/projectname.

I don’t want the projectsite URL to be displayed in the browser. Instead everything rooted to https://myfirstnamemylastname.com/.

So I’m not sure what you wrote is what I want to achieve :

@Pie

but in your browser, it will show https://projectsite.netlify.app/images/banana.png !

[Pie]

@Pie

/images/* https://maindomain.netlify.app/images/:splat 200

@artrn,

Yep, the above rule will still work. On your firstnamelastname.com site (which is currently only accessible via a .netlify.app domain), you can add this rule:

/projectname/* https://projectsite.netlify.app/projectname/:splat 200

This will ensure that the projects appear to be served from your firstnamelastname.com domain.

[artrn]

@Pie
Hello. Sorry I didn’t reply. It seems easy but I didn’t manage to make it work so I got frustrated and felt uncomfortable… I applied what you told me and it did not work. I think I’m not so far to solve the problem though.

Just to be clear, here is my main netlify site (the one I plan to have a custom domain name for): https://angry-galileo-73e1f3.netlify.app/
In there you can find a ‘Projects’ section with a card. When you click on ‘Demo’ you are redirected to https://dreamy-shockley-048190.netlify.app/

So to have https://angry-galileo-73e1f3.netlify.app/projects in the browser url I followed what you told me. I created a _redirects file in the root folder of my main website (https://angry-galileo-73e1f3.netlify.app/). Here is the content:

/projects/* https://dreamy-shockley-048190.netlify.app/projects/:splat 200

It’s not working but I don’t why… Am I supposed to do anything in the root folder of my little project (like rename something)? Also root folders of main website and little project both live in different repos on Github.

[fool]

Thanks for clarifying, @artrn! Let’s get things working

As far as I can tell, you have hardcoded that URL on dreamy-shockely in your html on angry-galileo:

<div class="projects-section-module--l-box--310Vy"><a href="https://dreamy-shockley-048190.netlify.app/" class="sc-Axmtr iVHkBJ projects-section-module--demo-link--2daB3">Demo</a>

I think what you meant to do is:

1. configure the proxy redirect you mention:

/projects/* https://dreamy-shockley-048190.netlify.app/projects/:splat 200
It is not in place on your current deploy of angry-galileo, in case you thought it was.

2. then edit the source code on your angry-galileo site, to refer to instead of dreamy-shockley, angry-galileo:

Demo

3. but you’ll also need to deploy the angry-galileo site as /projects/index.html instead of /index.html, so that it is where the proxy redirect points - under /projects rather than under / where you have the demo setup today.

[artrn]

@fool Thanks a bunch for replying me. I changed angry-galileo for a registered custom domain name which is now www.arthurrenon.dev Anyway I guess the same method applies…

1. Ok - I added that _redirects file in the root of my project with:
   /projects/* https://dreamy-shockley-048190.netlify.app/projects/:splat 200

2. Not sure - I’ve got to modify the href of my anchor tag like so? href='https://www.arthurrenon.dev/projects/dreamy-shockley-048190.netlify.app/'

3. I guess I’ve got to rename my /index.html as /projects/index.html in my public folder right?