Skip navigation
All People > ddraper > Dave Draper's Blog > 2016 > December > 21

Dave Draper's Blog

December 21, 2016 Previous day Next day

Getting Started with Vue.js

Posted by ddraper Dec 21, 2016
This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.

 

At the end of my last post I had got my Node.js server setup so that I could authenticate against a local Alfresco Repository such that it would act as a proxy for making REST API calls. I also had webpack configured to handle building my application code with hot-reloading (using Babel to transpile my JavaScript).

 

You can view the project code at the time of this blog post by checking out this tag.

 

I now wanted to start building out some client-side code. My initial plan is to test out lots of currently available UI frameworks (React, Aurelia, Ember, etc) to see how they compare... but I've become increasingly interested in Vue.js so wanted to initially start with that.

 

I installed Vue.js using yarn, but the the first gotcha I encountered was the issue with standalone vs runtime only versions which just goes to show that it pays to properly read the documentation! This was quick to resolve with the suggested approach of adding an alias - however this will mean that should I wish to ever deploy the application that I would almost certainly need a separate webpack configuration file for production deployment.

 

The next issue was an absence of source maps which meant it was harder to debug my code. This was quickly solved following the documentation here and here. Essentially it was just a case of updating my webpack.config.js file to include:

 

...
devtool: 'source-map',
...

 

...although there are other source map values that can be used.

 

Once I had Vue installed it was relatively simple to just build a simple component to list the contents of Company Home:

 

import Vue from 'vue';
import axios from 'axios';

Vue.component('alf-list', {
   template: `<ul id="example-1">
      <li v-for="item in items">
       {{ item.node.properties["cm:name"] }}
     </li>
   </ul>`,
   data: () => ({
      items: [],
   }),
   beforeMount() {
      axios.get('/proxy/alfresco/slingshot/doclib2/doclist/all/node/alfresco/company/home')
         .then(response => {
            this.items = response.data.items;
         });
   }
});

var vm = new Vue({
   el: '#app'
});

 

This code fragment defines a new component that before being "mounted" (see the life-cycle) uses axios to request the data from the Repository (going via the proxy set up in a previous post). When it mounts it then iterates over the items loaded from the repository and renders the name of each of them as an individual element in a list.

 

 

At the moment this obviously doesn't handle any kind of browsing of the data and it is not sensibly split out into separate files for the components - however, the essential building blocks are now in place - the ability to retrieve and render data.

This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.

At the end of my last post I'd got to the point where I'd set up a basic Node.js server that supported authentication via Passport.js and acted as a proxy for authenticated requests to an Alfresco Repository.  I've since update my project to use yarn and webpack (check out this tag for the revision at the time of writing this post).

 

As I did previously I started by doing some research into the various build tools that are available. The blog post that I'd followed to set up authentication was using Browserify, but after reading various blog posts (like this one) I decided to go with webpack.

 

I found this excellent post on webpack 2 (which at the time of writing is not officially released). The example described was using yarn instead of npm and in the spirit of wanting to try out new things (and already being familiar with npm) decided to give it a go.

 

There's not a huge amount to add to the main post on setting up webpack as it is so good, however I did end up using a different version (as is often the way, blog posts date very quickly when specifying versions so I won't even say which version I ended up using!).

 

The other major difference was in setting up the hot-reloading. The blog recommends using webpack-dev-server but this would provide an entirely different server and wouldn't provide me with all the authentication work that I'd previously done. Instead I switched to using webpack-dev-middleware.

 

The difference is that I configure my Express server to use the additional middle-ware for building the source. This required only the following code to setup:

// Setup webpack middleware...
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
server.use(webpackDevMiddleware(compiler, {
publicPath: '/'
}));

This then worked with the exact same configuration that the blog post example had setup.

 

The main immediate benefit of setting this up was that I could remove the CDN loading of axios (that I was using for client-side XHR handling) and replace it with a simple import statement in my "app.js" file (of course I needed to ensure that my webpack built "app.bundle.js" was being loaded on my web page instead!)

 

This now means that I can use ES6 code in my JavaScript and don't need to worry about restarting the server between changes.

 

The next stage will be to get some initial components written and set up some testing for them.

This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.

Most of the web development work that I've done for Alfresco has been on a Java web-server stack (i.e. Tomcat, Spring, Surf, Aikau) and doesn't give me a lot of practical opportunities to keep up with modern web development. Therefore I've decided to work through the creation of a web client based on Node.js to experiment, learn and hopefully feed that knowledge back into Alfresco.

 

Rather than picking up any of the readily available CLIs or tooling I wanted to go right back to basics to understand how everything works. The first thing I needed to do was get a server up and running that I could use to access data from an Alfresco Repository. 

 

I've created a new personal GitHub repository for this project and will tag it at each stage of the development process. To see the code created at the point at which this post was written you should clone the repository and checkout the Blog1 tag.

 

Before starting I did some research into what authentication modules were available for Node.js and found that the most popular one seemed to be Passport.js. I found a number of useful blog posts during my search such as these:

 

 

...but the one I found most useful was this one: Create an App in VueJS 2 

 

Although predominantly about VueJS it contains some really useful information on using Passport.js.

 

The main problem I had with all of these blog posts is that they were either describing how to setup local authentication (i.e. authenticating against a local database) or using 3rd party authentication (such as Facebook or Google) via redirection.

 

The solution I was looking for was to take the user credentials provided on login and verify them against an Alfresco Repository. There is a login WebScript supporting HTTP POST provided on the Alfresco Repository at /service/api/login that will return a "ticket" attribute that can be appended as a request parameter to all subsequent REST API calls for authentication.

 

The solution I implemented was to use the "LocalStrategy" and use the "http" module for Node to make an XHR request to the Alfresco Repository when authentication is required. The asynchronous nature of the request was not a problem because the LocalStrategy instance provides a "done" callback that is used to provide the authenticated user information.

 

The next important thing to handle was the serialization and de-serialization of this user data. It was important to store the ticket value on the user object so that we would have access to it later so I took the approach of simply creating a map of username to ticket (although to be perfectly honest due to the single threaded nature of Node.js I'm not actually sure that a map is required - perhaps someone can verify this!). 

 

The last thing to implement was a simple proxy for REST API requests. This was achieved by configuring the Express Router. My configuring a URL endpoint of "/proxy/alfresco" (to match what Alfresco Share currently provides) I was then able to create a simple proxy handler that would append the remainder of the requested URL in a call to "/alfresco/service" on the Alfresco Repository (being sure to also append the session ticket!). 

 

It is necessary to define routers for every HTTP method that you want to support (so far I've just added GET, POST, PUT and DELETE) and ensure that request parameters and/or body is passed on to the repository.

 

Essentially this is a hugely simplified implementation of one of the many capabilities that Surf offers. It should also be possible to support multiple endpoints (i.e. for an Activiti server perhaps?) assuming that the user credentials are the same. 

 

I also need to look further into any potential security issues around this implementation (this blog post provides a useful reference) so I wouldn't be rushing to push an approach like this into production. However, for my purposes this is a sufficient first step in building an Node.js based client for Alfresco.

 

Now that I'm able to access data from the Alfresco repository the next step will be to start building out an application using that data.