vercel-action VS typescript-action

Vercel CLI - Link

The initial step involves creating a Vercel account, installing the CLI, and authenticating through the CLI.

I signed up for the Vercel service at the Hobby plan, did my first project and installed the Vercel CLI.

I had already an account on Vercel and the vercel-cli installed.

Once we've verified everything is working properly, the next step is getting our Puppeteer + NextJS application onto Vercel. There's two ways of doing this: either the Vercel CLI or via Github. For now we'll use GitHub as a deployment method. You'll want to create a new app on Vercel by clicking "Create a New Project":

Having Nodejs and Vercel CLI installed on your machine.

Images are generated by a React component and is embedded within an SVG. You can run the project locally using the Vercel CLI by running the following command in your terminal:

Not sure why Vercel CLI 28.9.0 has no way to import whole .env file or all environment variables in one project or environment. Write a simple bash script to achieve it:

Now, I want the API route to be picked up by Vercel. By default the Astro build command will not pick up these API routes in the root directory (since they are part of the (vercel build command)[https://github.com/withastro/astro/issues/5451#issuecomment-1339720682]). So to get this working in my use case, I switched to using the (Vercel CLI)[https://vercel.com/docs/cli] to build and deploy my project. After installing the cli globally with npm i -g vercel, I can run vercel build to build my project locally, and run vercel deploy --prebuilt afterwards to deploy the locally created build directly to Vercel. I also opted to disable the automatic deployments on pushes to my git repository, since I'm doing the deployments through the CLI now. Disabling the automatic deployments was done by adding a vercel.json file in the root directory, containing the following:

We have also been trying to use Github actions and have been using THIS for the Vercel deployment and this is causing even more strange behaviors:

While learning about GitHub Actions, I came across the GitHub Actions Org, and they have a bunch of templates for building custom GitHub actions. So, I started searching for a template that has TypeScript support, ensuring type safety to write bug-free code. I found the typescript-action template that includes support for tests, linter, versioning, and more.

This is the template I used for my TypeScript action https://github.com/actions/typescript-action

I found the GitHub actions documentation easier to read than Azure, so I would recommend starting writing and testing your extensions on GitHub by using the official template actions/typescript-action. The mentioned template provides a good starting point; I won't repeat the steps here. Play with it, write some simple stuff, and then return here for the next steps.

GitHub maintain a set of repos called actions. One of which is called cache.

To get started quickly with a JavaScript action, I recommend using the official templates from GitHub for JavaScript and TypeScript.

On the TypeScript side, setup was much easier. There was already a template from GitHub that took care of the basics. Most of the time spent here was updating dependencies and getting my editor to play nicely with it—18 minutes, about 10% of the total.

Now that you know how to create your own GitHub Actions, why not give it a try? Head to the GitHub Marketplace and start exploring the existing Actions, or create your own and share it with the community. With GitHub Actions, the possibilities are endless, so start building and see what you can accomplish

Your build most likely fails because your tests fail. Most CI pipelines today, like Jenkins, Circleci, GitLab, TeamCity, Bamboo, and GitHub Actions, are configured to automatically cause the build process to fail when tests fail.