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

Programming, error messages and sample code > Node.js
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/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/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.
 
 
 
 
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