Deploy React and AWS Amplify
Tags: javascript, programming, react, productivity
Published: 2021-10-16 15:09:32

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p>We will cover briefly:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Configure React App with AWS Amplify Console&nbsp;</li><li>Configure React App with yml file</li><li>Manage multiple environments</li></ol>
<!-- /wp:list -->

{% youtube lwCFDhe9szs %}

<!-- wp:paragraph -->
<p>View the demo here</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><em>Website: </em></strong><a href="https://master.d19tgz4vpyd5.amplifyapp.com/" rel="noreferrer noopener" target="_blank"><strong><em>https://master.d19tgz4vpyd5.amplifyapp.com/</em></strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Configure React App with AWS Amplify&nbsp;Console</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>According to the <a href="https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html" rel="noreferrer noopener" target="_blank">docs</a>, AWS Amplify is the <strong><em>“</em></strong><em>fastest and easiest way to build mobile and web apps that scale.”</em></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/0*SRxqYBm7xD0PELku.png" alt="AWS Amplify Intro"/><figcaption>AWS Amplify Intro</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Get started <a href="https://console.aws.amazon.com/amplify/home" rel="noreferrer noopener" target="_blank">here</a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li>If you are starting from the <strong>All apps</strong> page, choose <strong>New app</strong>, <strong>Host web app</strong> in the upper right corner.</li><li>Connect your GitHub, Bitbucket, GitLab, or AWS CodeCommit repositories. We choose Github.</li><li>After you connect the repository service provider, choose a repository.</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: In case, your repository is under an organization, you won’t see the repositories unless the owner of the organization approves the email request from the AWS Amplify</p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li>Now, you should be able to see your repositories, click the one you want, choose a corresponding branch to build and deploy.</li><li>Choose <strong>Save and deploy</strong> to deploy your web app</li><li>Access the build logs screen by selecting a progress indicator on the branch tile. A build has the following stages:</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Provision -&gt; Build -&gt; Deploy -&gt;Verify</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*c4CiVq9XjCwByXAma63jFg.png" alt="Build Steps for AWS Amplify"/><figcaption>Build Steps for AWS Amplify</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Configure React App with AWS Amplify&nbsp;Console</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As a programmer, you want to have control over the deployments, but not via some console (AWS Amplify console in this case).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will configure our React deployments via the yml file, which is internally used by AWS Amplify.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Go to the AWS Amplify console and choose your app.</li><li>On the left-hand side, click on the <strong>Build settings</strong></li><li>In the App build specification, click <strong>Download. </strong>This should download the default <strong>amplify.yml</strong> file</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*fST-UCEgyfkRnDcp0TjVBA.png" alt="Amplify yml file"/><figcaption>Amplify yml file</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Add this <a href="https://github.com/AseemWangoo/expriments_with_react/blob/master/amplify.yml" rel="noreferrer noopener" target="_blank">file</a> to the root of your repository</p>
<!-- /wp:paragraph -->

```yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

<!-- wp:heading {"level":3} -->
<h3>Manage multiple environments</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Almost every react app has different environments and you want to deploy or manage multiple environments programmatically.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will configure our React app to deploy environment-based configurations inside AWS Amplify.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>For configuring different environments, we make use of <a href="https://www.npmjs.com/package/env-cmd" rel="noreferrer noopener" target="_blank">env-cmd</a></li><li>Install the env-cmd using</li></ul>
<!-- /wp:list -->

```javascript
npm i env-cmd
```

<!-- wp:list -->
<ul><li>We have a separate environment file for production <code><a href="https://github.com/AseemWangoo/expriments_with_react/blob/master/.env.production" rel="noreferrer noopener" target="_blank">.env.production</a></code> (this can be of any name)</li><li>Go to your <a href="https://github.com/AseemWangoo/expriments_with_react/blob/master/package.json" rel="noreferrer noopener" target="_blank">package.json</a> and add a new script as</li></ul>
<!-- /wp:list -->

```javascript
"build:prod": "env-cmd -f .env.production react-scripts build"
```

<!-- wp:paragraph -->
<p>So, when you run the command <code>npm run build:prod</code> this will take the configuration from the file&nbsp;<code>.env.production</code>&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Verify locally by running the <code>npm run build:prod</code> and then using <code>serve -s build</code> to run the production build locally.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If everything works, we <strong>proceed with the Amplify deployment</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Go to your app inside the AWS Amplify console and on the left-hand side click on the <strong>Environment variables</strong></li><li>Enter a variable called <strong>BUILD_ENV </strong>and give the value as<strong> prod</strong></li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*xj7cFBfI6Wnk7lVuCCGjPQ.png" alt="Build Environments"/><figcaption>Build Environments</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Inside your <code>amplify.yml</code> edit the <code>preBuild</code> phase to install the <code>env-cmd</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, edit the build phase and change the command to <code>npm run build:$BUILD_ENV</code> </p>
<!-- /wp:paragraph -->

```yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install env-cmd
        - npm ci
    build:
      commands:
        - echo "I am running 🏃 on $BUILD_ENV" 
        - npm run build:$BUILD_ENV
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Basically, this takes in the variable from your app’s environment variables(BUILD_ENV) and replaces the command with the value(prod).</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>So, at the time of build, your command becomes <code>npm run build:prod</code> which was the same you used to build locally.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>You can take this further, by creating different apps as per branches and using the BUILD_ENV variable as per your requirement.</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code># Examples
Create app with qa branch and set the BUILD_ENV as qa</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://github.com/AseemWangoo/expriments_with_react" target="_blank"><em>Source code.</em></a>

{% youtube lwCFDhe9szs %}

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>