Deploying Your React App & API to the Cloud

After you have taken your first step with React on your web-dev journey, you'll eventually reach a point where you'll need to deploy something to the World-Wide-Web for everyone to see!

 team has already created some amazing documentation on 

deploying a React app as a static web site using Heroku

. However, if you have ever wondered how you would deploy your React app with some bundled API, this tutorial is just for you.

The first step is to sign up for 

plan, which is perfect if you are just starting out as a web-developer.

The next step is to build your React app. If you used 

 this will be super simple! Just run 

 in your terminal at the root of your React app directory. This process should yield a directory with a production build of your app. Inside, you'll find your minified HTML, CSS, JavaScript, and some media files if you have images in your app.

Next, you'll need to tell your backend to serve your React app when the user hits a specific route. If you are using Node and Express, this can be achieved in two lines of code:

app.use(express.static(`${__dirname}/client`));
app.get("/*", (_, res) => res.sendFile(`${__dirname}/client/index.html`));

Finally, the last step is to deploy your React app with some bundled API to Heroku. Just log into Heroku, create a new application, and pick the region of the world you want your application to be deployed in.

If you navigate to the dashboard of your newly created Heroku application and select the 

tab. You can now connect your Heroku app with an actual GitHub repo hosting your application's source code.

Once connected, you can configure Heroku to automatically deploy your application whenever you push an update to a specific branch in your repo!

