Skip to main content

Vue

Vue is a popular JavaScript framework for building user interfaces and single-page applications. It is known for its simplicity and flexibility, making it a great choice for developers who want to build modern web applications. .

tip

Get started in no time with the Vue template.

Deployment

Learn how to deploy an existing Vue app using Genezio, a serverless deployment platform that simplifies app management and reduces costs.

Prerequisites​

1. Install genezio​

Use your preferred package manager to install Genezio:

npm install genezio -g

2. Start from an existing vue template​

Create a Vue.js app using the following steps:

Create a Vue.js App

1. Fork our vue template repository on GitHub

Go to https://github.com/Genez-io/vue-getting-started/fork and fork the repo.

2. Clone the newly created repository locally 

git clone YOUR_REPO_URL
cd vue-getting-started

3. Run the Vue App locally

Run the following command to start the Vue app locally:

npm run dev

4. Test the Vue App locally

Open a web browser and navigate to http://localhost:5173/ to see the app running.

Create the Genezio Configuration File​

Now, create a genezio.yaml file in the root directory of your project.

This file will contain the configuration needed to deploy your backend using Genezio. Here is an example configuration.

info
  1. This example configuration works if genezio.yaml is in the same directory as your main application file.
  2. You might need to replace the publish directory value if it is different in your project.
genezio.yaml
# Learn more about Genezio YAML at https://genezio.com/docs/project-structure/genezio-configuration-file/
# The name of the project.
name: vue-getting-started
# The region where the project is deployed.
region: us-east-1
# The version of the Genezio YAML configuration to parse.
yamlVersion: 2
# Information about the frontend, including the path, language, and publish directory.
# It is optional. It can also be an array if there are multiple frontends you want to deploy.
frontend:
  # The folder where the frontend scripts will run.
  path: .
  # The directory that will be published to the CDN. It is relative to the `path` directory.
  publish: dist
  # Scripts are running in the specified `path` directory.
  scripts:
    # List of scripts to run before deploying the frontend.
    deploy: npm install
    # List of scripts that build your frontend before deployment. It should populate the specified `publish` directory.
    build: npm run build
    # List of scripts to run when starting the local development server.
    start:
      - npm install --silent
      - npm run dev --silent

This configuration file specifies the project name, deployment region, and details about the frontend.

Deploy the app​

In your terminal run the following command to deploy your app to the Genezio cloud:

genezio deploy

You should now see 2 URLs in the terminal window with the following format:

$ App Dashboard URL: https://app.genez.io/project/<project-id>/<stage-id>
$ Frontend URL: https://<subdomain>.app.genez.io

Next Steps​

After setting up the template, here are some recommended next steps:

Support ​

We invite you to join our community on Discord for further information and help.

Happy Learning!