Meta tags:
description=npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section.;

Headings (most frequently used words):

step, to, project, for, pages, vercel, the, deploy, deployment, serving, client, side, routing, paths, build, heroku, and, npm, add, package, json, gh, your, domain, deploying, react, or, cannot, not, file, static, server, other, solutions, apps, with, building, relative, customizing, environment, variables, arbitrary, environments, aws, amplify, azure, firebase, github, netlify, render, s3, cloudfront, surge, publishing, components, same, from, different, homepage, install, scripts, in, site, by, running, run, page, ensure, settings, use, optionally, configure, notes, on, troubleshooting, resolving, errors, optional, using, custom, fresh, references, dev, tty, no, such, device, address, read, property, email, of, null, module, found, error, resolve, directory, could, find, required,

Text of the page (most frequently used words):
the (119), you (77), your (65), build (62), and (54), app (53), for (51), project (43), react (38), with (38), deploy (37), this (31), create (31), will (31), copy (30), run (28), #github (26), npm (26), use (23), file (23), #firebase (22), example (21), can (20), html (20), pages (19), add (18), domain (17), json (17), static (17), vercel (16), step (16), using (16), page (16), that (16), index (16), deployment (15), hosting (15), install (13), from (13), when (13), not (13), deploying (12), custom (12), server (12), directory (12), path (12), production (12), todos (12), package (11), scripts (11), folder (11), are (11), need (11), com (11), database (11), get (10), heroku (10), routing (10), homepage (10), like (10), see (10), rules (10), http (10), env (10), side (9), environment (9), url (9), https (9), git (9), set (9), more (9), public (9), remote (9), client (8), amplify (8), make (8), web (8), following (8), all (8), user (8), router (8), staging (8), express (8), serve (8), netlify (7), configure (7), settings (7), site (7), serving (7), paths (7), apps (7), new (7), surge (6), running (6), then (6), support (6), api (6), want (6), sure (6), main (6), find (6), automatically (6), setup (6), choose (6), node (6), read (6), here (6), mywebsite (6), now (6), console (6), fresh (5), azure (5), relative (5), other (5), html5 (5), pushstate (5), continuous (5), global (5), import (5), configuration (5), service (5), because (5), try (5), history (5), root (5), information (5), fd690 (5), default (5), cmd (5), res (5), docs (4), ensure (4), variables (4), environments (4), different (4), building (4), next (4), any (4), note (4), routers (4), may (4), specify (4), command (4), account (4), code (4), repository (4), been (4), branch (4), options (4), there (4), tmp (4), error (4), important (4), used (4), cannot (4), but (4), repo (4), handle (4), should (4), correctly (4), available (4), worker (4), single (4), assets (4), served (4), join (4), __dirname (4), publishing (3), cloudfront (3), render (3), aws (3), arbitrary (3), same (3), solutions (3), previous (3), built (3), before (3), cli (3), how (3), link (3), minutes (3), guide (3), cdn (3), once (3), has (3), have (3), such (3), after (3), changes (3), deployments (3), into (3), cache (3), output (3), start (3), case (3), build_a2875fc163b209225122d68916f1d4df (3), could (3), required (3), one (3), mydirectory (3), config (3), email (3), device (3), would (3), frontend (3), hosted (3), predeploy (3), yarn (3), save (3), myusername (3), feature (3), uploaded (3), headers (3), what (3), let (3), created (3), login (3), their (3), requests (3), development (3), function (3), req (3), above (3), const (3), stack (2), overflow (2), started (2), components (2), references (2), optional (2), resolving (2), errors (2), troubleshooting (2), notes (2), optionally (2), customizing (2), last (2), edit (2), doesn (2), provide (2), publish (2), component (2), ready (2), order (2), every (2), back (2), 200 (2), about (2), haven (2), already (2), services (2), looking (2), blog (2), post (2), sign (2), only (2), offers (2), ssl (2), source (2), added (2), click (2), tab (2), select (2), domains (2), via (2), deployed (2), during (2), change (2), integration (2), platform (2), developers (2), zero (2), asset (2), contents (2), rewrite (2), pick (2), push (2), open (2), request (2), proper (2), lettercase (2), err (2), bin (2), linux (2), name (2), files (2), similar (2), even (2), locally (2), module (2), found (2), resolve (2), works (2), instructions (2), again (2), property (2), null (2), token (2), dev (2), tty (2), address (2), alternatively (2), redirect (2), parameter (2), 404 (2), switch (2), todomvc (2), under (2), hood (2), load (2), route (2), browserhistory (2), cname (2), instead (2), script (2), field (2), skip (2), higher (2), complete (2), process (2), successfully (2), key (2), able (2), first (2), writing (2), urls (2), data (2), associate (2), multiple (2), agree (2), also (2), connect (2), creates (2), backend (2), starter (2), auth (2), way (2), relativepath (2), which (2), calendar (2), today (2), basename (2), start_url (2), manifest (2), navigation (2), configured (2), apache (2), looks (2), sendfile (2), respond (2), many (2), 3000 (2), section (2), listen (2), require (2), port (2), hash (2), copyright, 2025, facebook, inc, social, contributor, covenant, twitter, discussions, community, learn, templates, title, meta, tags, updated, moshiul, huq, rabbi, 2022, functionality, extract, people, recommend, moving, separate, outside, tool, prepare, nwb, rename, ensures, falls, asked, log, amazon, invite, cra, few, free, fully, managed, auto, deploys, official, button, presented, methods, configuring, navigate, dashboard, selected, menu, item, projects, enter, wish, transfer, live, imported, subsequent, pushes, branches, generate, made, commonly, master, result, preview, relevant, preconfigured, ability, needed, flow, pushed, cloud, enables, host, jamstack, websites, instantly, scale, requires, supervision, they, edge, network, encryption, compression, invalidation, place, _redirects, pull, delivery, manual, ignored, local, gitignore_global, gitignore, argv, 105, generic, searched, exclude, ignore, necessary, operating, system, sensitive, two, distinct, directories, thus, though, builds, difference, breaks, statements, remotes, means, matches, filesystem, build_1234, src, failed, reason, something, sometimes, fails, most, common, cases, buildpack, your_email, your_name, origin, personal, access, trick, teach, 404s, redirecting, redirection, handling, detailed, explanation, technique, hashes, effect, longer, verbose, implementations, yknaj, hashhistory, where, returns, knows, nothing, couple, look, adding, finally, option, tweak, additional, modification, whenever, cheat, sheet, uses, determine, below, firebaseapp, google, overview, starting, release, take, several, uploading, preparing, upload, value, control, caching, inside, issue, 2440, initialization, firebaserc, info, wrote, yes, contain, future, modifications, update, downloaded, structured, written, realtime, allow, define, aliases, being, replying, sites, init, tools, apis, authentication, authorization, documentation, action, begin, resource, details, automated, pipeline, powered, actions, applications, geo, distributed, points, presence, previews, succeeds, amplifyapp, continuously, allows, updates, commit, detects, demonstrates, setting, provides, modern, generators, serverless, backends, globally, cdns, password, protection, fallback, always, node_env, react_app_api_url, called, creating, loading, move, without, having, rebuild, unnecessary, put, renders, href, browserrouter, prop, infer, generated, override, produces, assuming, users, homescreen, shortcut, work, expect, match, scheme, cached, disabled, modifying, swprecacheplugin, navigatefallbackwhitelist, navigatefallback, ing, eject, opted, handled, both, follow, answer, tomcat, copied, rewriterule, qsa, rewritecond, request_filename, rewriteengine, multiviews, htaccess, does, needs, amend, our, unknown, servers, fail, properly, localhost, however, quite, enough, produced, choice, software, isn, either, since, completely, agnostic, explicitly, 9000, programmatic, don, necessarily, well, integrated, existing, full, list, 4000, shown, internal, adjusted, flags, easiest, rest, favorite, visitor, advanced, usage, end, testing, styles, getting, welcome, search, help, deprecated, content,

