In yesterday’s blog-post we blogged about Getting started with Sitecore JSS & Vue.js development. In today’s blog-post we’re going to continue with the basics and we’re going to learn about the several dependencies that a Sitecore JSS Vue.js app has. So let’s get started.
Introducing Vue UI
The Vue CLI version 3 comes with a graphical user interface tool called Vue UI, that enables us to create, update and manage every aspect of our Sitecore JSS projects. It will give you great insight about the dependencies, dev-dependencies and much more. Since I’m not so much of a package.json explorer myself, getting a better visually insight into how the entire app is constructed is one of the benefits of the UI tool. In order for the Vue UI to appear let’s do the following:
Let’s open up a Command prompt or Windows Powershell prompt and navigate into the directory sitecore-jss-getting-started-vuejs that we created yesterday. Let’s enter the following:
- vue ui
This will open up the Vue UI on localhost:8000 in your browser, where we can dig into the various options and configurations of a Sitecore JSS powered Vue.js app
(I’m sorry about the dutch translations in the menu, but somehow can’t find the option in Vue UI to set it back to English)
Project-Plugins
Vue CLI uses a plugin-based architecture. If you inspect a newly created Sitecore JSS project’s package.json, you will find dependencies that start with @vue/cli-plugin-. Plugins can modify the internal webpack configuration and inject commands to the vue-cli-service. The plugin based architecture makes Vue CLI flexible and extensible.
So now that we started up Vue UI we can actually scroll to the Plugins section in the left navigation and see what Project Plugins there are:
So as you can see is that a default Sitecore JSS powered Vue.js app comes out of the box with 3 official installed project plugins:
- The vue-cli-service is the one that starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box.
- The @vue/cli-plugin-babel one is the Babel plugin for the Vue CLI. Babel is a JavaScript compiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).
- The @vue/cli-plugin-eslint plugin is there to provide a pluggable linting utility for JavaScript
Project dependencies
A default Sitecore JSS app comes out of the box with a lot of dependencies, and we’re not taking dev-dependencies here. But dependencies of the example app that is generated when we executed the jss create command. These dependencies are necessary in order for the Vue.js app to successfully run.
One of the most interesting ones are the following:
- @sitecore-jss/sitecore-jss-vue – Sitecore JavaScript Services for Vue, contains Vue integration and components for JSS.
- vue-i18next – Adds internationalization for vue using the i18next i18n ecosystem
- Apollo Client – A fully-featured caching GraphQL client. It allows you to easily build UI components that fetch data via GraphQL
- Axios – Promise based HTTP client for the browser and node.js, which allows us to make http requests
- vue-meta, vue-router & vue-server-renderer, which all allow for SEO optimized and server side rendered Vue.js apps
Development dependencies
Development Dependencies should contain packages which are used during development or which are used to build your bundle. These dependencies are necessary only while you are developing your project, for example Eslint is used to check everything during the build of your bundle.
A created Sitecore JSS app comes with a lot of dev dependencies, but let’s focus on the several Sitecore JSS NPM dev dependency packages that are installed which all serve their own purpose. To give you a better understanding of the various Sitecore JSS dependencies here’s the list:
- @sitecore-jss/sitecore-jss-cli – Sitecore JavaScript Services CLI tools, contains the JSS command line interface.
- @sitecore-jss/sitecore-jss-dev-tools – Sitecore JavaScript Services developer tools, contains developer tooling, such as development proxies and deployment scripts.
- @sitecore-jss/sitecore-jss-manifest – Sitecore JavaScript Services Manifest, contains disconnected-mode manifest generation capabilities.
- @sitecore-jss/sitecore-jss-tracking – Sitecore JavaScript Services Tracking, contains APIs to invoke the JSS Tracker to track visitor behaviour.
Project configuration
In project configuration we can configure specific Vue CLI plugins a little bit further, like Vue CLI configuration or ESLint configuration:
Project tasks
Under tasks we can see the several tasks that are configured. Did you for example know that the ‘jss start’ command we’ve previously used actually runs the following command:
- npm-run-all –serial bootstrap:disconnected –parallel start:vue start:proxy start:watch-components
In one of the following blog-posts I’m sure we’ll deep-dive more into ‘jss commands’ when we actually start building out components with Sitecore JSS.
That’s it for now. I hope you have been given a better insight into what comes out of the box when you create a new Sitecore JSS powered by Vue.js app.
Till next time … Sitecore JSS in Powerfull Ways …
