DEV Community

Cover image for Platform.sh VueJS Template &  Gridsome Template
Ismael Garcia
Ismael Garcia

Posted on

3 2

Platform.sh VueJS Template & Gridsome Template

VueJS template YAML files for platform.sh.

You're looking to deploy your VueJS application to platform.sh
But can't find a good template that you can use with VueJS or Gridsome ?

I was looking for a good template for my Gridsome application or just a good example of a VueJS application YAML files for platform.sh.

The documentation has a couple good templates for other frameworks but a specific one for VueJS is missing.

The project that use is the fallowing:

GitHub: Mendoza Roofing

Live site:
Mendoza roofing Wilmington NC ⇐ The hosting provider currently is Netlify.

Configuration files start here

For the .platform.app.yaml:

# .platform.app.yaml

# The name of this application, which must be unique within a project.
name: "vuejs"

# The type key specifies the language and version for your application.
type: "nodejs:14"

build:
  flavor: none

# Build dependencies.
dependencies:
  nodejs:
    "@gridsome/cli": "*"

# The hooks that will be triggered when the package is deployed.
hooks:
  # Build hooks can modify the application files on disk but not access any services like databases.
  build: |
    npm i
    gridsome build
# The size of the persistent disk of the application (in MB).
disk: 5120

# The configuration of the application when it is exposed to the web.
web:
  locations:
    "/":
      # The public directory of the application relative to its root.
      root: "dist" #The build directory if you have a custom output directory then you should change it
      index: ["index.html"]
      scripts: false
      allow: true

Enter fullscreen mode Exit fullscreen mode

Side note: The other files that we need will be located at the .platform folder in the root of the project.

For the router.yaml :

# Each route describes how an incoming URL is going to be processed by Platform.sh.
"https://www.{default}/":
  type: upstream
  upstream: "vuejs:http"
#Remember the the name in the .platform.app.yaml  should be the same for the name before the :http

"https://{default}/":
  type: redirect
  to: "https://www.{default}/"

Enter fullscreen mode Exit fullscreen mode

For the services.yaml:

This is an empty file, because I don't use a database or any service.

Platform.sh deployed site link:

platform-deployed-site

view raw socials.md hosted with ❤ by GitHub

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay