


Deploying a Client-Side Rendered create-react-app to Microsoft Azure
Apr 21, 2025 am 09:53 AMDeploying 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:
- Create a new App Service in the Azure portal.
- Navigate to the Deployment Center. We'll use Local Git with Kudu as the build provider.
- Azure provides a Git remote URL; clone this locally.
- After building the React app (
npm run build
), initialize a Git repository in thebuild
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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.

TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot

Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin

There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

To make the entire grid layout centered in the viewport, it can be achieved by the following methods: 1. Use margin:0auto to achieve horizontal centering, and the container needs to be set to set the fixed width, which is suitable for fixed layout; 2. Use Flexbox to set the justify-content and align-items properties in the outer container, and combine min-height:100vh to achieve vertical and horizontal centering, which is suitable for full-screen display scenarios; 3. Use CSSGrid's place-items property to quickly center on the parent container, which is simple and has good support from modern browsers, and at the same time, it is necessary to ensure that the parent container has sufficient height. Each method has applicable scenarios and restrictions, just choose the appropriate solution according to actual needs.

To create an intrinsic responsive grid layout, the core method is to use CSSGrid's repeat(auto-fit,minmax()) mode; 1. Set grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) to let the browser automatically adjust the number of columns and limit the minimum and maximum widths of each column; 2. Use gap to control grid spacing; 3. The container should be set to relative units such as width:100%, and use box-sizing:border-box to avoid width calculation errors and center them with margin:auto; 4. Optionally set the row height and content alignment to improve visual consistency, such as row

FeaturedetectioninCSSusing@supportschecksifabrowsersupportsaspecificfeaturebeforeapplyingrelatedstyles.1.ItusesconditionalCSSblocksbasedonproperty-valuepairs,suchas@supports(display:grid).2.Thismethodensuresfuturecompatibilityandavoidsrelianceonunrel
