How to make a Vue.js single page application (SPA) on Platform.sh

Permanently deleted user

March 13, 2019 09:47

Goal

This guide shows how to deploy a Vue.js application on Platform.sh, using Vue CLI 3.

To go through this guide, you will need:

An empty Platform.sh project (you can click here to start your free trial)
Your SSH key loaded in your SSH agent and configured in the Platform.sh dashboard
The Platform.sh CLI installed.
The Vue CLI installed.

Create a new Vue.js project with Vue CLI (ignore this step if you want to deploy an existing Vue.js application on Platform.sh):

vue create vuejs-platformsh
cd vuejs-platformsh

Set the platform Git remote:

platform project:set-remote <project id>

vue add platformsh

This plugin will add the Platform.sh configuration files to your project and extract the Platform.sh environment variables.

Commit and push your code to deploy your application:

git add --all
git commit -m "Vue.js on Platform.sh."
git push platform master

platform url

This opens a browser tab with your Vue.js application running.

The plugin will automatically extract the Platform.sh environment variables.

To fetch those, you simply need to import the following package:

import platformshVar from 'platformsh_variables'

Using the Vue CLI, it’s very easy to setup and deploy a new or an existing Vue.js application on Platform.sh.

3 comments

modermo
April 20, 2020 21:46

What about proper redirecting when Vue Router is in ‘history’ mode? I know that Platform has their own way of doing redirects, wondering whether I need to touch the routes.yaml file.

0
Yann Deshayes
April 22, 2020 14:29
@modermo I think what you want is to add passthru option to the web location YAML object.

That option will for all the routes to be passed to the index.html, and you can handle that route in your app.

For example:
```
name: app
type: nodejs:12
# The configuration of app when it is exposed to the web.
web:
  locations:
    "/":
      root: "dist"
      index:
        - "index.html"
      passthru: /index.html
```
Yann
0
modermo
April 22, 2020 23:58

@ yann-deshayes That works. Thanks for that.

I would consider including this in the above documentation, as getting History mode for a Vue SPA working on different server environments is a common but somewhat tricky endeavour.

0

Please sign in to leave a comment.