Welcome to serverlessui Discussions!

[JakePartusch]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

[IkehAkinyemi]

Hello, I'm new to using AWS and its tools or library built around it. But I would love to understand serverless UI to be able to use to build a project, then hopefully write about what I learned along the way. Hope someone is available to answer my questions.

And there aren't enough articles out there discussing serverless UI to help developers understand and use the library.

[JakePartusch]

Hi @IkehAkinyemi, I'm happy to help with any questions you might have.

[IkehAkinyemi]

Thank you so much @JakePartusch.

[IkehAkinyemi]

Using Serverless UI in production:

can we discuss the added bundle size and why and when you should use Serverless UI in a new or existing application?

[JakePartusch]

Serverless functions are super easy to deploy as APIs with Serverless UI, so static sites with functions are the best use case. But, purely static websites are supported as well 🚀!

[IkehAkinyemi]

Ohh, thank you so much @JakePartusch, You have helped clear some confusion I had while learning/using this project within my application. Thank you.

[IkehAkinyemi]

I would love to write an article about using this library within my project, I hope it's okay to write about whatever I learnt from you during this discussion?

[JakePartusch]

Of course! 💯

[IkehAkinyemi]

Thank you for the help and time.

[IkehAkinyemi]

Why use Serverless UI:

So currently from the docs, and what you've mentioned within the discussion, there're beautiful benefits associated with using Serverless UI.

But I will really love to know if there is/are any futuristic features or shortcomings of Serverless UI that you'd love to share, something that other developers hoping to contribute to the project can look at or contribute to?

[IkehAkinyemi]

The docs only made mention of AWS. Is there plans for it to support other platforms or would it strictly be for AWS only?

[JakePartusch]

At this time the core infrastructure is written with aws-cdk, which is only applicable to AWS. It might be possible to migrate to multi-cloud support in the future if the infrastructure was switched to use Pulumi or CDK for Terraform. Not on the short-term roadmap though.

[IkehAkinyemi]

This is great. I will always check in from time to time, to see any new updates or features if added.

[IkehAkinyemi]

Couldn't Successfully Deploy Through SUI Command

sui deploy --dir="build"
No functions found in directory ./functions
Deploying Preview Stack...
Config file found, overriding defaults
Zone ID, Certificate Arn and Domain not specified, defaulting to cloudfront.net
npx cdk bootstrap   -c apiEntries="" -c uiEntry="build" -a "node /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js"
 ⏳  Bootstrapping environment aws://261955174750/us-west-2...
CDKToolkit: creating CloudFormation changeset...
[██████████████████████████████████████████████████████████] (3/3)



 ✅  Environment aws://261955174750/us-west-2 bootstrapped.
npx cdk synth   -c apiEntries="" -c uiEntry="build" -a "node /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js" --quiet
npx cdk deploy   -c apiEntries="" -c uiEntry=build -a "node /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js" --require-approval never --outputs-file cdk.out/outputs.json
ServerlessUIAppPreview4ba3fd41: deploying...
[0%] start: Publishing 4cd61014b71160e8c66fe167e43710d5ba068b80b134e9bd84508cf9238b2392:current
[25%] success: Published 4cd61014b71160e8c66fe167e43710d5ba068b80b134e9bd84508cf9238b2392:current
[25%] start: Publishing e9882ab123687399f934da0d45effe675ecc8ce13b40cb946f3e1d6141fe8d68:current
[50%] success: Published e9882ab123687399f934da0d45effe675ecc8ce13b40cb946f3e1d6141fe8d68:current
[50%] start: Publishing c24b999656e4fe6c609c31bae56a1cf4717a405619c3aa6ba1bc686b8c2c86cf:current
[75%] success: Published c24b999656e4fe6c609c31bae56a1cf4717a405619c3aa6ba1bc686b8c2c86cf:current
[75%] start: Publishing e39cd74329ed5c25af9a589b424a87db5d369f76ac21534fb33663183915508d:current
[100%] success: Published e39cd74329ed5c25af9a589b424a87db5d369f76ac21534fb33663183915508d:current
ServerlessUIAppPreview4ba3fd41: creating CloudFormation changeset...
23:27:17 | CREATE_FAILED        | AWS::CloudFront::Distribution | ServerlessUIDistri
bution0C695037
Resource handler returned message: "Access denied for operation 'Your account must b
e verified before you can add new CloudFront resources. To verify your account, plea
[██████████████▌···········································] (4/16)

