How to add a custom build step when using now/vercel?

[ajhool]

Current stack

• Now.sh/vercel for automatic deployments
• Gitlab (repo + CI)
• Next.js SSR
• React
• Typescript
• AWS Amplify CLI

Requirement

• AWS Amplify CLI is used to manage the AWS backend in multiple environments (env, staging, feature-branch, prod, etc.)
• When deploying my website with now, we need to do two different things:
  • Call amplify env pull --env $ENV_NAME --appId some-app-id
  • Call amplify push to deploy any infrastructure changes. amplify push also does env specific code generation. This config file is used in the website and must be available before or created during next build. This config file is in .gitignore must be generated from code, it can't be pushed to repos
  • Execute now to deploy the website.

It's unclear where these steps can be added. First, now is pulling the code immediately after I push it. I don't see how next build can execute these steps and it is unclear to me where whether these steps should be placed into now config, next config, yarn scripts, gitlab CI, etc.

Any help or documentation would be really helpful in working through this.

[willemliufdmg]

It seems these are release steps which are separate from the build of your app. I would say the steps need to be run in Gitlab CI.

[ajhool]

@willemliufdmg Does the "now" command do the exact same thing as the automatic build/deployment that Vercel is currently doing when I push the code?

[willemliu]

Don't really know if its the same. But you could deploy using now in a Gitlab CI runner. We are doing that with at our company. Although it's not as straightforward because you need to handle the command-line prompts and pass it the project-id and organization-id. Another drawback is the limit of now-cli deployments set by Vercel.

[ajhool]

The main step that needs to occur for the client-side webapp is to do codegen for the amplify config file (`aws-exports.js`). Currently, when I push to github, `vercel.com` automatically takes my code and deploys it using convenient branch-based urls. Is there a way to add a "hook" somewhere else that would allow me to generate `aws-exports.js` and then let vercel do the deployment? If that is not currently possible then I'd like to strongly request that feature. These are the exact steps that we currently have and what we are hoping for: **Current flow**: 1. Write code in a branch: some-feature. 2. Generate code on my local computer (aws-exports.js) and manually select the `some-feature` aws environment 3. Push code to `some-feature` git branch and DO NOT include aws-exports in .gitignore. DO include aws-exports.js in the pushed code. 5. Vercel automatically deploys the code to `some-feature` url. 6. When satisfied with the feature, change the aws environment on my local computer and generate `aws-exports.js` in the prod environment 7. Push that code to master. (I can't merge the feature branch). 8. Vercel automatically deploys the code to `some-feature` url. **Desired flow**: 1. Write code in a branch: some-feature. 2. Push code to `some-feature` github branch and DO ignore `aws-exports` in .gitignore. DO NOT include `aws-exports.js` in the pushed code. 3. (the hook) My CI platform generates `aws-exports` for the `some-feature` env 4. Vercel automatically deploys the code to `some-feature` url. 5. Merge the feature branch into master 6. (the hook) My CI platform generates `aws-exports` for the `prod` env 7. Vercel automatically deploys the code to `prod` url.

…

On Wed, Apr 29, 2020 at 5:24 PM Willem Liu ***@***.***> wrote: It seems these are release steps which are separate from the build of your app. I would say the steps need to be run in Gitlab CI. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4199 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACSNE73TDP6FHF2SR5MVXRLRPCLIRANCNFSM4MUBPT3A> .

[rigobcastro]

What do you think about the run some bash file with headless configuration? https://docs.amplify.aws/cli/usage/headless#--providers-1

[ajhool]

Good find. The bash file in headless configuration is what I would use on
the amplify side, but I'm not sure how to replicate Vercel's autodeployment
based on branching. Maybe I'm overestimating how much it is doing, but the
bash script would presumably need to build some config file for Vercel
based on the branch and then do the deployment using the now command, I
think.

[413n]

I created a script that does the job (even if it needs a manual step): https://gist.github.com/afnar/ea348c3563851ffd3a2a04ef63be13d5

[OskarD]

I created a script that does the job (even if it needs a manual step): https://gist.github.com/afnar/ea348c3563851ffd3a2a04ef63be13d5

Looks like it's deleted, any chance you could post it again? <3

[413n]

@OskarD I changed username sry ahah https://gist.github.com/413n/ea348c3563851ffd3a2a04ef63be13d5

[b-bot]

has anyone figured this out? considering using amplify for the frontend as well as it doesn't seem there is a way to do this.
i'm going to try using github actions in tandem with vercel in the coming days, hopefully that will work and not conflict.

[413n]

Did you found a solution? Also maybe with GitHub Actions?