Vue js with GitHub Actions

Quick Summary

This article covers the implementation of Vue.js to work with GitHub activities. We will walk you through the process of utilizing GitHub Actions to automate the deployment of your Vue.js application on GitHub Pages. Furthermore, we can gain significant knowledge about how to configure processes, integrate version control with Git, and adjust Vue.js according to necessity.

GitHub was initially created for coders to share and exhibit their expertise. However, deployment activities must be automated, where GitHub Actions become controversial. This tutorial will guide you through using GitHub Pages to deploy your Vue.js application with the help of GitHub Actions. To optimize your deployment workflow, ensure that every step is followed to the letter. Let’s continue using GitHub activities to explore the Vue.js instructional guide and ensure our project succeeds.

What are GitHub actions?

Over 100 million active users currently utilize the cloud-based repository GitHub. In 2018, GitHub released “GitHub Actions” to streamline development projects, empowering developers with automation capabilities. This tool automates and simplifies the development workflow, offering seamless integration with Vue Developer Tools.

GitHub Actions encompass automated processes that enable hosting, testing, and software release. Its integration with push and task automation significantly enhances the software development process. In essence, GitHub actions serve as a means to navigate the commands within your Git repository, automating development tasks and facilitating cause-and-effect analysis through an application programming interface (API).

With GitHub actions, you may also automate workflow based on specific events, including push, creation actions, new releases, problems, and other comparable occurrences. As a result, the software you have developed can be altered, distributed, or reused.

Before you start creating your workflow, you must have a fundamental understanding of the elements that comprise GitHub activities.

• An event is an action that initiates the workflow and starts the automated pipeline rolling toward pushing or pulling requests.
• Any event can start a workflow, demonstrating that automated procedures are used when the software is prepared for release.
• When the process is launched, it is the server’s responsibility to carry it out. Each workflow launches a new virtual machine, and all runners can operate concurrently.
• A custom program performs complex but frequently repetitive tasks. It is used to set up the setting and reduce repetitive effort.
• Jobs consist of sequential actions that depend on each other to share data in a predefined order. To package the builds as the default, it will start a second job if it is not dependent on any other jobs.
• GitHub Pages is an example of a static hosting server that allows users to host and publish websites developed from GitHub projects. Another possibility is to use GitHub pages to showcase open-source projects and share code.
• Human data is serialized using Another Markup Language, or YAML for short. This is accomplished by describing the workflow in GitHub actions. Every workflow is saved as a unique YAML syntax file in your code repository. The directory could have any name, such as GitHub/workflows.

Steps to Automate Vue js Deployment

Evan Vue.js was first created by you, and over 250 community members continue to maintain and upgrade it regularly. With an easy core library that concentrates just on the view layer and an ecosystem of accompanying libraries that help you tackle the difficulty of creating larger single-page applications, it is a very advanced framework for creating user interfaces. It is a structure for creating user interfaces.

In this tutorial, you will discover a straightforward method for creating Vue applications and discover how to publish Vue applications using GitHub Pages.

Before we start

It is not assumed that readers of this page are experts in the fundamental concepts and steps required in installing Vue.js, as it is written for front-end developers using the framework at any level. There are a few prerequisites that you need to have in place before using Vue CLI 3 through this tutorial.

Installing Node.js 9.x or later is the first and essential requirement. You may find out if you already do things or not by typing the following command into your terminal.

-v for the node

Moreover, the following will be needed:

• Setting up npm >= v6.7
• Code editor one — I highly recommend that you use Visual Studio Code. General knowledge on using the most recent version of Git Vue installed on your computer globally
• On your workstation, Vue CLI ≥ version 3.0 is installed.

To install the most recent Vue CLI version, use the following command:

“npm uninstall -g vue-cli” is the command.

Next, the replacement ought to be installed:

“Installing using npm -g @vue/cli”

Other choices consist of the following:

• Download Vue Start here to get a project.
• The project you downloaded should be unzipped.
• Go to the unzipped file and run the following command to make sure all of the dependencies are always current:
• Using npm to install

GitHub Pages:

