Versel is a cloud platform or platform designed to help front and developers to create, preview and deploy web applications faster and efficiently. In this tutorial, we next to the Vercel using Gut Hub Actions. Will focus on deploying the JS application.
In the previous article, we created a next dot JS Portfolio Blog. Here, you will learn how to be deployed to the Versal with the actions of the Gut Hub.
Provisions
Being able to deploy your project, you should have a gut hub of the project (if you already have a dot SS project, you can still follow it), and Versal Account. This gut hub is a repository with whom we will work. You can clone to follow it.
How to deploy your next app
Make Varsal tokens and add it to your secrets in Gut Hub
In your Versal account, go to the settings, then go to the token.
Make the token section, enter a name for your token, select the expiry date and click “Create”.
You should see a message of success with your token. Next, go to your gut hub repository, and click on the “Settings” tab.
In the settings tab, go to the secrets and variables on the sidebar, then click on the operations.
You will see a section to add secrets. Add a secret to which name is VERCEL_TOKENAnd paste the token there.
Versal token is a token used to verify the gut hub runner. Versel CLI installed on Gut Hub Runner is going to process commands with your account. Therefore, instead of logging in, it uses access to the token to confirm that it is in fact the option of taking action by you.
Organization ID is used to tell Versel to tell which organization or team account should be formed under which the project should be formed.
The project then describes the ID Versal as a specific project that you want to deploy. Like the Organization ID, it is a unique identity.
Warsal CLI and Login Install
Use a command below to install Varsel CLI globally on your computer:
npm install -g vercel
Again Login to CLI With the following order:
vercel login
Use an option to log in.
I used the gut hub. Select one with your arrow keys, and click on the Inter.
Create a Versal Project from your Local Directory
If you are not already in it, go to your project directory. If you have already created a project on the versal through a web interface, use Warsal link Order your existing directory to the Versal Project. If you do not already have a Versal Project, just type vercel Follow the indications of setting up the project in the CLI and the project.
With this, the Varsel will create a .vercel Folder in the project. Open it, and go to it project.json File
In the file, you should view your project ID and organization ID. Copy them and make secrets in your gut hub repository for everyone.
Create your Gut Hubwork Flow File
Make, in the root of your project folder, .github/workflow Folder then make a workflow file that says vercel_deploy.yml.
In the file, write it:
name: Vercel Production Deployment
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches:
- main
paths:
- '01-simple-blog/**'
jobs:
Deploy-Production:
runs-on: ubuntu-latest
defaults:
run:
working-directory: 01-simple-blog
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
continue-on-error: true
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
This is a workflow file for me Simple Writer Portfolio Project
First, we have environmental variables:
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
Then we have a trigger. When I push the central branch, it is dynamic, which affects the files 01-simple-blog All directory.
on:
push:
branches:
- main
paths:
- '01-simple-blog/**'
Then we have the definition of job. Here, I praised a job “deployment .No” which runs on Ubuntu. As default, will run all the orders there 01-simple-blog Directory, which is synonymous with running cd 01-simple-blog From the root before running the command on the shell. I did this because the next dot JS project is in the same directory, where package.json Located.
jobs:
Deploy-Production:
runs-on: ubuntu-latest
defaults:
run:
working-directory: 01-simple-blog
Then the steps included in:
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
continue-on-error: true
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
With these steps, Versel is first installed on the Gut Hub Runner. Then the Vercel environment information is drawn. Made with the project vercel buildAnd then the pre -built sample is pushed towards the versal.
Press the Gut Hub and see your code deployment
Make your changes a step, if any:
git add .
Compete the changes:
git commit -m "Added GitHub Actions workflow"
And push:
git push origin
Now, go to your storage online, and check the deployment.
Conclusion
In place of your primary gut hubwork flu, you can now make changes to your code, press the gut hub, and automatically deploy it. Although Versal allows you to connect your reservoir directly, this method provides you with more flexibility and customization. If you enjoy this article, share it with others. You can also reach me Linked Or X.