Setup new react app using existing AWS-Amplify backend

maximus

• 2 min read
Setup new react app using existing AWS-Amplify backend

Problem:

I need to create 2 React apps using the same Amplify backend.

Normally, I create [ReactApp + Amplif] backend and deploy this set to the AWS Amplify service.

If I create an additional React app and want to deploy it to  AWS amplify service, I thought I would need another Amplify backend. Because without amplify init command, I can not deploy to Aws Amplify.

Luckily,  Aws Amplify allows a front-end app can connect to another App backend.

Solution:

Below is how I set up additional React app.

  1. Create a new react app

npx create-react-app .

2. Init amplify for hosting the react app to 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 xxxx
The following configuration will be applied:

Project information
| Name: tldbrowseruser
| 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? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

3. CI/CD setting

4. Connect app with backend

5. Choose your backend.

Here you can choose the backend of other amplify applications.

6. Pull backend to the react project

amplify pull --appId {your backend app id} --envName dev

? Choose your default editor: Visual Studio Code
? 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
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
? Do you plan on modifying this backend? No

✅ Added backend environment config object to your project.
Run 'amplify pull' to sync future upstream changes.

Notice: Choose No for the question Do you plan on modifying this backend?. Because you will not want to manage 1 backend in 2 repositories.

7. Finally, copy  graphql/ folder to the new react src/ folder for using graphql query in new react app.