GitHub Pages is a static site hosting solution that allows you to launch your static applications straight from their GitHub repository. You can create GitHub Pages for yourself as a user, allowing you to deploy to yourGitHubUsername.github.io. Portfolios and other personal branding materials are the primary uses for these pages.

You must create a new repository on GitHub and give it the name that follows:

On the GitHub website, your username.

The HTML in the project root will be used by the repository to create a GitHub Page for you automatically once you’ve saved it. For every repository you have on GitHub, whether it is brand-new or already existing, you can also make GitHub Pages.

This tutorial will show you how to create a project with Vue.js and then publish it to GitHub Pages.

Configuring the Vue project

Utilizing the Vue graphical user interface, create a new project. If you followed this tutorial from the start and already have a Vue canvas, you still have the option to start a new project to get experience with the graphical user interface (GUI).

Once you have browsed to your chosen location on your computer, open your terminal. Run the following command:

“Vue Ui”

You will be able to create and manage a Vue project on a remote server that is accessible through your usual browser. 

As soon as you select the desired location and click the Create button, the new project will begin to be set up. You must provide the name of your project on the first information page, leaving all other fields empty. But you’ll have to disable the Git initialization.

Press the enter key after choosing the default preset, which contains both Babel and ESLint, when you are on the preset screen. It will take some time to complete this task, and you might get an error warning if you are not running the command as an administrator on your computer. If everything goes according to plan, you should receive a notification that the task has been completed.

The newly created project can then be selected by clicking the Home button in the lower-left corner of the screen, and it can then be imported onto the remote server. Now that our application development is complete, we can run the following commands to see it in a development environment:

“Npm run serve”

You must click on the graphical user interface (GUI), choose Tasks, and then serve the task to achieve this.

After we’ve finished building the Vue application prototype, click the Open app button to view the Vue application at localhost.

Make a GitHub profile:

Establishing a GitHub repository for the new project is the first task that has to be completed. Under typical conditions, this would have been produced for us during the scaffolding step, but we turned it off.

You must go to your GitHub account and create a new repository as the first step. Next, you must launch a fresh Visual Studio Code terminal and set it up for Git by running the following command:

Run the command https://github.com/yourusername/github project name git init git remote add origin. Git adds origin via remote

You should replace the keywords with your project credentials. So let’s leverage Visual Studio Code, which streamlines the stages, commits, and pushes of changes inside the program. To commit your changes, go to Visual Studio Code’s far left side and select the Source Control option. Once that is done, you may click the Download button, which is next to the Visual Studio Code application’s footer.

Deploying a Node.js script for GitHub Pages deployment

The first thing you must do is create a file named vue.config.js in the Vue project root directory. Then, copy and paste the following text into that file:

The module. exports variable’s public path is set to ‘/project name/’.

Commit the changes at this point and push them to the origin’s master branch. We will be utilizing a Node.js script that Roland Doda wrote. This script is based on the exact package and has automatic deployment. This script will be employed during our deployment.

Create a Scripts folder in your application’s root folder, and then generate a gh-pages-deploy.js file inside of it.

The commands can automate the whole process of:

• Adding a GitHub Pages-specific branch to your repository
• Creating a Vue application that is suitable for production use
• While the changes to the built-in dist file are being committed and pushed to Pages

The GitHub Pages branch will be erased and removed from the repository following the selection and deployment of the build. This enables you to rerun the command without problems after making new changes.

To include the exact configuration in your development dependencies.

• “Using npm to install”

We are ready to take action. The only command you need to run to start your Vue application using GitHub Pages is this one:

• “Use npm to deploy”

This gives you a unique link and opens up your Vue application to the entire community. Open the project you wish to edit in GitHub, then choose Settings.

Our successfully launched website is available on GitHub.

Your Vue app is now usable!

Conclusion

Using the Vue UI tool, our Vue.js Development Company developed a Vue application that we hosted on GitHub Pages, a process that we detailed in this post. We accomplished this by leveraging an execa Node.js script to automate the majority of the procedure. We trust that this information proves beneficial for your Vue.js projects! Until next time, stay safe and keep experimenting!