How to deploy Vue.js applications to OpenShift

January 16, 2024
Yashwanth Maheshwaram
Related topics:
KubernetesRuntimes
Related products:
Red Hat OpenShift

Red Hat OpenShift is a unified platform to build, modernize, and deploy applications at scale. Red Hat OpenShift offers a great developer experience in shipping your applications to the cloud.

JavaScript (JS) is the most popular programming language, used by millions of developers around the world. While it’s one programming language, there are many popular frameworks within JavaScript that need different approaches.

In this series of articles, we are putting together a step-by-step guide that will enable you to be up and running JS applications on OpenShift. We expect you to have some familiarity with Vue.js and Red Hat OpenShift. Just in case you need a quick recap, check out these resources:

How to deploy a Vue.js application on OpenShift

The Developer Sandbox for Red Hat OpenShift is a free-to-use OpenShift instance for you to experiment with OpenShift for your use cases. The development of dynamic and responsive web applications has evolved into a fundamental requirement. Node.js and Vue.js stand out as formidable technologies capable of crafting these applications with finesse. Our workflow involves the creation and deployment of applications directly from GitHub onto an OpenShift sandbox environment.

Follow these steps to start your sandbox instance and deploy your Vue.js app:

  1. Create a Developer Sandbox account at https://developers.redhat.com/developer-sandbox.
  2. Once you have the account and are signed in, On the left side menu, click +Add.
  3. Select Import from Git.
  4. Specify your Git repo URL. For the sake of this tutorial, we use https://github.com/redhat-developer-demos/vue.js-openshift-example, but you can choose any Vue.js repo.
  5. Add a Containerfile to your repo. The Containerfile helps developers to specify the environment needed for running your applications. If you do not have a Containerfile on your project, you can add add one to your repo by referring to https://github.com/redhat-developer-demos/vue.js-openshift-example/blob/main/Containerfile.
  6. OpenShift will detect the Containerfile from the Git repository. If the Containerfile is in a subdirectory, you need to provide the path of Containerfile. 

Info alert: Note

If the Containerfile/Dockerfile is not detected, click Import Edit Strategy. Select as Dockerfile, define the path as Containerfile.

  1. Choose a  Resource Type field, choose either Deployment or Serverless Deployment (default option) depending on your preference.
  2. Select Target Port under Advanced options to define the port 8080 that will receive the container's traffic.
  3. Click Create.
  4. You will now be directed to the Topology view, and the application will commence deployment. Please allow some time for the build and deployment process to complete. While it is in progress, you will have the opportunity to monitor the logs.
  5. Once it’s done deploying, you can click on the ↗ OpenURL icon to see the webpage of your Vue.js application running on OpenShift.

Add continuous deployment

Continuous deployment (CD) is a strategy in software development where code changes to an application are released automatically into the production environment. It speeds up time to market by eliminating the lag between coding and customer value. OpenShift enables developers to configure this using a few simple UI-based steps.

Now, let’s begin adding CD to the application we just created:

  1. From the Topology view, select the application.
  2. Click on the Actions drop-down.
  3. Select Edit <application name>.
  4. Check the Add pipeline checkbox. You can see the pipeline visualization if you’d like to understand the steps.
  5. Click Save.

Trigger the CD pipeline

A pipeline of applications is triggered when an application in the Git repository is updated:

  1. Create your application and add the remote Git repository (or copy the above repository).
  2. Modify, commit, and push the source files.
  3. Log in to the Developer Sandbox.
  4. Access your application in the Topology View.
  5. Select Pipeline option from the left menu.
  6. Checkout live build and deploy process.
  7. You can see your changes being deployed automatically.

Conclusion

In this tutorial, you learned how to deploy a Vue.js application on Red Hat OpenShift. Red Hat OpenShift has powerful features that make it easy to manage and scale your Vue.js application in production. To learn more, explore the resources on our OpenShift product page.

Check out the other articles in this series:

Last updated: January 30, 2024