At Netlify we use React in production and are familiar with the challenges in deploying it to production as well. Up until today, React has had no opinions on what to use with tooling, which has made deploying a unique problem to each project. Today [Facebook announced](https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html) their opinated boiler-plate for getting React projects started. This is great news, since the ecosystem around getting React projects started has been in a state of [Flux](https://facebook.github.io/flux/) (see what I did there?). ## Steps to deploying your React app Now you can get a React project up and running with a few commands, and in less than 30 seconds you can have it deployed with Netlify. Here’s how: ### Step 1: Install or create Open your terminal and enter the following: ``` npm install -g create-react-appcreate-react-app hello-worldcd hello-worldnpm run build npm install netlify-cli -gnetlify deploy ``` Or deploy a create-react-app site with Netlify Functions support with just 1 click: [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda) ### Step 2: Choose a new project If you are using the netlify CLI, follow command line prompts and choose yes for new project and `./build` as your deploy folder and voila you have a production React app! If that was too hard to follow, here is a gif of me doing it: ![using the Netlify CLI command line prompts](/v3/img/blog/react-deploy-30-seconds.gif) You can also link to a GitHub repo for [continuous deployment](https://docs.netlify.com/configure-builds/overview/) for specified branches and will grant you our nifty [Deploy Preview](/blog/2016/07/20/introducing-deploy-previews-in-netlify/) feature. Happy Hacking :) ### Step 3: Redirect and rewrite rules If you choose to use something for routing (like React Router for example), you will need to set up a [redirect and rewrite rule](https://docs.netlify.com/routing/redirects/) for the single page app. That redirect rule would look like this: ``` /* /index.html 200 ``` This redirect rule above will serve the index.html instead of giving a 404 no matter what URL the browser requests. You can add redirect rules to the `_redirects` file or to your `netlify.toml` config file. [For more information on redirects on Netlify checkout the docs](https://docs.netlify.com/routing/redirects/). Go forth and React! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to deploy React Apps in less than 30 Seconds&url=https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2016%2F07%2F22%2Fdeploy-react-apps-in-less-than-30-seconds%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds//) - [Bluesky](https://bsky.app/intent/compose?text=How to deploy React Apps in less than 30 Seconds+https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds//) * * * ### Tags - [popular](/blog/tags/popular/) - [Deploy](/blog/tags/deploy/) - [continuous delivery](/blog/tags/continuous-delivery/) - [React](/blog/tags/react/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials December 17, 2020 [ ### React Children: The misunderstood prop ](/blog/2020/12/17/react-children-the-misunderstood-prop/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials October 27, 2020 [ ### A Spooky Adventure at Next.js Conf ](/blog/2020/10/27/a-spooky-adventure-at-next.js-conf/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)