<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ely Alamillo</title>
    <description>The latest articles on DEV Community by Ely Alamillo (@botdev_).</description>
    <link>https://dev.to/botdev_</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F635159%2F0dd4dca7-d4c6-4b47-886e-a76031430f81.jpeg</url>
      <title>DEV Community: Ely Alamillo</title>
      <link>https://dev.to/botdev_</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/botdev_"/>
    <language>en</language>
    <item>
      <title>Deploying a Next.js app with AWS Amplify</title>
      <dc:creator>Ely Alamillo</dc:creator>
      <pubDate>Fri, 21 May 2021 20:06:44 +0000</pubDate>
      <link>https://dev.to/aws-builders/deploying-a-next-js-app-with-aws-amplify-3bdc</link>
      <guid>https://dev.to/aws-builders/deploying-a-next-js-app-with-aws-amplify-3bdc</guid>
      <description>&lt;p&gt;This week AWS amplify announced support for deploying Next.js SSR apps, which has been a long awaited feature. You can read the announcement &lt;a href="https://aws.amazon.com/about-aws/whats-new/2021/05/aws-amplify-hosting-announces-server-side-rendering-support-for-next-js-web-apps/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Next app
&lt;/h3&gt;

&lt;p&gt;For the purposes of this guide we will deploy the basic app scaffold provided by &lt;a href="https://www.npmjs.com/package/create-next-app" rel="noopener noreferrer"&gt;create-next-app&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Deployment
&lt;/h3&gt;

&lt;p&gt;Since we will be using Amplify, we first need to go through the installation and setup process. We can figure out how to do that by following the &lt;a href="https://docs.amplify.aws/cli/start/install" rel="noopener noreferrer"&gt;official docs&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Creating an Amplify Project
&lt;/h4&gt;

&lt;p&gt;Once we have Amplify configured we can go ahead and create a project. We can achieve that by running &lt;code&gt;amplify init&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9kg1xgzxa6oc28ivgz7p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9kg1xgzxa6oc28ivgz7p.png" alt="Domain List"&gt;&lt;/a&gt;&lt;br&gt;
We will need to create a name for our project and a profile to use and amplify will spin up all the resources we will need.&lt;/p&gt;

&lt;h4&gt;
  
  
  Zero config deploy
&lt;/h4&gt;

&lt;p&gt;Amplify provides a zero config deploy similar to vercel, which allows us to connect a git provider to use for our deployments. To get started we can go the the &lt;a href="https://console.aws.amazon.com/amplify/home" rel="noopener noreferrer"&gt;Amplify console&lt;/a&gt; and select Host web app.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2sk80v08570ezhbcuynx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2sk80v08570ezhbcuynx.png" alt="Host web app"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Select git provider
&lt;/h5&gt;

&lt;p&gt;We can now select our preferred git provider such as Github for this example.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftgyl5fmmfakakh3ymqsw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftgyl5fmmfakakh3ymqsw.png" alt="Select a git provider"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Add repo branch
&lt;/h5&gt;

&lt;p&gt;After selecting our desired git provider we can select which branch we would like to deploy from.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facjfykq1gsqqx3ywmfk4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facjfykq1gsqqx3ywmfk4.png" alt="Select repo branch to deploy from"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Configure build settings
&lt;/h5&gt;

&lt;p&gt;After selecting a branch we can now configure our build settings, for the most part we won't need to modify this config as Amplify will take care of that for us.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa7nvyogub0rmygu9kqbl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa7nvyogub0rmygu9kqbl.png" alt="Configure build setting for deployment"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Review
&lt;/h5&gt;

&lt;p&gt;Now we can review everything looks correct before triggering a deploy.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4x2ql54oxk73xyykw14d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4x2ql54oxk73xyykw14d.png" alt="Review configuration"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Verify deployment
&lt;/h5&gt;

&lt;p&gt;Finally we can see the deployment starting and in a few minutes our site will be live!&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnxzuyu21clcmztu4u60j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnxzuyu21clcmztu4u60j.png" alt="Verify deployment"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Thanks to Amplify we can now deploy Next.js SSR app on AWS with a relatively low effort. Let me know what you think about this new feature!&lt;/p&gt;

</description>
      <category>aws</category>
      <category>nextjs</category>
      <category>react</category>
      <category>devops</category>
    </item>
  </channel>
</rss>
