Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update build image instructions for Gen 2 #6978

Merged
merged 2 commits into from
Feb 29, 2024
Merged

Update build image instructions for Gen 2 #6978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e687a05
update build image settings for Gen 2
Jay2113 Feb 28, 2024
b8027d4
remove callout and add fragment to vite guide
Jay2113 Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed public/images/gen2/getting-started/console4.png
View file
Open in desktop
Binary file not shown.
10 changes: 1 addition & 9 deletions src/fragments/gen2/quickstart/deploy-and-host.mdx
View file
Open in desktop
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
View file
Open in desktop
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 }} />

Loading