How To Integrate ReactJS with OctoberCMS

Question

I am trying to integrate ReactJS with OctoberCMS with react application residing inside a directory named react inside of the OctoberCMS installation. I am unable to set the routing properly. Hitting the URL directly for example http://example.com/react/blog results in a 404 page. If I navigate to the same url (using my navbar) after first visiting the homepage I am able to open the page successfully. Please help me setting the routes correctly.

Also how shall I couple the two(react and octoberCMS). I think that my approach of keeping the react build inside a folder in the OctoberCMS install is false. What should be the correct approach?

In package.json I placed "homepage": "/react/" it works fine but opening the page in a new tab results in a 404 page rendered by OctoberCMS

I also tried <BrowserRouter basename = {'react'}> With this I end up with a url looking like http://example.com/react/react/about-us/

I tried placing the build content directly inside the root directory of octoberCMS installation, resulting in a straight up 404 page on hitting my base url.

<BrowserRouter>
  <TopBar />
  <Switch>
    <Route path={ `${process.env.PUBLIC_URL}/`} exact component={ HomePage} />
    <Route path={ `${process.env.PUBLIC_URL}/about-us`} exact component={ AboutUs} />
    <Route path={ `${process.env.PUBLIC_URL}/enquiry`} exact component={ Enquiry} />
    <Route path={ `${process.env.PUBLIC_URL}/contact`} exact component={ ContactUs} />
    <Route path={ `${process.env.PUBLIC_URL}/blog`} exact component={ Blog} />
    <Route path={ `${process.env.PUBLIC_URL}/terms`} exact component={ Terms} />
    <Route path={ `${process.env.PUBLIC_URL}/privacy-policy`} exact component={ PrivacyPolicy} />
    <Route path={ `${process.env.PUBLIC_URL}/request-purchase-offer`} exact component={ RequestPurchaseOffer} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/benefits`} exact component={ Benefits} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/how-dorrmat-works`} exact component={ HowDorrmatWorks} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/customer-reviews`} exact component={ CustomerReviews} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/offers`} exact component={ Offers} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/faqs`} exact component={ FAQS} />
    <Route component={ NoMatchFound} />
  </Switch>
  <Footer />
  <button onClick={ ()=> this.scrollToTop(500)} className = "scroll-top"></button>
</BrowserRouter>

I expect the react routing handling my routes instead of octoberCMS routing to a 404 page. Also When I try to open the page in a new tab it should not redirect to a 404 page.

Any kind of suggestion on how should I couple these two together would be helpful.

Marco Marco · Accepted Answer · 2020-07-10T09:33:09

If your React application lives inside OctoberCMS is perfectly normal that all paths are handled by OctoberCMS's router. You can solve your issue in two ways:

You can instantiate your app from a page handled by OctoberCMS, keeping in mind that you will have to define a route to redirect all requests to the entry point of your app. (you'll have to create a custom empty plugin and in its root create a routes.php file in order to define it)
Alternatively, in the OctoberCMS .htaccess file you can whitelist the path to your entry point, in order to bypass OctoberCMS

Hope this helps, happy coding!

How To Integrate ReactJS with OctoberCMS

1 Answers