DEV Community

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

Posted on

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

Top comments (0)