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

How-to Guides
, ,
#1

Goal

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

Assumptions

To go through this guide, you will need:

Steps

1. Create a Vue.js application

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>

Add the Platform.sh Vue plugin:

vue add platformsh

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

2. Deploy your application to Platform.sh

Commit and push your code to deploy your application:

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

3. Test your application on Platform.sh 

platform url

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

4. Fetch Platform.sh environment variables

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'

Conclusion

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

2 Likes
#2

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.

#3

@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

1 Like
#4

@ 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.