How to add same domain to other sites/projects?

Support
, ,
#1

So let’s say i have a domain www.example.com that is with Netlify.

Currently on my main site i have different projects that just have a Link to external hosting site. But i want to move all my projects from external host to Netlify as separate Netlify sites(*netlify.app).

But when entering those sites i don’t to have the default *netlify.app domain on them and want them to have www.example/projects/project_one

Is there a way for me to link these projects to my main site using my main domain?

#2

hey Marius, I think what you are referring to is a Monorepo:

1 Like
#3

I’m just unsure, do i need to create two sites for those two projects? Because if i create two sites for them they will have their own domain and not sit under example.com/*?

So structure is like this

main_site (example.com)
   Project1 (example.com/project1)
   Project2 (example.com/project2)

So main_site will be main domain: example.com.

And then i want Project1 and Project2 to be accesses using these two links:

  • example.com/project1
  • example.com/project2
#4

I think this is my solution [Common Issue] Can I deploy multiple repositories in a single site?

#5

Yup, that sounds right. Let us know how it goes.

#6

Yep the routing is working great, only thing i needed to add in my main domain:

[[redirects]]
from = "/app1"
to = "https://determined-curie-bc9b33.netlify.app/"
status = 200

BUT, having issues with axios posting to app1 from my main domain www.marius.dev/app1.

So if you open www.marius.dev/app1 you will see 3 buttons that onClick send post to https://determined-curie-bc9b33.netlify.app but the first two wont work and only the last button will because in axios i have hardcoded my actual domain name.

Full code app1:

import React from 'react'
import axios from 'axios'

export default function App() {
  const currentHost = window.location.href
  console.log(window.location)
  console.log('Current Host', currentHost)

  const submitLocalHost = async (value, actions) => {
    await axios
      .post(`${currentHost}_base`)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  const submitLocalHostWithS = async (value, actions) => {
    await axios
      .post(`_base`)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  const submitNetlifyApp = async (value, actions) => {
    await axios
      .post(`https://determined-curie-bc9b33.netlify.app/_base`)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  return (
    <>
      <button type="button" onClick={submitLocalHost}>
        Test 1
      </button>

      <br />

      <button type="button" onClick={submitLocalHostWithS}>
        Test 2
      </button>

      <br />

      <button type="button" onClick={submitNetlifyApp}>
        Netlify App
      </button>
    </>
  )
}

Ofcourse there is no issues when i do this from the actual app1 domain https://determined-curie-bc9b33.netlify.app/

So is there a way for me to have some kind of variable or maybe something else in config so that between my dev and prod environment i don’t need to think about what variable i need place in axios when doing these type of re-direct/proxy?

#7

You can probably use one of the read-only env vars that we set for your deploy: https://docs.netlify.com/configure-builds/environment-variables/#read-only-variables. Maybe the CONTEXT var works for you?