Deploying a Client-Side Rendered create-react-app to Microsoft Azure

Deploying a React application to Microsoft Azure appears straightforward, but hidden complexities exist. This guide focuses on deploying create-react-app (or similar front-end frameworks using pushState routing) to Azure, minimizing client-server routing conflicts.

A brief anecdote illustrates the challenges: In a previous project with a React front-end and ASP.NET Core back-end deployed separately to Azure, page refreshes resulted in 404 errors due to routing misconfigurations. This highlighted the need for proper server-side configuration to handle client-side routing.

Production-Ready React Builds

Building a React app for production (using npm run build) creates an optimized build folder containing static assets. Deploying this folder to a server is sufficient for a live application. The structure typically resembles:

<code>→ build
  → static
    → css
      → css files
    → js
      → js files
    → media
      → media files
  → index.html
  → other files...</code>

Client-Side Routing with React Router

React Router leverages the HTML5 pushState API. PushState updates the URL without a full page reload, enabling client-side routing. However, this presents challenges when deploying to a server. A standard server expects to find files matching the URL path; with client-side routing, this isn't the case. The server must be configured to serve index.html for all routes.

Express.js, for example, requires this configuration:

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

This assumes the React app is hosted at the server root. For separate front-end and back-end projects, this approach is problematic. Since we're deploying a static app, a back-end isn't strictly necessary.

Azure App Service Deployment

To deploy to Azure:

1. Create a new App Service in the Azure portal.
2. Navigate to the Deployment Center. We'll use Local Git with Kudu as the build provider.
3. Azure provides a Git remote URL; clone this locally.
4. After building the React app (npm run build), initialize a Git repository in the build folder, commit changes, and push to the Azure remote.

Crucially, ensure your package.json specifies a supported Node.js version for Azure (check available versions using az webapp list-runtimes). Add a line like "engines": {"node": "10.0"}.

The initial deployment may fail on page refreshes due to the 404 error.

Reconciling Client-Server Routing in Azure

To resolve this, add a web.config file to the build folder:

<?xml version="1.0"?>
<configuration>
  <system.webserver>
    <rewrite>
      <rules>
        <rule name="React Routes" stopprocessing="true">
          <match url=".*"></match>
          <conditions logicalgrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchtype="IsFile" negate="true"></add>
            <add input="{REQUEST_FILENAME}" matchtype="IsDirectory" negate="true"></add>
            <add input="{REQUEST_URI}" negate="true" pattern="^/(api)"></add>
          </conditions>
          <action type="Rewrite" url="/"></action>
        </rule>
      </rules>
    </rewrite>
  </system.webserver>
</configuration>

Rebuild and redeploy. The application should now function correctly. For continuous deployment, explore Azure's continuous integration/continuous deployment (CI/CD) features.

Conclusion

Azure offers robust capabilities for deploying React applications. Understanding client-server routing interactions is key to successful deployments. Further resources on Kudu, Node.js deployment, and static site deployment on Azure are recommended for deeper understanding.

The above is the detailed content of Deploying a Client-Side Rendered create-react-app to Microsoft Azure. For more information, please follow other related articles on the PHP Chinese website!