Running Storybook on amplify in a nextjs project - amazon-web-services

Im trying to run storybook from amplify in a nextjs project.
It sets the framework as Nextjs SSR but i went ahead and changed it to React and the app platform was kept as it is to Web Compute
I updated the amplify.yaml file as:
version: 1
frontend:
phases:
preBuild:
commands:
- nvm install
- nvm use
- yarn install --immutable
build:
commands:
- npm run build-storybook
artifacts:
baseDirectory: storybook-static
files:
- "**/*"
cache:
paths:
- node_modules/**/*
But the build always fails with this error
2023-02-15T09:45:08.672Z [WARNING]: info
2023-02-15T09:45:08.672Z [WARNING]: => Output directory: /codebuild/output/src160065809/src/dc-extension-get-started/storybook-static
2023-02-15T09:45:08.737Z [INFO]: # Completed phase: build
2023-02-15T09:45:08.739Z [INFO]: ## Build completed successfully
2023-02-15T09:45:08.740Z [INFO]: # Starting caching...
2023-02-15T09:45:08.750Z [INFO]: # Creating cache artifact...
2023-02-15T09:45:21.174Z [INFO]: # Created cache artifact
2023-02-15T09:45:21.296Z [INFO]: # Uploading cache artifact...
2023-02-15T09:45:24.843Z [INFO]: # Uploaded cache artifact
2023-02-15T09:45:24.919Z [INFO]: # Caching completed
2023-02-15T09:45:24.922Z [INFO]: Setting NEXT_PRIVATE_STANDALONE=true to produce .next/standalone directory
2023-02-15T09:45:24.926Z [INFO]: # No custom headers found.
2023-02-15T09:45:24.930Z [ERROR]: !!! CustomerError: Standalone directory not found in /codebuild/output/src160065809/src/dc-extension-get-started/storybook-static/standalone. Please enable output standalone on your next.config.js file or set NEXT_PRIVATE_STANDALONE=true. https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files
2023-02-15T09:45:24.930Z [INFO]: # Starting environment caching...
2023-02-15T09:45:24.930Z [INFO]: # Uploading environment cache artifact...
2023-02-15T09:45:24.982Z [INFO]: # Uploaded environment cache artifact
2023-02-15T09:45:24.982Z [INFO]: # Environment caching completed
Terminating logging...
Looks like it still tries to find a nextjs app how to get the storybook running in a nextjs app on amplify ?

Related

AWS amplify deployment fails - You need to enable JavaScript to run this app

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/**/*

NextJS deployment on AWS amplify issue (frontend + incompatible module)

I deploy the nextjs project by connecting the github repo, the provision passes, the backend is built, but the frontend fails to build. Here is the log with the error:
# Starting phase: preBuild
# Executing command: yarn install
2021-12-13T06:55:51.568Z [INFO]: yarn install v1.22.0
2021-12-13T06:55:51.620Z [INFO]: [1/4] Resolving packages...
2021-12-13T06:55:51.815Z [INFO]: [2/4] Fetching packages...
2021-12-13T06:56:02.529Z [WARNING]: error next#12.0.7: The engine "node" is incompatible with this module. Expected version ">=12.22.0". Got "12.21.0"
2021-12-13T06:56:02.537Z [WARNING]: error Found incompatible module.
2021-12-13T06:56:02.538Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
2021-12-13T06:56:02.550Z [ERROR]: !!! Build failed
2021-12-13T06:56:02.552Z [ERROR]: !!! Non-Zero Exit Code detected
2021-12-13T06:56:02.552Z [INFO]: # Starting environment caching...
2021-12-13T06:56:02.552Z [INFO]: # Environment caching completed
Terminating logging...
The build settings:
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I really do not know how to fix this, is it an AWS issue or my project has outdated packages? Any help would be appreciated 😄.
To fix this issue you have to tell Amplify which version of NodeJS to use.
Go To:
Build Settings
At the bottom is Edit Build image settings
Click Add Package Overide
Set your NodeJS version
This worked for me.

AWS Amplify throws ECONNREFUSED 127.0.0.1:3000 when running nuxt generate

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

Timeout while waiting for command: "sam local invoke"

