Build pipeline with an existing React App

[xavierakram]

Hi Docusauruses;

Loving the package so far, I have one question around integration into an existing application;

lets say you have an existing react-app

And I want to include Docusaurus as part of the trex-app under a new directory docs

trex-app
├── public
├── src
├── docs (docusaurus)
├── package.json
├── tsconfig.json

How would you ensure that docusaurus is included in the build pipeline?

bonus question: and how would you link between the apps?

[slorber]

Hi

You can't seamlessly expect to navigate from one SPA (CRA) to another SPA (Docusaurus): it will use a regular browser navigation and reload the load.

You can deploy both apps to different subdomains:

• myDomain.com
• doc.myDomain.com

Or you can use subpaths:

• myDomain.com/
• myDomain.com/doc

Note: this is how we deploy Docusaurus i18n, each locale has its own separate SPA, and the locale dropdown does not perform a SPA-like navigation:

• https://docusaurus.io/
• https://docusaurus.io/fr

How would you ensure that docusaurus is included in the build pipeline?

You don't, those are 2 totally different apps. Therre is no way for Docusaurus to build CRA, or for CRA to build Docusaurus. You build the 2 apps independently and then eventually assemble them before uploading the static assets to your CDN.

And I want to include Docusaurus as part of the trex-app under a new directory docs

You can put the Docusaurus docs under the CRA folder if that feels better for your usecase, but you should rather avoid putting the docusaurus site inside the CRA folder: those are 2 independent apps.

Note: in theory everything you can do with CRA should be doable with SSgs like Gatsby, Next or Docusaurus as well, and you can use React-Router in a custom Docusaurus page too. We will document this better and provide some helpers to make this easier.

[Siemienik]

IMO, best way to approch this is to use NGINX (or another proxy):

server {
    location /docs/ {
        root /var/www/documentation;
    }

    location / {
         root /var/www/website;
    }
}

That makes both app hermetic and separated from each other. Additionally, both can be deployed independently.

[slorber]

You can also do a similar thing on all CDN like netlify cloudfront Vercel Cloudflare and it will be more performant than self-hosting