Example of 4d database to serve builded Vue.js website.

Vue.js is a JavaScript Framework to build website.

A vue is a combinaison of html template, javascript code and css. (ex: https://vuejs.org/images/vue-component.png)

• Documentation: https://vuejs.org/v2/guide/
• Vue.js Explained in 100 Seconds

First install vue-cli: https://cli.vuejs.org/guide/installation.html

Then create a vue project, for instance with "vue" name

vue create vue 

A vue folder will be created with all needed files: vues, node packages and a readme.

vue ui 

It is a really good alternative because it will help you to configure and to add additionnal tools and package such as vue-rooter

Rooter allow to execute code or display page according to the URL.

You can see change introduced by installing the vue-rooter in this pull request

This repository contains already a vue project. If you use it and just downloaded it, you must install javascript package using npm command

cd vue
npm install

A node_modules folder will be created

Go to your vue project folder and launch build

cd vue
npm run build

4D server use WebFolder directory as main web server directory, so when building your Vue.js website you must configure the output directory.

So you must create or edit the vue.config.js inside your website project to specify the "WebFolder" as output directory. (It's already done for this project)

Then any npm build will remove your WebFolder and replace it with the new builded website.

PS: alternatively, you can add extra step to copy builded files. The default path is dist

You could use Visual Studio Code with vue.js expansion pack

Launch a webserver to preview a "development build" with auto-reload ie. each time you edit a file, the modifications are applied immediately

cd vue
npm run serve

You can install browser extension.

For chrome the extension is available here.

4D backend using on web connection or using 4Daction could provide endpoint to provide data, as text, json, images, etc...

The vue.js frontend will request this data using your favorite http request node package (http, https, asio, etc...) and fill the template.

A simple example is provided by this pull request