I'm building server less applications using AWS SAM
SAM + VSCode + Docker desktop
Everything was working fine, but suddenly I started getting timeout error when I run debug.
Note: sam local invoke (without debug) works fine.
Problem occurs when i run debug mode (i.e. F5), it stops as shown below. Could this be problem with networking? python version? Debug was working before.
Note also: I have host windows 10 machine, I'm running a Windows 10 VM (HyperV) within the host, in which I have this is dev environment setup.
Below is log:
2021-05-20 11:43:48 [INFO]: Preparing to debug locally: Lambda "qa.lambdaHandler"
2021-05-20 11:43:48 [INFO]: Building SAM application...
2021-05-20 11:43:48 [INFO]: Running command: (not started) [C:\Program Files\Amazon\AWSSAMCLI\bin\sam.cmd build --build-dir C:\Users\PK\AppData\Local\Temp\aws-toolkit-vscode\vsctkzhq0Ca\output
--template C:/Users/PK/code/GCMS-AWS/publish-dynamodb/cmsqa/app___vsctk___template.yaml
--base-dir C:/Users/PK/code/GCMS-AWS/publish-dynamodb/cmsqa]
2021-05-20 11:43:50 [INFO]: Building codeuri: C:/Users/PK/code/GCMS-AWS/publish-dynamodb/cmsqa runtime: nodejs12.x metadata: {} functions: ['cmsqa']
2021-05-20 11:43:50 [INFO]: Running NodejsNpmBuilder:NpmPack
2021-05-20 11:44:02 [INFO]: Running NodejsNpmBuilder:CopyNpmrc
2021-05-20 11:44:02 [INFO]: Running NodejsNpmBuilder:CopySource
2021-05-20 11:44:02 [INFO]: Running NodejsNpmBuilder:NpmInstall
2021-05-20 11:44:28 [INFO]: Running NodejsNpmBuilder:CleanUpNpmrc
2021-05-20 11:44:30 [INFO]:
Build Succeeded
2021-05-20 11:44:30 [INFO]:
Built Artifacts : ..\..\Temp\aws-toolkit-vscode\vsctkzhq0Ca\output
Built Template : ..\..\Temp\aws-toolkit-vscode\vsctkzhq0Ca\output\template.yaml
Commands you can use next
=========================
[*] Invoke Function: sam local invoke -t ..\..\Temp\aws-toolkit-vscode\vsctkzhq0Ca\output\template.yaml
[*] Deploy: sam deploy --guided --template-file ..\..\Temp\aws-toolkit-vscode\vsctkzhq0Ca\output\template.yaml
2021-05-20 11:44:30 [INFO]: Build complete.
2021-05-20 11:44:30 [INFO]: Starting SAM application locally
2021-05-20 11:44:30 [INFO]: AWS.running.command
2021-05-20 11:44:30 [ERROR]: Timeout while waiting for command: "sam local invoke"
2021-05-20 11:44:30 [ERROR]: Failed to run SAM application locally: Timeout while waiting for command: "sam local invoke"
Command stopped: "sam local invoke"
I found the problem after spending lot of time...
Need to increase timeout here...

AWS amplify don't deploy build infinit

I have a project to react to and I want to deploy it on AWS Amplify, locally I run the build perfectly, but when I do it on AWS it is compiling infinitely until I get a time out error. What am I doing wrong? I'm new to it and I couldn't find anything related
2020-12-30T21:20:07.282Z [WARNING]:
2020-12-30T21:20:07.288Z [INFO]: added 2085 packages from 1294 contributors and audited 2098 packages in 31.209s
2020-12-30T21:20:08.604Z [INFO]: 96 packages are looking for funding
run `npm fund` for details
2020-12-30T21:20:08.605Z [INFO]: found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
2020-12-30T21:20:08.633Z [INFO]: # Completed phase: preBuild
# Starting phase: build
# Executing command: npm run build
2020-12-30T21:20:08.801Z [INFO]: > monetiz-web#0.1.0 build /codebuild/output/src941862754/src/monetiz-app
> node scripts/build.js
2020-12-30T21:20:09.455Z [INFO]: Creating an optimized production build...
2020-12-30T21:21:08.746Z [INFO]: Compiled successfully.
```
Build Settings
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
- node ./node_modules/gulp/bin/gulp.js
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```