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.
I've now experimented with creating the same simple Alfresco client in Vue.js, React, Aurelia and Angular. When I created the first client in Vue.js I built up the project from scratch rather than using the CLI in order that I could better understand Node.js, Express, webpack, etc. This resulted in me creating an NPM package to configure Node.js middleware to handle authentication against an Alfresco Repository. When using the various CLIs for the other frameworks I found that they all were aimed at creating a Single Page Application and I ended up creating proxy configuration to re-route REST API requests to Alfresco. As this approach is also available in Vue I wanted to explore this option as I begin to move all the implementation forwards.
Setting up the proxy was very simply a case of adding a "proxyTable" entry to the index.js file:
proxyTable: {
'/proxy/alfresco': {
target: 'http://localhost:8080/alfresco',
changeOrigin: true,
pathRewrite: {
'^/proxy/alfresco': ''
}
}
},
...but getting the touter configured was a little more tricky because changes between versions 1 and 2 of Vue.js meant that some of the blog posts are out of date. However, following the official documentation ultimately proved most useful.
Defining the basic application routing structure was quite straightforward as well... with a main HTML page containing:
<div id="app">
<router-view></router-view>
</div>
...it was possible to setup up the main.js file to bind the a router with a Login and Home components as follows...
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
beforeEnter: (to, from, next) => {
if (auth.loggedIn()) {
next();
} else {
next('/login');
}
}
},
{ path: '/login', component: Login }
];
export const router = new VueRouter({
routes: routes
});
new Vue({
router
}).$mount('#app');
The "/home" route is protected with a "beforeEnter" guard that uses my "alfresco-js-utils" NPM package for ensuring that the current user is logged in.
Having completed the authentication handling it was just a case of porting my previously created components to the new project (you can view the code at the time of writing by checking out this tag).
I was interested to see how I would feel about coming back to Vue.js having subsequently looked at React, Aurelia and Angular and in my opinion its the most satisfying to code in. There are still frustrating elements but the documentation and tooling is excellent and the CLI gives you an excellent starting point for development.
