DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Kihara, Takuya for AWS Community Builders

Posted on

Memo: How to create a React and relative framework project for AWS Amplify

I've been using the React and relative framework more and more with AWS Amplify, but I quickly forget how to create a project, so I'll make a quick record.

Everything is based on TypeScript, and the development environment is Cloud9. Other environments should work as well.

Here, I describe how to create React (create-react-app), React (Vite), Next.js, and Gatsby.

1. React (create-react-app)

Based on the official documentation.
https://ui.docs.amplify.aws/react/getting-started/usage/create-react-app

Project creation

% npx create-react-app react-app --template typescript
% cd react-app
Enter fullscreen mode Exit fullscreen mode

Amplify settings

Change point(s): nothing

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project reactapp
The following configuration will be applied:

Project information
| Name: reactapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...
Enter fullscreen mode Exit fullscreen mode

2. React (Vite)

There is no official flow, but there is reference information for troubleshooting.

Project creation

% npm create vite@latest vite-react-app -- --template react-ts
% cd vite-react-app
% npm install
Enter fullscreen mode Exit fullscreen mode

Amplify settings

Change point(s):

  • Distribution Directory Path: dist
  • Start Command: npm run-script preview
% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project vitereactapp
The following configuration will be applied:

Project information
| Name: vitereactapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script preview
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...
Enter fullscreen mode Exit fullscreen mode

Development preparation

Delete the following line from package.json.

   "type": "module",
Enter fullscreen mode Exit fullscreen mode

Add the following code before the closing body tag of index.html.

  <script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    };
    var exports = {};
  </script>
Enter fullscreen mode Exit fullscreen mode

Rewrite vite.config.js with the following code.
(The port number specification is for Cloud9.)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: [
      { find: "./runtimeConfig", replacement: "./runtimeConfig.browser" },
      { find: "@", replacement: "/src" },
    ],
  },
});
Enter fullscreen mode Exit fullscreen mode

Rewrite the "jsx" property of tsconfig.json as follows.

    "jsx": "react"
Enter fullscreen mode Exit fullscreen mode

Reference

The official document describes the changes around the settings.
https://ui.docs.amplify.aws/react/getting-started/troubleshooting#vite

3. Next.js

Hosting functionality for Next.js v12 and higher has been addressed in a recent update.

Project creation

% npx create-next-app@latest next-app --ts
% cd next-app
Enter fullscreen mode Exit fullscreen mode

Amplify settings

Change point(s):

  • Source Directory Path: .
  • Distribution Directory Path: .next
% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project nextapp
The following configuration will be applied:

Project information
| Name: nextapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...
Enter fullscreen mode Exit fullscreen mode

Development preparation

Exclude the amplify directory and below from the monitoring scope of TypeScript.
(It fails when trying to build Amplify Custom or Amplify Override files.)

Rewrite the "exclude" property of tsconfig.json as follows.

  "exclude": ["node_modules", "amplify"]
Enter fullscreen mode Exit fullscreen mode

Reference

The flow is described in the original document, but the Next.js project creation method is different.
https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/

I wrote about why we rewrite the "exclude" property:

4. Gatsby

The latest Gatsby v5 requires Node.js v18 or higher, so it takes a lot of time and effort to build the environment in Cloud9.

Therefore, this is the only confirmation in Local.

Project creation

% npm init gatsby gatsby-app -- -y -ts
% cd gatsby-app
Enter fullscreen mode Exit fullscreen mode

Amplify settings

Change point(s):

  • Distribution Directory Path: public
  • Start Command: npm run-script serve
% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project gatsbyapp
The following configuration will be applied:

Project information
| Name: gatsbyapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: public
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation
? Select the authentication method you wa
...
Enter fullscreen mode Exit fullscreen mode

Reference

Gatsby documentation links to Amplify documentation.
https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-aws-amplify/
https://docs.amplify.aws/guides/hosting/gatsby/q/platform/js/

Top comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!