How to configure react app with a router and docusaurus app on the /docs path

[karltaylor]

Hello,

I have two netlify apps building two different static apps,

One is a create-react-app that uses react-router and the other is a docusaurus static app.

So in a nutshell:

myapp.com/login # React App
myapp.com/profile # React App

myapp.com/docs # Redirect to docusaurus netlify app
myapp.com/docs/getting-started # docusaurus app with its own router

The react app netlify.toml is as follows

[[redirects]]
  from = "/docs"
  to = "https://docusaurus-website.netlify.com"
  status = 200

# Redirect to / so react-router works.
[[redirects]]
  from = "/*"
  to = "/"
  status = 200

I want to host my docusaurus site on mysite.com/docs however when i set the baseUrl to /docs my site is rendered but the assets do not load and the docusaurus router does not work.

Am I doing this the best way?

[jen]

Hey @karltaylor,
Yup, this looks like the right pattern It’s similar to this one:

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

Last reviewed by Netlify Support Staff: December 2022 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 codebase per site” model. But this isn’t to say that you c…

For the baseUrl for your docs site config, I would start with / as described in the Docusaurus docs.

As for your redirect rules, your first one will likely need a * and :splat:

  from = "/docs/*"
  to = "https://docusaurus-website.netlify.com/:splat"
  status = 200
  force = true

And the second one might need to be to = "/index.html".

Want to give this all a try and let us know if it works for you?

[Anirudh]

I would like to redirect www.economize.cloud/docs to https://economize-docs.netlify.app. Both are hosted in seperate repositories and deployed through Netlify.

Below is the netlify.toml configuration of economize.cloud site.

[[redirects]]
  from = "/docs/*"
  to = "https://economize-docs.netlify.app/:splat"
  status = 200
  force = true 

Below is the configuration of docusaurus:

module.exports = {
  title: "Economize Docs",
  tagline: "Your cloud infrastructure costs, demystified.",
  url: "https://economize-docs.netlify.app",
  baseUrl: "/docs/",
  onBrokenLinks: "throw",

While www.economize.cloud/docs redirects properly to Netlify, the https://economize-docs.netlify.app site still throws A very common reason is a wrong site baseUrl configuration.

I tried setting the baseUrl with / as you have mentioned, in that case, the netlify app works but economize.cloud/docs does not work. Please let us know what am I configuring wrong. Thanks in advance.

[hillary]

hey there, @Anirudh

Welcome to the Netlify Forums It looks like this thread has been a bit quiet since you reached out last week. Are you still encountering difficulties? If so, let us know what additional troubleshooting steps you have taken since you first posted. If you aren’t, please share your solution

[Anirudh]

Hi Hilary, the error still persists. As mentioned, the redirect URL works without any error message, but the [site at Netlify](https://economize-docs.netlify.app/) still errors out. While this isn’t a blocker for us, would love to hear if you know any solution for this.

[Scott]

I would download your site and see if/where your index.html is — let’s focus on working out where and how we can get the economize-docs site working!