How can ExpressJS be used to direct users to individual standalone React applications?

Question

How can ExpressJS be used to direct users to individual standalone React applications?

I've spent a lot of time scouring the internet for a solution to my problem, but it seems like maybe I'm not asking in the right way.

My project involves creating a Node-Express website where ReactJS is only needed on specific pages, while the rest are server-side rendered.

For standard pages, I utilize Express and EJS to render the view. However, for pages built with React, I want them to function as individual single-page applications. Essentially, each React-built page should be separate without using React-Router across the entire site. The majority of the website does not require React functionality.

Currently, I am relying on a React CDN, but its capabilities are limited as I cannot npm install pre-made components.

If I want routes "/" and "/app" to be two distinct React apps, with all other routes being server-rendered, how can I achieve this? Should I run create-react-app twice in separate folders, one for "/" and one for "/app"?

node.js reactjs express server-side-rendering mern

Answer 1

Answer №1

Usually, in situations like this, I would recommend setting up a subdomain to segregate the app's logic. For example, if your main domain is example.com, which might be a dynamic website, you could create a admin.example.com subdomain to host your admin dashboard built with React or another single-page framework.

In response to your query, if you must stick to your current approach, the first step is to define a base name within the BrowerRouter of react-router-dom to serve your React app under a specific URL path.

// This configuration will host the react app at example.com/calendar
<BrowserRouter basename="/dashboard">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

Next, add the following line to your index.html file:

<base href="%PUBLIC_URL%/">

If you need to navigate to a specific URL within your React app, consider creating a separate history.js file:

//history.js
import {createBrowserHistory} from 'history';

export default createBrowserHistory({ basename: 'dashboard'});

Similarly, remember to use the custom history object when defining your routes:

<!-- import the history object and pass it as a prop here -->
<Router history={history}>
  ...
</Router>

Lastly, make sure to update the homepage path in your package.json file to match the base name you previously defined:

//package.json
"homepage": "./dashboard"

Once these steps are completed, you can proceed with setting up your routes as needed. If you're hosting on shared hosting/cPanel, simply upload the build folder to the main route directory of the domain. Alternatively, if you're using self-hosted Linux servers, organize different folders and utilize reverse proxy (Apache/Nginx) to manage traffic redirection according to your requirements. Hopefully, these instructions prove helpful.

Answer 2

Usually, in situations like this, I would recommend setting up a subdomain to segregate the app's logic. For example, if your main domain is example.com, which might be a dynamic website, you could create a admin.example.com subdomain to host your admin dashboard built with React or another single-page framework.

In response to your query, if you must stick to your current approach, the first step is to define a base name within the BrowerRouter of react-router-dom to serve your React app under a specific URL path.

// This configuration will host the react app at example.com/calendar
<BrowserRouter basename="/dashboard">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

Next, add the following line to your index.html file:

<base href="%PUBLIC_URL%/">

If you need to navigate to a specific URL within your React app, consider creating a separate history.js file:

//history.js
import {createBrowserHistory} from 'history';

export default createBrowserHistory({ basename: 'dashboard'});

Similarly, remember to use the custom history object when defining your routes:

<!-- import the history object and pass it as a prop here -->
<Router history={history}>
  ...
</Router>

Lastly, make sure to update the homepage path in your package.json file to match the base name you previously defined:

//package.json
"homepage": "./dashboard"

Once these steps are completed, you can proceed with setting up your routes as needed. If you're hosting on shared hosting/cPanel, simply upload the build folder to the main route directory of the domain. Alternatively, if you're using self-hosted Linux servers, organize different folders and utilize reverse proxy (Apache/Nginx) to manage traffic redirection according to your requirements. Hopefully, these instructions prove helpful.

How can ExpressJS be used to direct users to individual standalone React applications?

Answer №1

Similar questions

Refresh the context whenever the state object changes

What is the best way to iterate through JavaScript objects within a Jade template?

Developing single-page application frontends without utilizing node or npm

What can be done to ensure smooth functionality of my nested navigation menu on mobile devices?

What are the best practices for integrating Quill with Node.js and MongoDB?

The user ID encountered a CastError: Unable to convert the value "64e310ad9d821c557b4f9bc7" (of type string) to an ObjectId for the "userId" path due to a BSONError

Prop in a React component is undergoing mutation

Tips for customizing an Alert component in a React Native application

Troubleshooting a node-gyp issue with Karma

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Execute a simulated click on the Material-UI Tabbar using a programmatic approach or keyboard shortcut

Does the express static middleware make a new file read from the disk every time it is accessed by a client?

Attempting to display a collection of 16 diverse images by utilizing the Math.random function in conjunction with a

Transferring the user session data from an Express server to the state of a React

Tips for styling the Button component in the shadcn/ui library for maximum impact

Strategies for avoiding a hover component from causing distortion to its parent component in React

Ensuring that environment variables are properly set is essential for effective error handling

Encountering an error while setting up the object spread operator Babel plugin for ES201

Deployment to DigitalOcean fails due to GitHub action error

[Symbol(errorCode)]: 'INCOMPLETE_MEMBER_DATA' (MyApp)