23:27:17 | CREATE_FAILED        | AWS::CloudFront::Distribution | ServerlessUI/Distr
ibution
Resource handler returned message: "Access denied for operation 'Your account must b
e verified before you can add new CloudFront resources. To verify your account, please contact AWS Support (https://console.aws.amazon.com/support/home#/) and include t
his error message. (Service: CloudFront, Status Code: 403, Request ID: a82c8e6a-deaa
-465e-8982-65be377e550d, Extended Request ID: null)'." (RequestToken: e2110eaa-8163-1834-892a-617247d09130, HandlerErrorCode: AccessDenied)
23:27:18 | ROLLBACK_IN_PROGRESS | AWS::CloudFormation::Stack    | ServerlessUIAppPre
view4ba3fd41
The following resource(s) failed to create: [ServerlessUIDistribution0C695037,
CustomCDKBucketDeployment8693BB64968944B69AAFB0CC9EB8756CServiceRoleDefaultPolicy889
02FDF]. Rollback requested by user.















 ❌  ServerlessUIAppPreview4ba3fd41 failed: Error: The stack named ServerlessUIAppPreview4ba3fd41 failed creation, it may need to be manually deleted from the AWS console: ROLLBACK_COMPLETE
    at Object.waitForStackDeploy (/home/ikehakinyemi/.npm/_npx/48226/lib/node_modules/cdk/node_modules/aws-cdk/lib/api/util/cloudformation.ts:305:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at Object.deployStack (/home/ikehakinyemi/.npm/_npx/48226/lib/node_modules/cdk/node_modules/aws-cdk/lib/api/deploy-stack.ts:294:26)
    at CdkToolkit.deploy (/home/ikehakinyemi/.npm/_npx/48226/lib/node_modules/cdk/node_modules/aws-cdk/lib/cdk-toolkit.ts:180:24)
    at initCommandLine (/home/ikehakinyemi/.npm/_npx/48226/lib/node_modules/cdk/node_modules/aws-cdk/bin/cdk.ts:209:9)
The stack named ServerlessUIAppPreview4ba3fd41 failed creation, it may need to be manually deleted from the AWS console: ROLLBACK_COMPLETE
/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/gluegun/build/index.js:13
    throw up;
    ^

Error: Command failed: npx cdk deploy   -c apiEntries="" -c uiEntry=build -a "node /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js" --require-approval never --outputs-file cdk.out/outputs.json
    at checkExecSyncError (child_process.js:640:11)
    at Object.execSync (child_process.js:676:15)
    at Command.run (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/dist/cli.js:89:34) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 48225,
  stdout: null,
  stderr: null
}

This is a simple React + TypeScript + Redux Notes project that I'm trying to deploy on AWS. But it's failing, and sincerely I can't tell what's making it fail.

I configured my AWS CLI:

aws configure
AWS Access Key ID [None]: [filled in my access key]
AWS Secret Access Key [None]: [filled in my secret access key]
Default region name [None]: us-west-2
Default output format [None]: json

Then after doing that, I ran the sui command:

sui deploy --dir="build"

Then ended up with the error.

Please where possibly could my error on my end be coming from?

[IkehAkinyemi]

Good afternoon Jake. It's 2:07 pm here in Nigeria.

Hope you're good.

I need your help to resolve the above issue. Thank you.

[JakePartusch]

Hi @IkehAkinyemi, it looks like it is failing to deploy because of the error

"Resource handler returned message: "Access denied for operation 'Your account must be verified before you can add new CloudFront resources. To verify your account, please contact AWS Support (https://console.aws.amazon.com/support/home#/) and include this error message. "

I found this which might be helpful?
https://stackoverflow.com/questions/55084436/accessdeniedexception-while-creating-aws-web-cloudfront-distribution

[IkehAkinyemi]

Thank you so much. I will go ahead to try it at once and give you feedback on it.

[IkehAkinyemi]

Hello Jake,
I'm really happy to let you know that I have successfully built and hosted my project through the serverless UI library, after having my account verified on AWS: https://d2qqi6n4s89ks6.cloudfront.net/

The greater news is that I got an opportunity to write for Smashing magazine on the topic:

"A Deep Dive Into Serverless UI With TypeScript"

This is a great opportunity for me to share the knowledge I have gained from reading and discussing with you on the library.

I really want to thank you for the assistance you've provided to me through this period. Thank you, Jake!

[IkehAkinyemi]

I'd love to write the article and pass it across to you to make sure everything is properly covered for the great number of readers on the Smashing magazine, even your suggestions that you have for the readers, hope that's okay with you?

This is the first article on this great library on Smashing magazine publication, even outside Smashing magazine and I would love to make sure this content I will write would cover and convey the right and needed information to get started on serverless UI.

[JakePartusch]

@IkehAkinyemi, of course!

[IkehAkinyemi]

Thank you Jake.
Once I'm done writing it. I will share the link to the dropbox paper.

[IkehAkinyemi]

Good day Jake,

I was required to advance the topic.

Already exploring and building and trying to deploy and writing more on serverless UI.

Currently exploring serverless functions with the command-line utility, Serverless UI.

I want to ask to know more about using serverless UI to deploy only serverless functions.

What makes it different between using AWS sam to deploy serverless functions and serverless UI.

[JakePartusch]

I'm not very familiar with SAM, but the goal of Serverless UI is to provide an easy way to deploy a UI and serverless functions to AWS with zero-config. Solutions like SAM, CDK, and Cloudformation tend to have all of the building blocks, but not everything you need to get going out-of-the-box.

[IkehAkinyemi]

Great, thank you.

I'm looking at deploying and writing on serverless functions, and as well as custom domain configuration.

Thank you. I will love to always come back and ask questions about any confusion I have on Serverless UI.

[IkehAkinyemi]

Looking at the image while the command was running, I want to ask what's the downloading process all about?

[JakePartusch]

I believe that this is due to esbuild not being available locally on your machine. https://docs.aws.amazon.com/cdk/api/latest/docs/aws-lambda-nodejs-readme.html#local-bundling

You might be able to resolve this by installing it as a dev dependency npm install esbuild --save-dev

[IkehAkinyemi]

Right.

I will install that right away.

[IkehAkinyemi]

Deploying Preview Stack...
Config file found, overriding defaults
Zone ID, Certificate Arn and Domain not specified, defaulting to cloudfront.net
npx cdk bootstrap   -c apiEntries="src/handlers/get-all-items.ts,src/handlers/get-by-id.ts,src/handlers/put-item.ts,src/handlers/write-item.ts,src/utils/dynamodb.ts,src/utils/sqs.ts" -c uiEntry="./dist" -a "node /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js"
Sending build context to Docker daemon  97.79kB
Step 1/10 : ARG IMAGE=public.ecr.aws/sam/build-nodejs12.x
Step 2/10 : FROM $IMAGE
latest: Pulling from sam/build-nodejs14.x
875e095bfbe8: Pull complete 
3bb7c6522e48: Pull complete 
81f072329f82: Pull complete 
c13c7769bec0: Pull complete 
0d82fad4d953: Pull complete 
6a085f812b08: Pull complete 
a902729ebcce: Pull complete 
1bf790f73359: Pull complete 
6561f5377d6a: Pull complete 
Digest: sha256:7f5f7cee4b7aa958e9b083a5680b4fb92810f9a0e3f5076172d485840f8710a7
Status: Downloaded newer image for public.ecr.aws/sam/build-nodejs14.x:latest
 ---> 684c564ff873
Step 3/10 : RUN npm install --global [email protected]
 ---> Running in b84740b376c0
/var/lang/bin/yarnpkg -> /var/lang/lib/node_modules/yarn/bin/yarn.js
/var/lang/bin/yarn -> /var/lang/lib/node_modules/yarn/bin/yarn.js
+ [email protected]
added 1 package in 1.932s
Removing intermediate container b84740b376c0
 ---> cf3b046b6964
Step 4/10 : ARG ESBUILD_VERSION=0
 ---> Running in e5e84d13e056
Removing intermediate container e5e84d13e056
 ---> f5a04d8f30ac
Step 5/10 : RUN npm install --global --unsafe-perm=true esbuild@$ESBUILD_VERSION
 ---> Running in ce7ad0c97414
/var/lang/bin/esbuild -> /var/lang/lib/node_modules/esbuild/bin/esbuild

> [email protected] postinstall /var/lang/lib/node_modules/esbuild
> node install.js

+ [email protected]
added 1 package in 37.593s
Removing intermediate container ce7ad0c97414
 ---> eec866b5c600
Step 6/10 : RUN mkdir /tmp/npm-cache &&     chmod -R 777 /tmp/npm-cache &&     npm config --global set cache /tmp/npm-cache
 ---> Running in 0f45c79041fb
Removing intermediate container 0f45c79041fb
 ---> 48b07d6e121b
Step 7/10 : RUN mkdir /tmp/yarn-cache &&     chmod -R 777 /tmp/yarn-cache &&     yarn config set cache-folder /tmp/yarn-cache
 ---> Running in a606ab57fc00
yarn config v1.22.5
success Set "cache-folder" to "/tmp/yarn-cache".
Done in 0.04s.
Removing intermediate container a606ab57fc00
 ---> e7fb493e6cbf
Step 8/10 : RUN npm config --global set update-notifier false
 ---> Running in 2d22fa0decf6
Removing intermediate container 2d22fa0decf6
 ---> 14ca9de72f5c
Step 9/10 : RUN /sbin/useradd -u 1000 user && chmod 711 /
 ---> Running in 63a264e62ef3
Removing intermediate container 63a264e62ef3
 ---> f8a19e6e906a
Step 10/10 : CMD [ "esbuild" ]
 ---> Running in caaa911453b9
Removing intermediate container caaa911453b9
 ---> 8a631083fcfa
Successfully built 8a631083fcfa
Successfully tagged cdk-a5426968fe02b1d6442eb8d3c725ef43daef73457910be5c93f2e69dfa92f617:latest
Sending build context to Docker daemon  97.79kB
Step 1/10 : ARG IMAGE=public.ecr.aws/sam/build-nodejs12.x
Step 2/10 : FROM $IMAGE
 ---> 684c564ff873
Step 3/10 : RUN npm install --global [email protected]
 ---> Using cache
 ---> cf3b046b6964
Step 4/10 : ARG ESBUILD_VERSION=0
 ---> Using cache
 ---> f5a04d8f30ac
Step 5/10 : RUN npm install --global --unsafe-perm=true esbuild@$ESBUILD_VERSION
 ---> Using cache
 ---> eec866b5c600
Step 6/10 : RUN mkdir /tmp/npm-cache &&     chmod -R 777 /tmp/npm-cache &&     npm config --global set cache /tmp/npm-cache
 ---> Using cache
 ---> 48b07d6e121b
Step 7/10 : RUN mkdir /tmp/yarn-cache &&     chmod -R 777 /tmp/yarn-cache &&     yarn config set cache-folder /tmp/yarn-cache
 ---> Using cache
 ---> e7fb493e6cbf
Step 8/10 : RUN npm config --global set update-notifier false
 ---> Using cache
 ---> 14ca9de72f5c
Step 9/10 : RUN /sbin/useradd -u 1000 user && chmod 711 /
 ---> Using cache
 ---> f8a19e6e906a
Step 10/10 : CMD [ "esbuild" ]
 ---> Using cache
 ---> 8a631083fcfa
Successfully built 8a631083fcfa
Successfully tagged cdk-a5426968fe02b1d6442eb8d3c725ef43daef73457910be5c93f2e69dfa92f617:latest
Sending build context to Docker daemon  97.79kB
Step 1/10 : ARG IMAGE=public.ecr.aws/sam/build-nodejs12.x
Step 2/10 : FROM $IMAGE
 ---> 684c564ff873
Step 3/10 : RUN npm install --global [email protected]
 ---> Using cache
 ---> cf3b046b6964
Step 4/10 : ARG ESBUILD_VERSION=0
 ---> Using cache
 ---> f5a04d8f30ac
Step 5/10 : RUN npm install --global --unsafe-perm=true esbuild@$ESBUILD_VERSION
 ---> Using cache
 ---> eec866b5c600
Step 6/10 : RUN mkdir /tmp/npm-cache &&     chmod -R 777 /tmp/npm-cache &&     npm config --global set cache /tmp/npm-cache
 ---> Using cache
 ---> 48b07d6e121b
Step 7/10 : RUN mkdir /tmp/yarn-cache &&     chmod -R 777 /tmp/yarn-cache &&     yarn config set cache-folder /tmp/yarn-cache
 ---> Using cache
 ---> e7fb493e6cbf
Step 8/10 : RUN npm config --global set update-notifier false
 ---> Using cache
 ---> 14ca9de72f5c
Step 9/10 : RUN /sbin/useradd -u 1000 user && chmod 711 /
 ---> Using cache
 ---> f8a19e6e906a
Step 10/10 : CMD [ "esbuild" ]
 ---> Using cache
 ---> 8a631083fcfa
Successfully built 8a631083fcfa
Successfully tagged cdk-a5426968fe02b1d6442eb8d3c725ef43daef73457910be5c93f2e69dfa92f617:latest
Sending build context to Docker daemon  97.79kB
Step 1/10 : ARG IMAGE=public.ecr.aws/sam/build-nodejs12.x
Step 2/10 : FROM $IMAGE
 ---> 684c564ff873
Step 3/10 : RUN npm install --global [email protected]
 ---> Using cache
 ---> cf3b046b6964
Step 4/10 : ARG ESBUILD_VERSION=0
 ---> Using cache
 ---> f5a04d8f30ac
Step 5/10 : RUN npm install --global --unsafe-perm=true esbuild@$ESBUILD_VERSION
 ---> Using cache
 ---> eec866b5c600
Step 6/10 : RUN mkdir /tmp/npm-cache &&     chmod -R 777 /tmp/npm-cache &&     npm config --global set cache /tmp/npm-cache
 ---> Using cache
 ---> 48b07d6e121b
Step 7/10 : RUN mkdir /tmp/yarn-cache &&     chmod -R 777 /tmp/yarn-cache &&     yarn config set cache-folder /tmp/yarn-cache
 ---> Using cache
 ---> e7fb493e6cbf
Step 8/10 : RUN npm config --global set update-notifier false
 ---> Using cache
 ---> 14ca9de72f5c
Step 9/10 : RUN /sbin/useradd -u 1000 user && chmod 711 /
 ---> Using cache
 ---> f8a19e6e906a
Step 10/10 : CMD [ "esbuild" ]
 ---> Using cache
 ---> 8a631083fcfa
Successfully built 8a631083fcfa
Successfully tagged cdk-a5426968fe02b1d6442eb8d3c725ef43daef73457910be5c93f2e69dfa92f617:latest
Sending build context to Docker daemon  97.79kB
Step 1/10 : ARG IMAGE=public.ecr.aws/sam/build-nodejs12.x
Step 2/10 : FROM $IMAGE
 ---> 684c564ff873
Step 3/10 : RUN npm install --global [email protected]
 ---> Using cache
 ---> cf3b046b6964
Step 4/10 : ARG ESBUILD_VERSION=0
 ---> Using cache
 ---> f5a04d8f30ac
Step 5/10 : RUN npm install --global --unsafe-perm=true esbuild@$ESBUILD_VERSION
 ---> Using cache
 ---> eec866b5c600
Step 6/10 : RUN mkdir /tmp/npm-cache &&     chmod -R 777 /tmp/npm-cache &&     npm config --global set cache /tmp/npm-cache
 ---> Using cache
 ---> 48b07d6e121b
Step 7/10 : RUN mkdir /tmp/yarn-cache &&     chmod -R 777 /tmp/yarn-cache &&     yarn config set cache-folder /tmp/yarn-cache
 ---> Using cache
 ---> e7fb493e6cbf
Step 8/10 : RUN npm config --global set update-notifier false
 ---> Using cache
 ---> 14ca9de72f5c
Step 9/10 : RUN /sbin/useradd -u 1000 user && chmod 711 /
 ---> Using cache
 ---> f8a19e6e906a
Step 10/10 : CMD [ "esbuild" ]
 ---> Using cache
 ---> 8a631083fcfa
Successfully built 8a631083fcfa
Successfully tagged cdk-a5426968fe02b1d6442eb8d3c725ef43daef73457910be5c93f2e69dfa92f617:latest
Sending build context to Docker daemon  97.79kB
Step 1/10 : ARG IMAGE=public.ecr.aws/sam/build-nodejs12.x
Step 2/10 : FROM $IMAGE
 ---> 684c564ff873
Step 3/10 : RUN npm install --global [email protected]
 ---> Using cache
 ---> cf3b046b6964
Step 4/10 : ARG ESBUILD_VERSION=0
 ---> Using cache
 ---> f5a04d8f30ac
Step 5/10 : RUN npm install --global --unsafe-perm=true esbuild@$ESBUILD_VERSION
 ---> Using cache
 ---> eec866b5c600
Step 6/10 : RUN mkdir /tmp/npm-cache &&     chmod -R 777 /tmp/npm-cache &&     npm config --global set cache /tmp/npm-cache
 ---> Using cache
 ---> 48b07d6e121b
Step 7/10 : RUN mkdir /tmp/yarn-cache &&     chmod -R 777 /tmp/yarn-cache &&     yarn config set cache-folder /tmp/yarn-cache
 ---> Using cache
 ---> e7fb493e6cbf
Step 8/10 : RUN npm config --global set update-notifier false
 ---> Using cache
 ---> 14ca9de72f5c
Step 9/10 : RUN /sbin/useradd -u 1000 user && chmod 711 /
 ---> Using cache
 ---> f8a19e6e906a
Step 10/10 : CMD [ "esbuild" ]
 ---> Using cache
 ---> 8a631083fcfa
Successfully built 8a631083fcfa
Successfully tagged cdk-a5426968fe02b1d6442eb8d3c725ef43daef73457910be5c93f2e69dfa92f617:latest
/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@aws-cdk/core/lib/asset-staging.js:52
            throw new Error(`Cannot find asset at ${this.sourcePath}`);
            ^

Error: Cannot find asset at /home/ikehakinyemi/Projects/NodeJS/aws-sam-typescript-layers-example-master/dist
    at new AssetStaging (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@aws-cdk/core/lib/asset-staging.js:52:19)
    at new Asset (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@aws-cdk/aws-s3-assets/lib/asset.js:28:25)
    at Object.bind (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@aws-cdk/aws-s3-deployment/lib/source.js:54:31)
    at /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@aws-cdk/aws-s3-deployment/lib/bucket-deployment.js:46:62
    at Array.map (<anonymous>)
    at new BucketDeployment (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@aws-cdk/aws-s3-deployment/lib/bucket-deployment.js:46:39)
    at new ServerlessUI (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/construct/dist/index.js:173:9)
    at new ServerlessUIStack (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js:45:9)
    at Object.<anonymous> (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
Subprocess exited with error 1
/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/gluegun/build/index.js:13
    throw up;
    ^

Error: Command failed: npx cdk bootstrap   -c apiEntries="src/handlers/get-all-items.ts,src/handlers/get-by-id.ts,src/handlers/put-item.ts,src/handlers/write-item.ts,src/utils/dynamodb.ts,src/utils/sqs.ts" -c uiEntry="./dist" -a "node /home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/node_modules/@serverlessui/serverless-app/dist/index.js"
    at checkExecSyncError (child_process.js:640:11)
    at Object.execSync (child_process.js:676:15)
    at Command.run (/home/ikehakinyemi/.nvm/versions/node/v14.17.0/lib/node_modules/@serverlessui/cli/dist/cli.js:81:34) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 27567,
  stdout: null,
  stderr: null
}

This is the current challenge I'm facing while trying to host serverless functions located in the /src folder.

What's currently trying to debug the error, but thought to seek your assistance?

Thank you.

[JakePartusch]

Hi @IkehAkinyemi,

This error makes it seem like the UI isn't built (no dist folder):
Error: Cannot find asset at /home/ikehakinyemi/Projects/NodeJS/aws-sam-typescript-layers-example-master/dist

[IkehAkinyemi]

Hello Jake,

I have successfully built a simple serverless application with a serverless function for the backend and deployed it using Serverless UI.

But I have few observations I need to clarify.

Two links were provided in my terminal after deploying the application with the command sui deploy --dir="dist" -functions="serverless".

One of the links points to the application link(frontend), while the other link points to an API to invoke the function.

But while these two sections of the application have been deployed, and no changes I make on my local IDE would be updated on the hosted platform automatically, how do you include the API link earlier before application (frontend) deployment? Or How do I update the live website(frontend) already deployed?

For example, I deployed with the command sui deploy --dir="dist" -functions="serverless" for the first time, and it provided me with the output containing the links:

✅  ServerlessUIAppPreview856cbe67

Outputs:
ServerlessUIAppPreview856cbe67.ServerlessUIBaseUrlCA2DC891 = https://d3rpilj0pyo55u.cloudfront.net
ServerlessUIAppPreview856cbe67.ServerlessUIFunctionPathjokesD9F032B9 = https://d3rpilj0pyo55u.cloudfront.net/api/jokes

Stack ARN:
arn:aws:cloudformation:us-west-2:261955174750:stack/ServerlessUIAppPreview856cbe67/754d81c0-f4af-11eb-b55d-0abebd90ee6d

When I viewed the application(frontend), it wasn't working because of a 403 error. The application isn't working because there's no initial API link provided before the deployment. So I have to redeploy it again, this time including the API link, https://d3rpilj0pyo55u.cloudfront.net/api/jokes provided from the first deployment. After the second deployment, a totally different output of link was provided:

✅  ServerlessUIAppPreview9e059224

Outputs:
ServerlessUIAppPreview9e059224.ServerlessUIBaseUrlCA2DC891 = https://d3dfncj343mx9u.cloudfront.net
ServerlessUIAppPreview9e059224.ServerlessUIFunctionPathjokesD9F032B9 = https://d3dfncj343mx9u.cloudfront.net/api/jokes

Stack ARN:
arn:aws:cloudformation:us-west-2:261955174750:stack/ServerlessUIAppPreview9e059224/884552e0-f4b3-11eb-aecc-0214dca21593

Now, for the application to work, I need to deploy twice, the first deploy to provide me with the API link, then include it in my frontend application, then redeploy again the second time, to provide me with another link to a working application that's making the right fetch calls to the serverless function through the API and returns a status of 200.

I want to be certain if this is the normal outcome or process I would pass through before having my application work properly; making API calls to the backend and returning the response.

[JakePartusch]

Hi @IkehAkinyemi - by default, this library will create a new stack for preview deploys, which means each URL will be unique. In order to deploy to the same URL multiple times, the --prod flag needs to be passed (note: this requires a custom domain to be configured).

Even so, you should be able to reference your API URL by relative path in your UI (eg. /api/jokes) instead of the full URL. This should always work — even with CORS — since the UI and API are on the same domain. That way, each of the preview deploys will work without having to do multiple deploys.