Text of the page (random words):
ate react app correctly infer the root path to use in the generated html file note if you are using react router 4 you can root link s using the basename prop on any router more information here for example browserrouter basename calendar link to today renders a href calendar today copy serving the same build from different paths note this feature is available with react scripts 0 9 0 and higher if you are not using the html5 pushstate history api or not using client side routing at all it is unnecessary to specify the url from which your app will be served instead you can put this in your package json homepage copy this will make sure that all the asset paths are relative to index html you will then be able to move your app from http mywebsite com to http mywebsite com relativepath or even http mywebsite com relative path without having to rebuild it customizing environment variables for arbitrary build environments you can create an arbitrary build environment by creating a custom env file and loading it using env cmd for example to create a build environment for a staging environment create a file called env staging set environment variables as you would any other env file e g react_app_api_url http api staging example com install env cmd npm install env cmd save or yarn add env cmd copy add a new script to your package json building with your new environment scripts build staging env cmd f env staging npm run build copy now you can run npm run build staging to build with the staging environment config you can specify other environments in the same way variables in env production will be used as fallback because node_env will always be set to production for a build aws amplify the aws amplify console provides continuous deployment and hosting for modern web apps single page apps and static site generators with serverless backends the amplify console offers globally available cdns custom domain setup feature branch deployments and password protection login to the amplify console here connect your create react app repo and pick a branch if you re looking for a create react app amplify starter try the create react app auth amplify starter that demonstrates setting up auth in 10 minutes with create react app the amplify console automatically detects the build settings choose next choose save and deploy if the build succeeds the app is deployed and hosted on a global cdn with an amplifyapp com domain you can now continuously deploy changes to your frontend or backend continuous deployment allows developers to deploy updates to their frontend and backend on every code commit to their git repository azure azure static web apps creates an automated build and deploy pipeline for your react app powered by github actions applications are geo distributed by default with multiple points of presence pr s are built automatically for staging environment previews create a new static web app here add in the details and connect to your github repo make sure the build folder is set correctly on the build tab and create the resource azure static web apps will automatically configure a github action in your repo and begin the deployment see the azure static web apps documentation for more information on routing apis authentication and authorization custom domains and more firebase install the firebase cli if you haven t already by running npm install g firebase tools sign up for a firebase account and create a new project run firebase login and login with your previous created firebase account then run the firebase init command from your project s root you need to choose the hosting configure and deploy firebase hosting sites and choose the firebase project you created in the previous step you will need to agree with database rules json being created choose build as the public directory and also agree to configure as a single page app by replying with y project setup first let s associate this project directory with a firebase project you can create multiple project aliases by running firebase use add but for now we ll set up a default project what firebase project do you want to associate as default example app example app fd690 database setup firebase realtime database rules allow you to define how your data should be structured and when your data can be read from and written to what file should be used for database rules database rules json database rules for example app fd690 have been downloaded to database rules json future modifications to database rules json will update database rules when you run firebase deploy hosting setup your public directory is the folder relative to your project directory that will contain hosting assets to uploaded with firebase deploy if you have a build process for your assets use your build s output directory what do you want to use as your public directory build configure as a single page app rewrite all urls to index html yes wrote build index html i writing configuration info to firebase json i writing project information to firebaserc firebase initialization complete copy important you need to set proper http caching headers for service worker js file in firebase json file or you will not be able to see changes after first deployment issue 2440 it should be added inside hosting key like next hosting headers source service worker js headers key cache control value no cache copy now after you create a production build with npm run build you can deploy it by running firebase deploy deploying to example app fd690 i deploying database hosting database rules ready to deploy i hosting preparing build directory for upload uploading 75 hosting build folder uploaded successfully hosting 8 files uploaded successfully i starting release process may take several minutes deploy complete project console https console firebase google com project example app fd690 overview hosting url https example app fd690 firebaseapp com copy for more information see firebase hosting github pages note this feature is available with react scripts 0 2 0 and higher step 1 add homepage to package json the step below is important if you skip it your app will not deploy correctly open your package json and add a homepage field for your project homepage https myusername github io my app copy or for a github user page homepage https myusername github io copy or for a custom domain page homepage https mywebsite com copy create react app uses the homepage field to determine the root url in the built html file step 2 install gh pages and add deploy to scripts in package json now whenever you run npm run build you will see a cheat sheet with instructions on how to deploy to github pages to publish it at https myusername github io my app run npm install save gh pages copy alternatively you may use yarn yarn add gh pages copy add the following scripts in your package json scripts predeploy npm run build deploy gh pages d build start react scripts start build react scripts build copy the predeploy script will run automatically before deploy is run if you are deploying to a github user page instead of a project page you ll need to make one additional modification tweak your package json scripts to push deployments to main scripts predeploy npm run build deploy gh pages d build deploy gh pages b main d build copy step 3 deploy the site by running npm run deploy then run npm run deploy copy step 4 for a project page ensure your project s settings use gh pages finally make sure github pages option in your github project settings is set to use the gh pages branch step 5 optionally configure the domain you can configure a custom domain with github pages by adding a cname file to the public folder your cname file should look like this mywebsite com copy notes on client side routing github pages doesn t support routers that use the html5 pushstate history api under the hood for example react router using browserhistory this is because when there is a fresh page load for a url like http user github io todomvc todos 42 where todos 42 is a frontend route the github pages server returns 404 because it knows nothing of todos 42 if you want to add a router to a project hosted on github pages here are a couple of solutions you could switch from using html5 history api to routing with hashes if you use react router you can switch to hashhistory for this effect but the url will be longer and more verbose for example http user github io todomvc todos 42 _k yknaj read more about different history implementations in react router alternatively you can use a trick to teach github pages to handle 404s by redirecting to your index html page with a custom redirect parameter you would need to add a 404 html file with the redirection code to the build folder before deploying your project and you ll need to add code handling the redirect parameter to index html you can find a detailed explanation of this technique in this guide troubleshooting dev tty no such a device or address if when deploying you get dev tty no such a device or address or a similar error try the following create a new personal access token git remote set url origin https user token github com user repo try npm run deploy again cannot read property email of null if when deploying you get cannot read property email of null try the following git config global user name your_name git config global user email your_email try npm run deploy again heroku use the heroku buildpack for create react app you can find instructions in deploying react with zero configuration resolving heroku deployment errors sometimes npm run build works locally but fails during deploy via heroku following are the most common cases module not found error cannot resolve file or directory if you get something like this remote failed to create a production build reason remote module not found error cannot resolve file or directory mydirectory in tmp build_1234 src copy it means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on github this is important because linux the operating system used by heroku is case sensitive so mydirectory and mydirectory are two distinct directories and thus even though the project builds locally the difference in case breaks the import statements on heroku remotes could not find a required file if you exclude or ignore necessary files from the package you will see a error similar this one remote could not find a required file remote name index html remote searched in tmp build_a2875fc163b209225122d68916f1d4df public remote remote npm err linux 3 13 0 105 generic remote npm err argv tmp build_a2875fc163b209225122d68916f1d4df heroku node bin node tmp build_a2875fc163b209225122d68916f1d4df heroku node bin npm run build copy in this case ensure that the file is there with the proper lettercase and that s not ignored on your local gitignore or gitignore_global netlify to do a manual deploy to netlify s cdn npm install netlify cli g netlify deploy copy choose build as the path to deploy to setup continuous delivery with this setup netlify will build and deploy when you push to git or open a pull request start a new netlify project pick your git hosting service and select your repository click build your site support for client side routing to support pushstate make sure to create a public _redirects file with the following rewrite rules index html 200 copy when you build the project create react app will place the public folder contents into the build output vercel vercel is a cloud platform that enables developers to host jamstack websites and web services that deploy instantly scale automatically and requires no supervision all with zero configuration they provide a global edge network ssl encryption asset compression cache invalidation and more step 1 deploying your react project to vercel to deploy your react project with a vercel for git integration make sure it has been pushed to a git repository import the project into vercel using the import flow during the import you will find all relevant options preconfigured for you with the ability to change as needed after your project has been imported all subsequent pushes to branches will generate preview deployments and all changes made to the production branch commonly master or main will result in a production deployment once deployed you will get a url to see your app live such as the following https create react app example vercel app step 2 optional using a custom domain if you want to use a custom domain with your vercel deployment you can add or transfer in your domain via your vercel account domain settings to add your domain to your project navigate to your project from the vercel dashboard once you have selected your project click on the settings tab then select the domains menu item from your projects domain page enter the domain you wish to add to your project once the domain has been added you will be presented with different methods for configuring it deploying a fresh react project you can deploy a fresh react project with a git repository set up for you with the following deploy button vercel references example source official vercel guide vercel deployment docs vercel custom domain docs render render offers free static site hosting with fully managed ssl a global cdn and continuous auto deploys from github deploy your app in only a few minutes by following the create react app deployment guide use invite code cra to sign up or use this link s3 and cloudfront see this blog post on how to deploy your react app to amazon web services s3 and cloudfront if you are looking to add a custom domain https and continuous deployment see this blog post surge install the surge cli if you haven t already by running npm install g surge run the surge command and log in you or create a new account when asked about the project path make sure to specify the build folder for example project path path to project build copy note that in order to support routers that use html5 pushstate api you may want to rename the index html in your build folder to 200 html before deploying to surge this ensures that every url falls back to that file publishing components to npm create react app doesn t provide any built in functionality to publish a component to npm if you re ready to extract a component from your project so other people can use it we recommend moving it to a separate directory outside of your project and then using a tool like nwb to prepare it for publishing edit this page last updated on 6 20 2022 by moshiul huq rabbi previous title meta tags next custom templates static server other solutions serving apps with client side routing building for relative paths serving the same build from different paths customizing environment variables for arbitrary build environments aws amplify azure firebase github pages step 1 add homepage to package json step 2 install gh pages and add deploy...