Skip to content

Commit

Permalink
Update build image instructions for Gen 2 (#6978)
Browse files Browse the repository at this point in the history
* update build image settings for Gen 2

* remove callout and add fragment to vite guide
  • Loading branch information
Jay2113 committed Feb 29, 2024
1 parent 7661906 commit 3647359
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 34 deletions.
Binary file removed public/images/gen2/getting-started/console4.png
Binary file not shown.
10 changes: 1 addition & 9 deletions src/fragments/gen2/quickstart/deploy-and-host.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,7 @@ If you already have your project remotely hosted in a Git repository, you can sk

3. In the Git provider screen, choose **Option 2: Start with an existing app**. Connect the repository you just deployed and pick a branch.

<Callout warning>Next.js 14 apps require a [minimum node version](https://nextjs.org/blog/next-14#other-changes) of 18.17 at build time.</Callout>

4. Under **Advanced settings**, navigate to **Build image** and enter `amplify:al2023`. The Amplify Amazon Linux 2023 build image supports Node.js versions 18 and 20 at build time. You can specify the Node.js version during your build through [live package updates](https://docs.aws.amazon.com/amplify/latest/userguide/custom-build-image.html#setup-live-updates) or [nvm](https://github.com/nvm-sh/nvm). Amplify Hosting will automatically deploy your compute runtime to match the Node.js version used at build time.

![Amplify Gen 2 console showing the "Advanced settings" view with "amplify:al2023" specified for build image.](/images/gen2/getting-started/console4.png)

<Callout warning>If you have an existing Gen-2 application, you can modify the build image by navigating to **Hosting > Environment variables** and creating a new environment variable `_CUSTOM_IMAGE` with the value `amplify:al2023`, then redeploying the build.</Callout>

5. Review all of your settings to ensure everything is set up correctly. Choose **Save and deploy** to deploy your web app.
4. Review all of your settings to ensure everything is set up correctly. Choose **Save and deploy** to deploy your web app.

### Manage fullstack branch

Expand Down
27 changes: 2 additions & 25 deletions src/pages/gen2/start/quickstart/vite-react-app/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -240,30 +240,7 @@ useEffect(() => {

Go to `localhost` in the browser to make sure you can now log in and create and list to-dos. You can end your development session by shutting down the frontend dev server and cloud sandbox. The sandbox prompts you to delete your backend resources. While you can retain your backend, we recommend deleting all resources so you can start clean again next time.

## Deploy and host a fullstack branch
import deployAndHost from 'src/fragments/gen2/quickstart/deploy-and-host.mdx';

Now that your app is working, deploy it to a shared fullstack branch so you can share the project with your team.

Amplify offers a fully managed hosting service with CI/CD built in, making it easy to set up production and staging environments with Git branches. In Gen 2, every Git branch in your repository maps 1:1 to a fullstack branch in Amplify.

### Create remote Git repository

If you already have your project remotely hosted in a Git repository, you can skip this step. Otherwise, navigate to your preferred Git provider, and add your project to a new repository. Amplify supports [GitHub](https://docs.github.com/en/get-started/quickstart/create-a-repo), [AWS CodeCommit](https://docs.aws.amazon.com/codecommit/latest/userguide/how-to-create-repository.html), [GitLab](https://docs.gitlab.com/ee/user/project/index.html), and [Bitbucket](https://support.atlassian.com/bitbucket-cloud/docs/create-a-git-repository/).

### Connect branch in the Amplify console

1. To get started with Gen 2, log in to the [AWS console](https://console.aws.amazon.com/console/home?#amplify) and navigate to your preferred AWS Region. (The Amplify console is available in [19 AWS Regions](https://docs.aws.amazon.com/general/latest/gr/amplify.html#amplify_region)).
2. From the **Public Preview** banner, choose **Try Amplify Gen 2**.

![Amplify Gen 2 console showing the "Public Preview" banner with "Try Amplify Gen 2" button.](/images/gen2/getting-started/console1.png)

3. In the Git provider screen, choose **Option 2: Start with an existing app**. Connect the repository you just deployed and pick a branch.

<Callout warning>If you have an existing Gen-2 app, you can modify the build image by navigating to **Hosting > Environment variables** and creating a new environment variable `_CUSTOM_IMAGE` with the value `amplify:al2023`, then redeploy the build.</Callout>

4. Review all of your settings to ensure everything is set up correctly. Choose **Save and deploy** to deploy your web app.

### Manage fullstack branch

The new Amplify console gives you a central place to manage your branches, hosting settings, CI/CD builds, and backend resources. Even though you can access backend resources directly from AWS service consoles, the Amplify console offers built-in user and data administration.
<Fragments fragments={{ javascript: deployAndHost, react: deployAndHost }} />

0 comments on commit 3647359

Please sign in to comment.