How to redirect?

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:


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 :+1:!

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

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 :

@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.

@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.

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

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.

  1. then edit the source code on your angry-galileo site, to refer to instead of dreamy-shockley, angry-galileo:
Demo
  1. 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.

@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?