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
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
...
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
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
...
Development preparation
Delete the following line from package.json.
"type": "module",
Add the following code before the closing body tag of index.html.
<script>
window.global = window;
window.process = {
env: { DEBUG: undefined },
};
var exports = {};
</script>
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" },
],
},
});
Rewrite the "jsx" property of tsconfig.json as follows.
"jsx": "react"
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
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
...
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"]
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
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
...
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)