How to run a different build command for staging environment when publishing a react amplify application

Asked
Active3 hr before
Viewed126 times

10 Answers

applicationbuilddifferentreact
90%

I have an amplify react application with two environments so far: prod and staging.,Then I have my .env.staging and .env.production files with different values for an API URL.,Connect and share knowledge within a single location that is structured and easy to search.

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Choose the app to configure diff based frontend build and deploy for., Choose the app to configure diff based frontend build and deploy for. ,Choose the app to configure diff based backend builds for.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Note that, these variables are embedded during build time. Also, only the variables that start with REACT_APP_ are embedded in our app. All the other environment variables are ignored.,To use the REACT_APP_STAGE variable, we are just going to set the config conditionally.,Now that we have our build commands set up with the custom environment variables, we are ready to use them in our app.

$ REACT_APP_TEST_VAR = 123 npm start
load more v
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

The last command shown above will serve your static site on the port 5000. Like many of serve’s internal settings, the port can be adjusted using the -l or --listen flags:,Now, after you create a production build with npm run build, you can deploy it by running firebase deploy.,Make sure the build folder is set correctly on the "build" tab and create the resource.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

First, we’ll need to build Storybook as a static web application using build-storybook, a command that’s installed by default. If you're using Yarn run the following command:,If you're using npm run the following command:,Once your Storybook is built as a static web app it can be deployed to any static site hosting services. The Storybook team uses Chromatic, a free publishing service made by Storybook maintainers that documents, versions, and indexes your UI components securely in the cloud.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Check out how media-savvy companies are taking their brands to the next digital level with Cloudinary.,Now that your app is in the cloud, click General in the left navigation and note these details:,Your app is now ready to call Amplify and, inherently, the AWS SDK.

? Enter a name
for the project amplifyjamstackcloud
   ?
   Enter a name
for the environment 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
Using
default provider awscloudformation
   ?
   Do you want to use an AWS profile ? Yes ?
   Please choose the profile you want to use(Use arrow keys)❯ default
load more v
60%

Under the hood, this orb creates, bundles and deploys your application using your specified parameters set under the aws-code-deploy/deploy job declaration., Using the CircleCI Configuration Editor , Using the CircleCI Configuration Editor

version: 2.1

orbs:
   aws - code - deploy: circleci / aws - code - deploy @0 .0 .11

workflows:
   deploy_application:
   jobs:
   -aws - code - deploy / deploy:
   application - name: myApplication
deployment - group: myDeploymentGroup
service - role - arn: myDeploymentGroupRoleARN
bundle - bucket: myApplicationS3Bucket
bundle - key: myS3BucketKey
load more v
48%

Location Afghanistan , Kabul ,AWS Amplify recently announced support for containers using AWS Fargate. Using the new feature, you are able to deploy APIs (REST & GraphQL) as well as hosting to AWS Fargate directly from the Amplify CLI.,Built on Forem — the open source software that powers DEV and other inclusive communities.

npx create - next - app nextonfargate
load more v
23%

However, first you must create an environment to be shared. To create a new environment you run amplify init again, but this time instead of choosing an existing environment, you create a new one.,You can confirm your environment was created by running amplify status. Doing so should output something like the image below:,Now it’s time to add an amplify category. For this example we’ll use authentication since it will provide a good example of how separate environments work. To add auth run:

Before you can create any multi-env projects, you’ll first have to install the Amplify CLI.

npm i - g @aws - amplify / cli # ORyarn global add @aws - amplify / cli

After you have the CLI installed, the next step is to create a new project. In this example I’ll be using create-react-app.

npx create - react - app amplify - multi - env && cd amplify - multi - env

Now that you have a project, you need to set up Amplify.

amplify init

Now it’s time to add an amplify category. For this example we’ll use authentication since it will provide a good example of how separate environments work. To add auth run:

amplify add auth

After adding auth, you need to push those changes to the cloud:

amplify push
npm i aws - amplify aws - amplify - react # ORyarn add aws - amplify aws - amplify - react
git add.git commit - m 'initial commit'
git push - u origin master

Workflows in Amplify behave much like branches do in a git environment. You can create a new environment like creating a new branch, and you can checkout existing environments like you can checkout existing branches in a git based project. An example workflow might look like this:

git checkout devgit pullamplify env checkout devamplify env pull...git checkout staginggit pullamplify env checkout stagingamplify env pull...git checkout mastergit pullamplify env checkout masteramplify env pull
load more v

Other "application-build" queries related to "How to run a different build command for staging environment when publishing a react amplify application"