Serve a Vue.js application from a Simplicité instance

Tips and tricks
1

The following example will explain how to serve a Vue.js application on the “/” endpoint of your instance.
It also provides a method to properly redirect URL paths in the event of a vue-router based application.

1. Pre-requisites

  • An up to date Simplicité instance (5.2.18 or later)
  • A clone of the vue-demo repository
  • Run npm run build to generate the dist repository
  • Run npm run zip to zip the content of the dist repository

2. Create an External Object

Create an External Object MyExternalObject and add a Resource with the following features :

  • Type : File set
  • Code : SITE
  • File : zip file of the dist repository

Create a Read only function and grant it to the PUBLIC group.

3. ExternalObject’s code

Edit the code of the External Object like following:

public class MyExternalObject extends com.simplicite.webapp.web.StaticSiteExternalObject {
	private static final long serialVersionUID = 1L;
	private static final String NOT_FOUND = "index.html";

	@Override
	public Object notfound(Parameters params)
	{
		AppLog.info("Not found on: " + params.getBaseLocation(), getGrant());
		try {
			if (NOT_FOUND.equals(params.getURI())) // Avoid infinite loop
				throw new IOException();

			return displayFile(NOT_FOUND);
		} catch (IOException e) {
			AppLog.error(null, e, getGrant());
			return super.notfound(params);
		}
	}
}

4. URI Mapping

Edit the URI_MAPPINGS System parameter like so :

[
	{ "source": "^(.*)$", "destination": "/ext/MyExternalObject$1" }
]

5. Clear the cache

Your Vue.js application should be available on the / endpoint of your instance.

4 Likes