And that's it! Hopefully you have found this interesting & helpful. If you would like to see how this is integrated into a fullstack application created using React, GraphQL, Node, and TypeScript, checkout our 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Deploying&nbsp;Your&nbsp;React&nbsp;App&nbsp;&amp;&nbsp;API&nbsp;to&nbsp;the&nbsp;Cloud</h1><p>After&nbsp;you&nbsp;have&nbsp;taken&nbsp;your&nbsp;first&nbsp;step&nbsp;with&nbsp;React&nbsp;on&nbsp;your&nbsp;web-dev&nbsp;journey,&nbsp;you'll&nbsp;eventually&nbsp;reach&nbsp;a&nbsp;point&nbsp;where&nbsp;you'll&nbsp;need&nbsp;to&nbsp;deploy&nbsp;something&nbsp;to&nbsp;the&nbsp;World-Wide-Web&nbsp;for&nbsp;everyone&nbsp;to&nbsp;see!</p><p>The&nbsp;<code>create-react-app</code>&nbsp;team&nbsp;has&nbsp;already&nbsp;created&nbsp;some&nbsp;amazing&nbsp;documentation&nbsp;on&nbsp;<a href="https://create-react-app.dev/docs/deployment/#heroku" rel="noopener noreferrer nofollow">deploying&nbsp;a&nbsp;React&nbsp;app&nbsp;as&nbsp;a&nbsp;static&nbsp;web&nbsp;site&nbsp;using&nbsp;Heroku</a>.&nbsp;However,&nbsp;if&nbsp;you&nbsp;have&nbsp;ever&nbsp;wondered&nbsp;how&nbsp;you&nbsp;would&nbsp;deploy&nbsp;your&nbsp;React&nbsp;app&nbsp;with&nbsp;some&nbsp;bundled&nbsp;API,&nbsp;this&nbsp;tutorial&nbsp;is&nbsp;just&nbsp;for&nbsp;you.</p><h2><a name="step-1-—-sign-up-for-heroku" id="step-1-—-sign-up-for-heroku">Step&nbsp;1 — Sign&nbsp;up&nbsp;For&nbsp;Heroku</a></h2><p>The&nbsp;first&nbsp;step&nbsp;is&nbsp;to&nbsp;sign&nbsp;up&nbsp;for&nbsp;<a href="https://www.heroku.com" rel="noopener noreferrer nofollow">Heroku</a>.&nbsp;Heroku&nbsp;offers&nbsp;a&nbsp;<strong><em>Free&nbsp;</em></strong>plan,&nbsp;which&nbsp;is&nbsp;perfect&nbsp;if&nbsp;you&nbsp;are&nbsp;just&nbsp;starting&nbsp;out&nbsp;as&nbsp;a&nbsp;web-developer.</p><h2><a name="step-2-—-build-your-react-app" id="step-2-—-build-your-react-app">Step&nbsp;2 — Build&nbsp;your&nbsp;React&nbsp;App</a></h2><p>The&nbsp;next&nbsp;step&nbsp;is&nbsp;to&nbsp;build&nbsp;your&nbsp;React&nbsp;app.&nbsp;If&nbsp;you&nbsp;used&nbsp;<code>create-react-app</code>&nbsp;this&nbsp;will&nbsp;be&nbsp;super&nbsp;simple!&nbsp;Just&nbsp;run&nbsp;<code>npm&nbsp;run&nbsp;build</code>&nbsp;in&nbsp;your&nbsp;terminal&nbsp;at&nbsp;the&nbsp;root&nbsp;of&nbsp;your&nbsp;React&nbsp;app&nbsp;directory.&nbsp;This&nbsp;process&nbsp;should&nbsp;yield&nbsp;a&nbsp;directory&nbsp;with&nbsp;a&nbsp;production&nbsp;build&nbsp;of&nbsp;your&nbsp;app.&nbsp;Inside,&nbsp;you'll&nbsp;find&nbsp;your&nbsp;minified&nbsp;HTML,&nbsp;CSS,&nbsp;JavaScript,&nbsp;and&nbsp;some&nbsp;media&nbsp;files&nbsp;if&nbsp;you&nbsp;have&nbsp;images&nbsp;in&nbsp;your&nbsp;app.</p><h2><a name="step-3-—-serve-your-react-app" id="step-3-—-serve-your-react-app">Step&nbsp;3 — Serve&nbsp;your&nbsp;React&nbsp;App</a></h2><p>Next,&nbsp;you'll&nbsp;need&nbsp;to&nbsp;tell&nbsp;your&nbsp;backend&nbsp;to&nbsp;serve&nbsp;your&nbsp;React&nbsp;app&nbsp;when&nbsp;the&nbsp;user&nbsp;hits&nbsp;a&nbsp;specific&nbsp;route.&nbsp;If&nbsp;you&nbsp;are&nbsp;using&nbsp;Node&nbsp;and&nbsp;Express,&nbsp;this&nbsp;can&nbsp;be&nbsp;achieved&nbsp;in&nbsp;two&nbsp;lines&nbsp;of&nbsp;code:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-veIYc" id="cm-veIYc">app.use(express.static(`${__dirname}/client`));
app.get("/*", (_, res) =&gt; res.sendFile(`${__dirname}/client/index.html`));</textarea><h2><a name="step-4-—-deploy-to-heroku" id="step-4-—-deploy-to-heroku">Step&nbsp;4 — Deploy&nbsp;to&nbsp;Heroku</a></h2><p>Finally,&nbsp;the&nbsp;last&nbsp;step&nbsp;is&nbsp;to&nbsp;deploy&nbsp;your&nbsp;React&nbsp;app&nbsp;with&nbsp;some&nbsp;bundled&nbsp;API&nbsp;to&nbsp;Heroku.&nbsp;Just&nbsp;log&nbsp;into&nbsp;Heroku,&nbsp;create&nbsp;a&nbsp;new&nbsp;application,&nbsp;and&nbsp;pick&nbsp;the&nbsp;region&nbsp;of&nbsp;the&nbsp;world&nbsp;you&nbsp;want&nbsp;your&nbsp;application&nbsp;to&nbsp;be&nbsp;deployed&nbsp;in.</p><p>If&nbsp;you&nbsp;navigate&nbsp;to&nbsp;the&nbsp;dashboard&nbsp;of&nbsp;your&nbsp;newly&nbsp;created&nbsp;Heroku&nbsp;application&nbsp;and&nbsp;select&nbsp;the&nbsp;<strong><em>Deploy&nbsp;</em></strong>tab.&nbsp;You&nbsp;can&nbsp;now&nbsp;connect&nbsp;your&nbsp;Heroku&nbsp;app&nbsp;with&nbsp;an&nbsp;actual&nbsp;GitHub&nbsp;repo&nbsp;hosting&nbsp;your&nbsp;application's&nbsp;source&nbsp;code.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201218220513518_connect.png" attachmentid="7905c4fd-d2a9-4af5-a6a7-5dff0b61b9db" data-width="3338" data-height="1872" contenteditable="false"><div></div></figure><p></p><p>Once&nbsp;connected,&nbsp;you&nbsp;can&nbsp;configure&nbsp;Heroku&nbsp;to&nbsp;automatically&nbsp;deploy&nbsp;your&nbsp;application&nbsp;whenever&nbsp;you&nbsp;push&nbsp;an&nbsp;update&nbsp;to&nbsp;a&nbsp;specific&nbsp;branch&nbsp;in&nbsp;your&nbsp;repo!</p><p>And&nbsp;that's&nbsp;it!&nbsp;Hopefully&nbsp;you&nbsp;have&nbsp;found&nbsp;this&nbsp;interesting&nbsp;&amp;&nbsp;helpful.&nbsp;If&nbsp;you&nbsp;would&nbsp;like&nbsp;to&nbsp;see&nbsp;how&nbsp;this&nbsp;is&nbsp;integrated&nbsp;into&nbsp;a&nbsp;fullstack&nbsp;application&nbsp;created&nbsp;using&nbsp;React,&nbsp;GraphQL,&nbsp;Node,&nbsp;and&nbsp;TypeScript,&nbsp;checkout&nbsp;our&nbsp;<a href="https://www.newline.co/tinyhouse" rel="noopener noreferrer nofollow">TinyHouse&nbsp;Masterclass.</a></p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Deploying Your React App & API to the Cloud

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript