{"id":145986,"date":"2026-07-06T04:02:48","date_gmt":"2026-07-06T04:02:48","guid":{"rendered":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-deploy-react-app\/"},"modified":"2026-07-06T04:02:48","modified_gmt":"2026-07-06T04:02:48","slug":"how-to-deploy-react-app","status":"publish","type":"post","link":"\/ca\/tutorials\/how-to-deploy-react-app","title":{"rendered":"How to deploy a React app in 6 steps"},"content":{"rendered":"<p>To deploy a React app, <strong>create a production build, connect the project to a host, configure the build settings, and publish it to a live domain<\/strong>.<\/p><p>A deployed React app runs on a server with a public URL, not just on the computer you used to build it.<\/p><p>Managed React hosting typically handles most of the deployment process each time you push your code to GitHub.<\/p><p>React app deployment takes six steps:<\/p><ol class='\"wp-block-list\" wp-block-list'>\n<li>Develop your React project.<\/li>\n\n\n\n<li>Push the React app to GitHub.<\/li>\n\n\n\n<li>Connect the host to your repository.<\/li>\n\n\n\n<li>Set the build command and output directory.<\/li>\n\n\n\n<li>Configure environment variables.<\/li>\n\n\n\n<li>Deploy and test the live React app.<\/li>\n<\/ol><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-what-do-you-need-before-deploying-a-react-app\"><strong>What do you need before deploying a React app?<\/strong><\/h2><p>Before deploying a React app, <strong>you need a<\/strong> <strong>working project, the tools to build and push it, and a host that supports <\/strong><a href=\"%5C%22\/tutorials\/what-is-react%5C%22\">React<\/a>. A deployable React project should build without errors on your computer.<\/p><p>Here are the complete prerequisites:<\/p><ul class='\"wp-block-list\" wp-block-list'>\n<li>A working React project built with Vite or Create React App.<\/li>\n\n\n\n<li>Node.js and npm installed on your computer to run the build.<\/li>\n\n\n\n<li>Git installed to track changes and push the code to GitHub.<\/li>\n\n\n\n<li>A GitHub account to store the project in a repository.<\/li>\n\n\n\n<li>A hosting platform that supports React apps, preferably with built-in GitHub integration for easier deployment.<\/li>\n\n\n\n<li>Optionally, a custom domain and any environment variables the app needs, such as an API URL.<\/li>\n<\/ul><p><a href=\"%5C%22\/tutorials\/what-is-vite%5C%22\">Vite<\/a> is the currently supported build tool for developing new React projects. It replaces Create React App, which the React team deprecated for new apps in February 2025.<\/p><p>If you&rsquo;re starting a new project, use Vite. If you already have one built with Create React App, you can still deploy it the same way. The main differences are the build folder name and environment variable prefix.<\/p><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-where-can-you-deploy-a-react-app\"><strong>Where can you deploy a React app?<\/strong><\/h2><p>You can deploy a React app on <strong>managed React hosting, static hosting, virtual private server (VPS) hosting, a cloud platform, or even a free service like GitHub Pages<\/strong>.<\/p><p>The right choice depends on how much server control you want and how much setup you&rsquo;re willing to handle.<\/p><figure tabindex=\"0\" class='\"wp-block-table\"'><table><tbody><tr><td><strong>Deployment option<\/strong><\/td><td><strong>Best for<\/strong><\/td><td><strong>Key trade-off<\/strong><\/td><\/tr><tr><td><strong>Managed React hosting<\/strong><\/td><td>Beginners to mid-level users who want push-to-deploy<\/td><td>Less low-level server control<\/td><\/tr><tr><td><strong>Static hosting<\/strong><\/td><td>Simple static or single-page application (SPA) builds<\/td><td>No backend or server-side logic<\/td><\/tr><tr><td><strong>VPS hosting<\/strong><\/td><td>Developers who need full server control<\/td><td>Manual setup and maintenance<\/td><\/tr><tr><td><strong>Cloud platforms, like AWS and Google Cloud<\/strong><\/td><td>Large-scale or complex infrastructure<\/td><td>Steeper learning curve and variable costs<\/td><\/tr><tr><td><strong>GitHub Pages<\/strong><\/td><td>Free static hosting for demos and portfolios<\/td><td>Static only, with limited features<\/td><\/tr><\/tbody><\/table><\/figure><p>If you want a quick and easy deployment without handling server configuration and management yourself, choose a managed hosting service.<\/p><p>With <a href=\"%5C%22\/web-apps-hosting\/react-hosting%5C%22\">Hostinger managed React hosting<\/a>, for example, you only need to connect your plan to your GitHub account. The system then detects your build automatically and deploys your project in a few simple steps.<\/p><p>You&rsquo;ll also get an SSL certificate, a content delivery network (CDN), daily backups, database integration, and a web application firewall (WAF). These are features you&rsquo;d normally set up and manage yourself with unmanaged hosting options.<\/p><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-how-to-deploy-a-react-app-using-hostinger\"><strong>How to deploy a React app using Hostinger<\/strong><\/h2><p>On Hostinger, deploying a React app involves <strong>connecting your GitHub repository, confirming the detected build settings, and publishing your app directly from hPanel<\/strong>.<\/p><p>After your first deployment, the system automatically redeploys your app each time you push changes to GitHub. This keeps your live app updated without requiring a manual redeploy.<\/p><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-web-hosting\" href=\"\/ca\/web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class='\"wp-block-heading\" wp-block-heading'><strong>1. Prepare your React project for production<\/strong><\/h3><p>Your React project is ready to deploy when it runs on your computer and creates a clean production build.<\/p><p>Install the dependencies:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>npm install<\/pre><p>Run the app to confirm it works. The command depends on your setup:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'># Vite\nnpm run dev<\/pre><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'># Create React App\nnpm start<\/pre><p>Next, open your <strong>package.json<\/strong> file and check that the <strong>scripts<\/strong> section has a <strong>build<\/strong> entry.<\/p><p>A Vite project looks like this:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>\"scripts\": {\n   \"dev\": \"vite\",\n   \"build\": \"vite build\",\n   \"preview\": \"vite preview\"\n}<\/pre><p>A Create React App project should show the following:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>\"scripts\": {\n   \"start\": \"react-scripts start\",\n   \"build\": \"react-scripts build\",\n   \"test\": \"react-scripts test\",\n   \"eject\": \"react-scripts eject\"\n}<\/pre><p>If yours doesn&rsquo;t have a <strong>build<\/strong> entry, add <strong>&ldquo;build&rdquo;: &ldquo;vite build&rdquo;<\/strong> for Vite or <strong>&ldquo;build&rdquo;: &ldquo;react-scripts build&rdquo;<\/strong> for Create React App.<\/p><p>Then, create the production build:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>npm run build<\/pre><p>If the build reports errors, fix them before deploying because what fails on your computer will also fail on the server.<\/p><p>The error message usually names the file and the problem, so you know where to look. For example:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>error during build:\nCould not resolve '.\/components\/Header' from src\/App.jsx<\/pre><p>This error points to a missing or misnamed import in <strong>src\/App.jsx<\/strong>. Correct the path, then run <strong>npm run build<\/strong> again to confirm it passes.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>2. Push your React app to GitHub<\/strong><\/h3><p>Pushing your React app to GitHub connects your local project to the deployment pipeline, since Hostinger deploys directly from your repository.<\/p><p>In your project folder, add a <strong>.gitignore<\/strong> file that lists <strong>node_modules<\/strong> and any <strong>.env<\/strong> files. This keeps your dependencies and secret keys out of the repository:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>node_modules\n.env<\/pre><p>Initialize Git and commit the project:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>git init\ngit add .\ngit commit -m \"Initial commit\"<\/pre><p>Next, create an empty repository on GitHub:<\/p><ol class='\"wp-block-list\" wp-block-list'>\n<li>Sign in to GitHub, or create a free account if you don&rsquo;t have one.<\/li>\n\n\n\n<li>Click <strong>New<\/strong>, then name the repository, for example, <strong>react-deploy<\/strong>.<\/li>\n\n\n\n<li>Set the visibility to <strong>Public<\/strong> or <strong>Private<\/strong>. Hostinger can connect to either one.<\/li>\n\n\n\n<li>Leave <strong>README<\/strong>, <strong>.gitignore<\/strong>, and <strong>license<\/strong> unchecked so the repository stays empty.<\/li>\n\n\n\n<li>Click <strong>Create repository<\/strong>.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"6a4b59ec977cd\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec977cd\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/github-create-new-repository-react-deploy.png\/w=1024,h=1024,fit=scale-down\" alt='\"GitHub' new repository form with react-deploy as the name and public visibility class='\"wp-image-152239\"' title='\"github-create-new-repository-react-deploy\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Link your project to that repository and push it to the <strong>main<\/strong> branch:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>git remote add origin https:\/\/github.com\/your-username\/react-deploy.git\ngit push -u origin main<\/pre><p>Replace <strong>your-username<\/strong> with your GitHub username and <strong>react-deploy<\/strong> with your repository name.<\/p><p>Alternatively, upload your project manually to GitHub. To do this, open your new repository and choose <strong>Add file<\/strong> &rarr; <strong>Upload files<\/strong> to drag the project in.<\/p><p>Keep in mind that most operating systems, including macOS, hide dotfiles like <strong>.gitignore<\/strong>, so drag-and-drop uploads can miss this file.<\/p><p>Create it directly on GitHub instead by choosing <strong>Add file<\/strong> &rarr; <strong>Create new file<\/strong>, typing <strong>.gitignore<\/strong> as the file name, and adding the following:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>node_modules\n.env<\/pre><p>Git remains the better fit for a project you keep updating, since each push sends only the changes you made instead of uploading the whole project again.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>3. Connect the GitHub repository<\/strong><\/h3><p>Once you&rsquo;ve purchased a Business or Cloud Startup plan on Hostinger, log in to hPanel using the registered account. From the main page, go to <strong>Websites<\/strong> &rarr; <strong>Add website<\/strong> &rarr; <strong>Node.js Web App<\/strong>.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59ec99091\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec99091\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-websites-add-website-nodejs-web-app-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt='\"hPanel' websites page with add website menu showing node.js web app option class='\"wp-image-152249\"' title='\"hpanel-websites-add-website-nodejs-web-app-highlighted\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>You&rsquo;ll be prompted to add a custom domain for your React app. Alternatively, you can use a free temporary domain and add your own domain later.<\/p><p>Next, connect your GitHub repository in the setup screen:<\/p><ol class='\"wp-block-list\" wp-block-list'>\n<li>Choose <strong>Import Git repository<\/strong> as the source.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"6a4b59ec9a4c1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec9a4c1\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-deploy-nodejs-web-app-continue-with-github-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt='\"Deploy' node.js web app screen with import git repository and upload options class='\"wp-image-152242\"' title='\"hpanel-deploy-nodejs-web-app-continue-with-github-highlighted\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start='\"2\"' class='\"wp-block-list\" wp-block-list'>\n<li>GitHub redirects you to an authorization page. Click <strong>Authorize<\/strong> to grant Hostinger access.<\/li>\n\n\n\n<li>Select your repository from the list.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"6a4b59ec9ba07\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec9ba07\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-select-git-repository-react-deploy-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt='\"Select' git repository screen with react-deploy repo and deploy button class='\"wp-image-152245\"' title='\"hpanel-select-git-repository-react-deploy-highlighted\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Keep in mind that each hosting plan can connect to only one GitHub account at a time. If you want to deploy another project later, store it in a repository under the same GitHub account. You can then select that repository during deployment.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>4. Configure the build command and output directory<\/strong><\/h3><p>After you connect the repository, Hostinger auto-detects the framework and pre-fills the build command and output directory on the <strong>Review build settings <\/strong>screen. You can change either value if needed.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59ec9d0df\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec9d0df\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-review-build-settings-react-deploy-vite.png\/w=1024,h=1024,fit=scale-down\" alt='\"Review' build settings for react-deploy with vite preset and deploy button class='\"wp-image-152244\"' title='\"hpanel-review-build-settings-react-deploy-vite\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>The build command tells the system how to compile your app, usually <strong>npm run build<\/strong>. The output directory is the build folder that command creates, and it&rsquo;s what the system publishes.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59ec9ddcb\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec9ddcb\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-review-build-settings-react-deploy-vite.png\/w=1024,h=1024,fit=scale-down\" alt='\"Review' build settings for react-deploy with vite preset and deploy button class='\"wp-image-152244\"' title='\"hpanel-change-build-output-settings-npm-run-build-dist\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Hostinger&rsquo;s system matches both values to common React setups:<\/p><figure tabindex=\"0\" class='\"wp-block-table\"'><table><tbody><tr><td><strong>Setup<\/strong><\/td><td><strong>Build command<\/strong><\/td><td><strong>Output directory<\/strong><\/td><\/tr><tr><td><strong>Vite React<\/strong><\/td><td>npm run build<\/td><td>dist<\/td><\/tr><tr><td><strong>Create React App<\/strong><\/td><td>npm run build<\/td><td>build<\/td><\/tr><tr><td><strong>Next.js static export<\/strong><\/td><td>Project-specific command<\/td><td>out<\/td><\/tr><tr><td><strong>Custom React setup<\/strong><\/td><td>Project-specific command<\/td><td>Project-specific output folder<\/td><\/tr><\/tbody><\/table><\/figure><p>Double-check the output directory value carefully. If it names a folder that doesn&rsquo;t match your setup, the system can publish an empty folder and show a blank page when you check the URL later.<\/p><p>Set it to <strong>dist<\/strong> for Vite, <strong>build<\/strong> for Create React App, or <strong>out<\/strong> for a Next.js static export.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>5. Add environment variables<\/strong><\/h3><p>Most production apps need configuration values, such as an API URL or an analytics key. Environment variables store these values so your React app can use them during the build.<\/p><p>On the same <strong>Review build settings<\/strong> screen, open the <strong>Environment variables <\/strong>option. Enter the variable name in <strong>Key<\/strong>, for instance, <strong>VITE_API_URL<\/strong>, and the value in <strong>Value<\/strong>, for example, your API URL.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59ec9f142\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59ec9f142\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-set-environment-variables-vite-api-url.png\/w=1024,h=1024,fit=scale-down\" alt='\"Set' environment variables dialog with vite_api_url key and api url value class='\"wp-image-152246\"' title='\"hpanel-set-environment-variables-vite-api-url\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>When naming environment variables, use the correct prefix for your React setup. Otherwise, the build will ignore them.<\/p><figure tabindex=\"0\" class='\"wp-block-table\"'><table><tbody><tr><td><strong>React setup<\/strong><\/td><td><strong>Key prefix<\/strong><\/td><td><strong>Example<\/strong><\/td><\/tr><tr><td>Vite<\/td><td><strong>VITE_<\/strong><\/td><td><strong>VITE_API_URL<\/strong><\/td><\/tr><tr><td>Create React App<\/td><td><strong>REACT_APP_<\/strong><\/td><td><strong>REACT_APP_API_URL<\/strong><\/td><\/tr><\/tbody><\/table><\/figure><p>If you already have these values in a local <strong>.env<\/strong> file, click <strong>Import .env<\/strong> to import them all at once instead of adding each variable manually.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>6. Deploy and test the live React app<\/strong><\/h3><p>After making sure that all build settings are correct, click <strong>Deploy<\/strong> to start the build. The system installs the dependencies, runs your build command, and publishes the files.<\/p><p>When the build finishes, a preview screenshot of the built site confirms that it worked. If the build fails, check the build log to see what went wrong.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59eca0363\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59eca0363\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-deployment-completed-react-deploy-preview.png\/w=1024,h=1024,fit=scale-down\" alt='\"Deployment' completed screen with app preview and go to dashboard button class='\"wp-image-152243\"' title='\"hpanel-deployment-completed-react-deploy-preview\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Deployment isn&rsquo;t complete until you test the live React app. Click <strong>Go to dashboard<\/strong>, then open the app&rsquo;s public URL. Depending on the type of app you built, run these tests:<\/p><ol class='\"wp-block-list\" wp-block-list'>\n<li>Refresh a nested route, such as <strong>\/dashboard<\/strong>, to confirm that routing works.<\/li>\n\n\n\n<li>Create a new account or log in to an existing one. Also, test with incorrect data to check whether validation works.<\/li>\n\n\n\n<li>Trigger an API request to confirm that data still loads.<\/li>\n\n\n\n<li>Open the browser console and check for errors.<\/li>\n\n\n\n<li>Check the layout at different screen widths, including on a smartphone and a tablet.<\/li>\n<\/ol><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-how-to-deploy-a-react-app-manually\"><strong>How to deploy a React app manually<\/strong><\/h2><p>Manual React deployment means <strong>building the app on your computer and uploading the output files to the server<\/strong>. This replaces storing the project in a GitHub repository and letting your web host handle the deployment.<\/p><p>It&rsquo;s a good option for <a href=\"%5C%22\/tutorials\/how-to-host-a-web-application%5C%22\">hosting a web app<\/a> that can&rsquo;t connect to a Git repository or only needs a one-time deployment.<\/p><p>The steps are typically similar across different hosts:<\/p><ol class='\"wp-block-list\" wp-block-list'>\n<li>Run <strong>npm install<\/strong> to install the dependencies.<\/li>\n\n\n\n<li>Run <strong>npm run build<\/strong> to create the production files.<\/li>\n\n\n\n<li>Find the output folder: <strong>dist<\/strong> for Vite or <strong>build<\/strong> for Create React App.<\/li>\n\n\n\n<li>Upload the contents of that folder to the server.<\/li>\n\n\n\n<li>Configure fallback routing so any unknown URL serves <strong>index.html<\/strong>. This stops client-side routes from returning a 404.<\/li>\n\n\n\n<li>Open the live URL and test the app.<\/li>\n<\/ol><p>Hostinger supports manual deployment too. On the setup screen, choose <strong>Upload your website files<\/strong> instead of <strong>Import Git repository<\/strong>, then upload a <strong>.zip<\/strong> file of your project. The system then detects the framework, runs the build, and deploys it.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59eca1b72\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59eca1b72\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-upload-app-files-react-demo-zip.png\/w=1024,h=1024,fit=scale-down\" alt='\"Upload' your app files screen with react-demo.zip uploaded and continue button class='\"wp-image-152248\"' title='\"hpanel-upload-app-files-react-demo-zip\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Keep in mind that manual uploads don&rsquo;t support automatic redeployment. Every time you make changes, you must upload the <strong>.zip<\/strong> file again and redeploy the app.<\/p><figure data-wp-context='{\"imageId\":\"6a4b59eca2eec\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59eca2eec\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-settings-redeploy-react-demo-build-output.png\/w=1024,h=1024,fit=scale-down\" alt='\"Settings' and redeploy page with source files build config environment variables class='\"wp-image-152247\"' title='\"hpanel-settings-redeploy-react-demo-build-output\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-how-to-fix-common-react-deployment-errors\"><strong>How to fix common React deployment errors<\/strong><\/h2><p>To fix common React deployment errors, first identify whether the problem is a <strong>wrong output directory, missing routing rules, a failed build, or an environment variable the build didn&rsquo;t pick up<\/strong>.<\/p><p>Each issue has a specific cause and fix, listed in the table below.<\/p><figure tabindex=\"0\" class='\"wp-block-table\"'><table><tbody><tr><td><strong>Problem<\/strong><\/td><td><strong>Common cause<\/strong><\/td><td><strong>Fix<\/strong><\/td><\/tr><tr><td><strong>Blank page after deployment<\/strong><\/td><td>Wrong output directory or base path<\/td><td>Change the output directory to <strong>dist<\/strong> (Vite) or <strong>build<\/strong> (CRA) in the build settings, then redeploy<\/td><\/tr><tr><td><strong>404 after refreshing a route<\/strong><\/td><td>Server looks for a physical file instead of returning <strong>index.html<\/strong><\/td><td>Configure SPA fallback routing to serve <strong>index.html<\/strong> for unknown paths<\/td><\/tr><tr><td><strong>Build failure<\/strong><\/td><td>Missing dependency or incorrect build script<\/td><td>Open the build log, find the error, and fix the affected file<\/td><\/tr><tr><td><strong>API requests failing<\/strong><\/td><td>Wrong API URL or missing environment variable<\/td><td>Add the correct environment variable with the required prefix in the dashboard, then rebuild<\/td><\/tr><tr><td><strong>App works locally but not live<\/strong><\/td><td>Environment or build configuration mismatch<\/td><td>Compare your local <strong>.env<\/strong> values and build settings with your production configuration<\/td><\/tr><tr><td><strong>Old version still showing<\/strong><\/td><td>Browser cache or skipped redeploy<\/td><td>Clear the browser cache, then push a new commit or trigger a manual redeploy<\/td><\/tr><\/tbody><\/table><\/figure><h3 class='\"wp-block-heading\" wp-block-heading'><strong>Why does my React app show a 404 after refreshing a route?<\/strong><\/h3><p>A React app shows a 404 after refreshing because the route you&rsquo;re on isn&rsquo;t a real file on the server.<\/p><p>Libraries like React Router and its <strong>BrowserRouter<\/strong> component create routes such as <strong>\/dashboard<\/strong> in the browser. They don&rsquo;t generate a physical <strong>\/dashboard<\/strong> file in your build folder.<\/p><p>Clicking a link works because React handles navigation without sending a request to the server.<\/p><p>When you refresh the page, though, the browser sends the full <strong>\/dashboard<\/strong> path to the server. The server looks for a matching file, can&rsquo;t find one, and returns a 404.<\/p><p>To fix this, configure your hosting environment to serve <strong>index.html<\/strong> for any route it doesn&rsquo;t recognize. This setup is called SPA fallback routing. It sends every unknown path back to React, which then loads the correct page.<\/p><p>On Hostinger, a <strong>.htaccess<\/strong> file in <strong>public_html<\/strong> sets up this fallback automatically. If routing breaks after deployment, redeploy the app to regenerate the file.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>Why is my React app blank after deployment?<\/strong><\/h3><p>A blank page after deployment usually means the browser loaded <strong>index.html<\/strong> but couldn&rsquo;t find or run the JavaScript files the page depends on.<\/p><p>The most common causes are:<\/p><ul class='\"wp-block-list\" wp-block-list'>\n<li>A wrong output directory in the build settings.<\/li>\n\n\n\n<li>An incorrect base path in the build configuration.<\/li>\n\n\n\n<li>Missing asset files.<\/li>\n\n\n\n<li>A JavaScript error that stops the app from rendering.<\/li>\n\n\n\n<li>A missing environment variable the app expects at build time.<\/li>\n<\/ul><p>To find the cause, check two places.<\/p><p>First, open the browser console on the blank page. A 404 error for a <strong>.js<\/strong> or <strong>.css<\/strong> file usually means the output directory or base path is wrong. A runtime error usually points to an issue in your code or a missing environment variable.<\/p><p>Next, open the deployment log in <strong>hPanel<\/strong>. If the build failed, the log shows what caused the failure and where it happened.<\/p><p>For Vite projects, also check the <strong>base<\/strong> option in <strong>vite.config.js<\/strong>. This value must match the path your app is served from.<\/p><p>If your app runs from a subdirectory like <strong>\/app<\/strong>, set <strong>base<\/strong> to <strong>\/app\/<\/strong>. If it runs from the root domain, set <strong>base<\/strong> to <strong>\/<\/strong> or remove the option entirely, since <strong>\/<\/strong> is the default.<\/p><h3 class='\"wp-block-heading\" wp-block-heading'><strong>Why do environment variables not work after deployment?<\/strong><\/h3><p>Environment variables usually stop working after deployment because the app wasn&rsquo;t rebuilt after the variable was added or changed.<\/p><p>React injects environment variables at build time, not when the app runs. During <strong>npm run build<\/strong>, React writes the values into the JavaScript files. Adding or updating a variable in the dashboard won&rsquo;t affect the deployed app unless you rebuild it.<\/p><p>To fix this, update the variable in the dashboard, then redeploy the app so the build includes the new value.<\/p><p>Another common cause is an incorrect or missing prefix. Vite only reads variables that start with <strong>VITE_<\/strong>, while Create React App only reads variables that start with <strong>REACT_APP_<\/strong>. If a variable doesn&rsquo;t use the required prefix, React excludes it from the build.<\/p><p>Rename the variable with the correct prefix, then deploy the app again.<\/p><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-how-to-update-a-deployed-react-app\"><strong>How to update a deployed React app<\/strong><\/h2><p>To update a deployed React app, <strong>commit your changes and push them to GitHub<\/strong>. On Hostinger, the system detects the push, rebuilds the app, and redeploys it automatically.<\/p><p>First, make your change in the code, then test it on your computer:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'># Vite\nnpm run dev<\/pre><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'># Create React App\nnpm start<\/pre><p>Once the change works, commit and push it to GitHub:<\/p><pre class='\"EnlighterJSRAW\"' data-enlighter-language='\"generic\"' data-enlighter-theme='\"\"' data-enlighter-highlight='\"\"' data-enlighter-linenumbers='\"\"' data-enlighter-lineoffset='\"\"' data-enlighter-title='\"\"' data-enlighter-group='\"\"'>git add .\ngit commit -m \"Update component layout\"\ngit push<\/pre><p>Open the live URL to confirm the update is live. As long as the repository stays connected to your Hostinger plan, every future push triggers a new deployment.<\/p><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-is-hostinger-good-for-deploying-react-apps\"><strong>Is Hostinger good for deploying React apps?<\/strong><\/h2><p>Hostinger is a <strong>good fit for deploying React apps that don&rsquo;t need server-level control<\/strong>. Our <a href=\"%5C%22\/web-apps-hosting\/react-hosting%5C%22\">React hosting plans<\/a> support GitHub-based deployment, managed SSL, a CDN, daily backups, and simpler hosting management, so you don&rsquo;t need to configure the server yourself.<\/p><p>It works well for projects like:<\/p><ul class='\"wp-block-list\" wp-block-list'>\n<li>Portfolio sites.<\/li>\n\n\n\n<li>Business websites.<\/li>\n\n\n\n<li>Dashboards and admin panels.<\/li>\n\n\n\n<li>SaaS frontends.<\/li>\n\n\n\n<li>Small to medium React apps.<\/li>\n<\/ul><p>If your app needs <a href=\"%5C%22\/tutorials\/how-to-create-docker-container%5C%22\">Docker containers<\/a>, custom server software, or fine-grained scaling control, a VPS or cloud platform is a better fit.<\/p><p>These hosting options give you root access and full server configuration, but you&rsquo;ll also handle the setup and maintenance that managed hosting covers for you.<\/p><h2 class='\"wp-block-heading\" wp-block-heading' id=\"h-next-steps-after-deploying-your-react-app\"><strong>Next steps after deploying your React app<\/strong><\/h2><p>After deploying your React app, connect your domain, secure it with SSL, and set up monitoring and maintenance to keep it running smoothly.<\/p><ul class='\"wp-block-list\" wp-block-list'>\n<li>Point a custom <a href=\"%5C%22\/tutorials\/what-is-a-domain-name%5C%22\">domain name<\/a> to your app so visitors can reach it at your own address instead of the temporary one.<\/li>\n\n\n\n<li>Add an <a href=\"%5C%22\/tutorials\/what-is-ssl%5C%22\">SSL certificate<\/a> to serve the app over HTTPS. Most hosts, including Hostinger, bundle SSL with the hosting plan, so it activates automatically when you connect your domain.<\/li>\n\n\n\n<li>Monitor your app&rsquo;s CPU, RAM, and I\/O usage through the dashboard&rsquo;s resource graphs.<\/li>\n\n\n\n<li>Add analytics to track page views, traffic sources, and where visitors drop off, so you know what to improve.<\/li>\n\n\n\n<li>Set up backups so you can restore your app if a deployment or update breaks something. Hostinger runs daily backups automatically.<\/li>\n\n\n\n<li>Monitor your dependencies for security vulnerabilities. Hostinger scans your deployed app automatically and flags affected packages.<\/li>\n\n\n\n<li>Switch to GitHub-based deployment for future updates if you started with manual uploads.<\/li>\n<\/ul><figure data-wp-context='{\"imageId\":\"6a4b59eca4abc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a4b59eca4abc\" class='\"wp-block-image wp-lightbox-container' aligncenter size-large><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-dashboard-nodejs-deployment-performance-resource-usage.png\/w=1024,h=1024,fit=scale-down\" alt='\"Node.js' app dashboard showing deployment status performance and resource usage class='\"wp-image-152241\"' title='\"hpanel-dashboard-nodejs-deployment-performance-resource-usage\"'><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>In Hostinger&rsquo;s hPanel, the web app dashboard lets you manage your tasks in one place, from the first deployment to ongoing maintenance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To deploy a React app, create a production build, connect the project to a host, configure the build settings, and publish it to a live domain. A deployed React app runs on a server with a public URL, not just on the computer you used to build it. Managed React hosting typically handles most of [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/how-to-deploy-react-app\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":411,"featured_media":145987,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to deploy a React app in 6 steps","rank_math_description":"Learn how to deploy a React app using Hostinger web app hosting, GitHub, build commands, environment variables, custom domains, and SSL.","rank_math_focus_keyword":"how to deploy a React app","footnotes":""},"categories":[22706],"tags":[],"class_list":["post-145986","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-app"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-deploy-react-app\/","default":1},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-deploy-react-app\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-deploy-react-app\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-deploy-react-app\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-deploy-react-app\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-deploy-react-app\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-deploy-react-app\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-deploy-react-app\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/145986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=145986"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/145986\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media\/145987"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=145986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=145986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=145986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}