Using Amplify I'm having difficulty deploying a React application which I believe is due to the build settings.
When trying to deploy the default build settings provided are shown below:
I know this is incorrect and the error I find in the build logs is:
2020-05-14T00:02:22.327Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src568504829/src/chatterfield/
The deploy is successful except when I launch the application I receive an ERR_TOO_MANY_REDIRECTS. After I changed the baseDirectory in build settings to /client/public to point to index.html. The app appears to launch without the REDIRECT error, but nothing loads. I'm guessing this is because I am not running an npm run build command, or not loading a prebuild command. Any help would be greatly appreciated. Thank you
Here is the repo this app is linked to:
https://github.com/travelerr/chatterfield
Change baseDirectory:/ to baseDirectory:build . It worked for me.
For anyone who finds this and put their app in a folder called frontend (or anything else substitute frontend for the path to your app.
version: 0.1
frontend:
phases:
preBuild:
commands:
- cd frontend
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: ./frontend/build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
If your react folder name is "mycoolproject", your yml will need to cd into that directory. Then run the build command. baseDirectory should be where your your final build resides.
version: 0.1
frontend:
phases:
preBuild:
commands:
- cd mycoolproject
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: ./mycoolproject/build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Also, your amplify should point to a build directory... mycoolproject/amplify/config/project-config.json
{
"providers": [
"awscloudformation"
],
"projectName": "mycoolproject",
"version": "3.1",
"frontend": "javascript",
"javascript": {
"framework": "react",
"config": {
"SourceDir": "src",
"DistributionDir": "build",
"BuildCommand": "npm run-script build",
"StartCommand": "npm run-script start"
}
}
}
Related
I have a react app that I'm trying to deploy automtically using AWS amplify. I connected the repo and the build and deployment seems to be successfull:
But opening the url shows You need to enable JavaScript to run this app. in the console
Building and serving the app locally using
$ npm run build
$ serve -s build
works fine.
I saw in the issue here that this might be about setting the "proxy" in the package.json, but I'm not sure which port does AWS amplify uses and adding the line of the answer there (using localhost:5000) doesn't work either.
any ideas?
EDIT:
amplify.yml:
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I`ve pushed my react project to AWS amplify with git. I installed the react-snap package for SEO reasons. When inspecting the Amplify Console, it shows that the provision step succeeded, but the building step failed. The error log shows this:
Some older post on github describe the same problem that I have:
https://github.com/thinkJin6/BokuNews/issues/64
I have tried out several things like adding and configuring amplify.yml file and configuring the package.json as described here:. https://github.com/puppeteer/puppeteer/issues/765
Finally I tried out some stuff from this link: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-on-aws-ec2-instance-running-amazon-linux I enable amazon-linux-extras like this, sudo amazon-linux-extras install epel -y, and installed install Chromium like this, sudo yum install -y chromium.I used AWS CloudShell, but the error log message keeps the same.
I had the same problem recently and with help of a colleague, the solution was found here: LINK
I added the following to my package.json
"reactSnap": {
"puppeteerArgs": [
"--no-sandbox",
"--disable-setuid-sandbox"
],
"puppeteerExecutablePath": "/opt/google/chrome/google-chrome"
}
Then I updated amplify.yml in was amplify build settings like so
version: 1
frontend:
phases:
preBuild:
commands:
- '# This installs Chrome on any RHEL/CentOS/Amazon Linux variant.'
- curl https://intoli.com/install-google-chrome.sh | bash
- npm i
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I'm trying to deploy my nuxt app via AWS Amplify. Here is my build config:
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Once it gets to the build part of the deploy, the console gives the following output in the build phase:
2021-07-05T18:13:35.839Z [INFO]: # Completed phase: preBuild
# Starting phase: build
2021-07-05T18:13:35.840Z [INFO]: # Executing command: npm run generate
2021-07-05T18:13:36.003Z [INFO]: > eagle-nuxt#1.0.0 generate /codebuild/output/src824807188/src/eagle-nuxt
> nuxt generate
2021-07-05T18:14:03.863Z [WARNING]: [error] /articles
connect ECONNREFUSED 127.0.0.1:3000
I've deployed a nuxt app via amplify before and this is my first time seeing this. Any help would be appreciated
Dependencies:
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"core-js": "^3.15.2",
"marked": "^2.0.7",
"moment": "^2.29.1",
"nuxt": "^2.15.7"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^4.0.3",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.35",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.1.2"
}
Thanks in advance
I figured out my issue! While developing locally, I was using a .env file. I had to add the environment variable to my build via through amplify. Documentation: https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#access-env-vars
Trying to use CodeBuild for the first time, pulling data from CodeCommit. But I'm having issues with my buildspec. This is the code I have on it so far:
version: 0.2
phases:
INSTALL:
runtime-versions:
nodejs: 10
commands:
- npm install
PRE_BUILD:
commands:
- npm install --quiet --global expo-cli
- >
if [ -f yarn.lock ]; then
yarn
elif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then
npm ci
else
npm install
fi
BUILD:
commands:
- expo build:web
artifacts:
baseDirectory: web-build
files:
- '**/*'
name:
myname-$(date +%Y-%m-%d)
cache:
paths:
- node_modules/**/*
- $(npm root --global)/**/*
I have already added the runtime for nodejs 10, it had stopped to trigger this error, but now it kicked again. Does anyone know how to properly tweak it for React-Native web projects?
I believe the phase names are case sensitive, so change them to install, pre_build and build.
I have an aws amplify project built on top of nuxt. I'm trying to setup CI using amplify console. My build keeps failing in deploy stage, for some reason the artifacts aren't being created or can't be found:
Here's my amplify.yml file:
version: 0.1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run generate
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
If I run npm run generate locally then my app is built and can be found in the dist folder without any problems.
did anyone manage to successfully deploy an amplify/nuxt app using the amplify console?
Thanks
Update 1
change the buildspec:
version: 0.1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*