Скачать или смотреть How to Build Multiple React Applications on Heroku Using Post-Build Commands

Learn how to successfully build and deploy multiple React applications on Heroku using a single Node.js server and `post-build` commands.
---
This video is based on the question https://stackoverflow.com/q/62725268/ asked by the user 'Sagar Chavan' ( https://stackoverflow.com/u/13720386/ ) and on the answer https://stackoverflow.com/a/62725368/ provided by the user 'Vrecer' ( https://stackoverflow.com/u/5342251/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: how to build multiple react applications at heroku using post build

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Build Multiple React Applications on Heroku Using Post-Build Commands

If you’re working with multiple React applications and looking to deploy them on Heroku using a single Node.js server, you may find yourself encountering some challenges. Specifically, you might be grappling with how to configure your post-build script to handle multiple applications efficiently. In this guide, we'll explore common problems you may face and provide clear solutions to help you deploy your applications smoothly.

The Challenge: Deploying Two React Applications

When deploying applications, it's not uncommon to want to use a single Node.js server to serve multiple React front-end applications. The initial setup for one React application is relatively straightforward. However, when the time comes to configure multiple apps in one clean process, issues can arise – as you may experience with Heroku’s post-build feature.

Here's an example of how you might typically set up a single React application:

[[See Video to Reveal this Text or Code Snippet]]

You may want to extend this configuration to include a second application, as shown below:

[[See Video to Reveal this Text or Code Snippet]]

However, the new configuration does not work as expected, leading to deployment errors.

The Solution: Correcting the post-build Command

The issue arises in your post-build command, specifically in how you're navigating between directories. The correction involves ensuring the command structure is accurate. The mistake here was a missing slash (/) in the directory change command.

Here’s the fix:

Locate the Incorrect Command: Identify where you wrote the misformatted cd command to navigate to the second application directory.

Correct Syntax: Change cd .. end-user to cd ../end-user for proper directory navigation.

Updated post-build Script

After making the correction, your updated script should look like this:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Fixed Command

cd shop-user: This changes the directory to your first React application.

npm install: Installs the necessary packages for the project.

npm install --only=dev --no-shrinkwrap: Installs development dependencies, ensuring no conflicts arise.

npm run build: Builds the React application for production.

cd ../end-user: Correctly navigates to the second application's folder.

Followed by the same series of commands for the second application.

Conclusion

By following these guidelines, you can successfully configure Heroku to handle multiple React applications running through a single Node.js server. Always double-check your directory paths during setup to avoid deployment issues. With the corrected post-build command, your applications should deploy seamlessly, allowing you to focus on developing features rather than troubleshooting deployment errors.

Feel free to reach out if you have any questions or need further assistance with your Heroku deployment process!