How to publish a React.js project to your hosting account

React is a JavaScript library for building user interfaces.

If you simply include the React.js Library in your application's index.html file like this

<!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

please publish your application as normal, since all related .js files will be download to the browser and work properly.

Tip: Minify JavaScript for Production

While if your project is a plain client app generated from Toolchains, please follow the deployment instructions.

1. create a new React.js project

npx create-react-app my-app

2. run the application in the development environment

By default, it will start the development server at

Local: http://localhost:3000

cd my-app
npm start

3. design your application, test it with the development server, prepare to deploy the application

this will package all project files and related modules to a new build folder under the project directory

npm run build

4. navigate to the build directory, archive all the folders and files under the path to .zip file

5. upload the archived .zip file to your hosting account via File Manager or FTP client

6. unzip the .zip file to the target site path

7. access your site URL to check the application

8. if your application is configured with Client-Side Routing, for example, React Router

you will need to configure your production server to fallback to index.html for any requests that do not match a static file. Here is a sample to make the rewrite in the site's root web.config file

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="ReactRouter Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

9. access your site URL again to make sure everything works

Additional:

If you wish to deploy the React app to a subfolder of your website and access it via https://www.yourDomain.com/{subfolder}, you can control this with the homepage field in your package.json.

{
  "name": "your-app",
  "version": "1.0.0",
  "homepage": "/subfolder", // Update this to your subfolder path. The project was built assuming it is hosted at /subfolder/.
  // ... other configurations
}

then build the app and upload your production files.

Article ID: 2176, Created: June 3, 2021 at 1:50 AM, Modified: November 23, 2023 at 12:22 AM