A scalable Single Page Application (SPA) example. This example uses Vue-cli, VueRouter, Vuex, VueResource and more. Clone the repo, do npm install, and use right away or read through this tutorial below to get an idea of how to build the project from scratch and setup Sublime Text.
- Todo
- Install Node
- Install Vue-CLI
- Add Dependencies
- Configure JQuery and Lodash and Tether
- Global Utilities
- Configure Sublime Text 3
- Configure ESLint
- Setup Main and Routes
- Setup Authentication (OAuth2), User Profile, and Vuex
- Proxy Api Calls in Webpack Dev Server
- Components
- Twitter Bootstrap 4 Configuration
- Fonts and Font-Awesome
- Images and Other Assets
- App.scss
- Unit Testing and End-to-End Testing
- Run the Dev Server
- Vue Dev Tools
- Create & Publish a Component/Library for Other Developers to Use
- Quick Learning Webpack Resources
- Currently, remote calls are made to an online example OAuth2 demo server here by Brent Shaffer. We can remove this and instead setup up a Node.js Express OAuth2.
- Add a section in this tutorial about working in a production environment.
- File splitting (Webpack's CommonChunksPlugin and etc.) and improving page load times.
Get the setup script:
$ cd ~
$ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.shInspect that you have the script, then run with sudo:
$ vim nodesource_setup.sh
$ sudo bash nodesource_setup.shNow install Nodejs:
$ sudo apt-get install nodejsThe nodejs package contains the nodejs binary as well as npm, so you don't need to install npm separately. However, in order for some npm packages to work (such as those that require compiling code from source), you will need to install the build-essential package:
$ sudo apt-get install build-essentialChange directory to the directory where you want this example project to reside:
# an example folder will be created here on the next step...
$ cd ~Install Vue-cli with webpack:
$ sudo npm install -g vue-cli
$ vue init webpack example-vue-project(Note: If you've already installed the cli before and when you init a new project you get the message: A newer version of vue-cli is available, then ctrl+c at the prompt and then: sudo npm install vue-cli -g to update (re-install) vue-cli to the latest version.)
Now you'll get some output like this:
? Project name: example-vue-project
? Project description: A Vue.js project
? Author: Your Name <your-name@email.com>
? Vue build: Runtime-only # saves you 6kb
? Install vue-router? Y
? Use ESLint to lint your code? Y
? Pick an ESLint preset: none # we'll use a vue specific preset based on Standard
? Setup unit tests with Karma + Mocha? Y
? Setup e2e tests with Nightwatch? Y
vue-cli Generated "example-vue-project"
Install dependencies in package.json:
$ cd example-vue-project
$ npm install # do this first before you add more dependencies (to avoid peer warns)(Note: We are installing most dependencies into the devDependencies section of package.json using --save-dev. The production server will not need those dependencies. Most of these dependencies are used to build a set of files into your dist folder for your production server to use.)
Install Vuex and Vue Resource (Vue Router was installed from vue-cli earlier)
$ npm install vuex vue-resource --saveInstall jQuery, Tether (required by Boostrap), Bootstrap, Font-Awesome, Roboto and Lodash
$ npm install jquery tether bootstrap@next font-awesome roboto-fontface lodash --save-devInstall Vue Multiselect (a vendor component used in an example)
$ npm install vue-multiselect@next --save-devInstall Vue ESLint plugin
$ npm install eslint-config-vue eslint-plugin-vue --save-devInstall babel-polyfill (for example, transpiling es6 promises, so that tests will work in testing browsers...see section on "Unit Testing and End-to-End Testing" further down).
npm install babel-polyfill --save-dev Install sass builders:
$ npm install sass-loader node-sass --save-devInstall stylus (optional):
$ npm install stylus -g # install stylus globally for Sublime
$ stylus -V # this confirms that stylus has been added to your path, if not, you need to do so for it to work correctly with Sublime
$ npm install stylus stylus-loader --save-dev # also install locallySee Sublime Text 3 section further down for installing the Stylus package for it.
(This concludes all extra dependencies, however feel free to check the package.json in the Github repo)
Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery and Lodash become globally available to all your modules (and also Tether for Bootstrap):
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery',
'_': 'lodash',
'Tether': 'tether',
utils: 'utils'
})
]Note: The utils property is for a set of utility functions we want global to all modules. See the section Global Utilities for more information on how this is set up.
Alternatively you can add the Expose Loader package:
npm install expose-loader --save-devUse in your entry point main.js like this:
import 'expose?$!expose?jQuery!jquery'
// ...Using the ProvidePlugin in the previous section, we were able to include jQuery and Lodash in all modules that used it. But these were from node_modules. What if we want to do this with one of our own modules from our project (so we don't have to directly require it each time we need it). In the previous section you can see we added utils to the ProvidePlugin. Now let's actually create a module (in the Node form) in our src/ directory for keeping these utilities we want globally:
module.exports = {
/**
* Get the error from a response.
*
* @param {Response} response The Vue-resource Response that we will try to get errors from.
*/
getError: function (response) {
return response.body['error_description']
? response.body.error_description
: response.statusText
}
}In the section Configure ESLint you will notice we have added utils to the globals so that the linter will not complain when we use it.
For the utils to work in the ProvidePlugin you could just require it directly, but it gives a warning and build fails (because it's an expression). So let's work around this by adding it to the set of aliases in webpack.base.conf.js:
module.exports = {
// ...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'utils': resolve('src/utils')
}
},
// ...
}So we use the utils alias in the plugin:
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery',
'_': 'lodash',
'Tether': 'tether',
utils: 'utils'
})
]Take a look in the Login.vue component to see how we use this utility to display an error message (when login credentials are invalid). Note: A more scalable way to handle responses/errors in your app would be to standardize them in your backend API. For example, when an error happens, the backend API can still return a 200, but include an error property with detail in the returned response JSON.
https://packagecontrol.io/installation
- Go to
Preferences > Package Control > Install Packageor pressctrl+shift+p(Win, Linux) orcmd+shift+p(OS X) and search for "Package Control: Install Package". - Search for the package "Babel" and install it.
- Open any .js file in Sublime. Then go to
View > Syntax > Open all with current extension as... > Babel > Javascript (Babel).
For example, here's how you can install the Oceanic Next theme:
- Try the Oceanic Next theme:
Open Package Control -> Install Packageand search for Oceanic Next color theme. - Go to
Preferences > Oceanic Next Color theme > Oceanic next.
- Open any .js file. Go to
Preferences > Settings - More > Syntax Specific - User. - It should open a file like
JavaScript (Babel).sublime-settings - Add these parameters to the file:
{
"extensions":
[
"js"
],
"tab_size": 2,
"translate_tabs_to_spaces": true
}
- Open any .vue file and repeat this process.
- Open
Package Control: Install Packageand search forStylusand install it (should be billymoon/Stylus package). - Restart Sublime.
- Open
Package Control: Install Packageand search forSublimeLinterand install it. - Search for
SublimeLinter-contrib-eslintand install it as well. - Restart Sublime.
Note: In the next section you'll configure eslint. If you install eslint into the same directory you are modifying Sublime files from (and same machine), then Sublimelinter will have no problem using it. Or you can also install eslint (and all the other eslint- packages) globally on the same machine as Sublime. But if you are using a server or a virtual machine (Vagrant/Virtualbox) configuration, then you need to tell sublimelinter where eslint is. You can change the path with Sublime Text -> Prefences -> Package Settings -> SublimeLinter -> Settings-User.*
Let's add some more things to eslint from the default given. You'll need to restart Sublime each time you makes changes to this file. One thing to point out is the env and globals properties. These are necessary so eslint doesn't complain about use of these globals in our JS files (and so we don't have to add something like /* globals localStorage */ to the top of those files to suppress the errors). See other sections in this tutorial, Configure JQuery and Global Helpers for information about working in a global context in Webpack.
Make sure you installed the additional eslint dependencies:
$ npm install eslint-config-vue eslint-plugin-vue --save-devNow open up your eslintrc.js file and make the following changes:
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
// required for eslint-config-vue
extends: 'vue',
// required to lint *.vue files
plugins: [
'html'
],
env: {
browser: true
},
globals: {
'$': true,
'_': true,
'utils': true
},
// add your custom rules here
'rules': {
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}You can tell ESLint to ignore specific files and directories by using an .eslintignore file in your project’s root directory:
.eslintignore
build/*.js
config/*.js
The ignore patterns behave according to the .gitignore specification.
(Don't forget to restart your editor, ie. SublimeText3)
/* Twitter Bootstrap JS (this could also be handled in an app.js file) */
require('bootstrap')
/* Vue */
import Vue from 'vue'
import router from './router'
import store from './store'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false
/* App sass */
import './assets/style/app.scss'
/* App component */
import App from './components/App.vue'
/* Auth plugin */
import Auth from './auth'
Vue.use(Auth)
/* eslint-disable no-new */
new Vue({
el: '#app',
// Attach the Vue instance to the window,
// so it's available globally.
created: function () {
window.Vue = this
},
router,
store,
render: h => h(App)
})import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
// Each of these routes are loaded asynchronously, when a user first navigates to each corresponding endpoint.
// The route will load once into memory, the first time it's called, and no more on future calls.
// This behavior can be observed on the network tab of your browser dev tools.
{
path: '/login',
name: 'login',
component: function (resolve) {
require(['@/components/login/Login.vue'], resolve)
}
},
{
path: '/signup',
name: 'signup',
component: function (resolve) {
require(['@/components/signup/Signup.vue'], resolve)
}
},
{
path: '/',
name: 'dashboard',
component: function (resolve) {
require(['@/components/dashboard/Dashboard.vue'], resolve)
},
beforeEnter: guardRoute
}
]
})
function guardRoute (to, from, next) {
// work-around to get to the Vuex store (as of Vue 2.0)
const auth = router.app.$options.store.state.auth
if (!auth.isLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
}
export default routerCreate a folder called store in the src directory:
$ mkdir storeNow let's create the following files that will comprise our central Vuex storage.
Let's setup the state of our central data storage. We'll want some state to be available accross browser tabs (and when the app is closed/reopened) so let's sync this state with LocalStorage. When the app bootstraps, we want to first check in the browser's localStorage and retrieve all of our previously stored data. We'll also have other state we can use for to make component-to-component communication easier (for situations where you don't have a simple parent-child communication, but more complex sibling-to-sibling or other component relationships). Let's just add a property for storing the search text and button press on the navbar for demonstration purposes.
// Set the key we'll use in local storage.
// Go to Chrome dev tools, application tab, click "Local Storage" and "http://localhost:8080"
// and you'll see this key set below (if logged in):
export const STORAGE_KEY = 'example-vue-project'
let initialState = {}
// Local storage sync state
if (localStorage.getItem(STORAGE_KEY)) {
initialState = JSON.parse(localStorage.getItem(STORAGE_KEY))
} else {
initialState = {
auth: {
isLoggedIn: false,
accessToken: null,
refreshToken: null
},
user: {
name: null
}
}
}
// Other state (not synced in local storage)
initialState.appnav = {
searchText: '',
searchTimestamp: null
}
export const state = initialStateNow create a file to hold all the methods that will change the state in our Vuex store:
export const UPDATE_AUTH = (state, auth) => {
state.auth = auth
}
export const UPDATE_USER = (state, user) => {
state.user = user
}
export const APPNAV_SEARCH = (state, searchData) => {
state.appnav = searchData
}
/**
* Clear each property, one by one, so reactivity still works.
*
* (ie. clear out state.auth.isLoggedIn so Navbar component automatically reacts to logged out state,
* and the Navbar menu adjusts accordingly)
*
* TODO: use a common import of default state to reset these values with.
*/
export const CLEAR_ALL_DATA = (state) => {
// Auth
state.auth.isLoggedIn = false
state.auth.accessToken = null
state.auth.refreshToken = null
// User
state.user.name = ''
}
And some getters (although you can accesss the Vuex state directly as we'll see shortly):
export const user = state => state.userWe'll also go ahead and add an actions file (but leave it empty for this project since we don't need it):
// Here is where you can put async operations.
// See the Vuex official docs for more information.
// ...Plugins offer a nice approach to hook into mutations and do things like logging or syncing with another store such as localStorage or websockets:
import { STORAGE_KEY } from './state'
const localStoragePlugin = store => {
store.subscribe((mutation, state) => {
const syncedData = { auth: state.auth, user: state.user }
localStorage.setItem(STORAGE_KEY, JSON.stringify(syncedData))
if (mutation.type === 'CLEAR_ALL_DATA') {
localStorage.removeItem(STORAGE_KEY)
}
})
}
// TODO: setup env
// export default process.env.NODE_ENV !== 'production' ? [localStoragePlugin] : [localStoragePlugin]
export default [localStoragePlugin]And bring it all together in the index.js file:
import Vue from 'vue'
import Vuex from 'vuex'
import { state } from './state'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from './mutations'
import plugins from './plugins'
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
plugins
})
export default storeNow let's add our auth script. Here we handle getting OAuth2 access_tokens and automatically refreshing them.
import Vue from 'vue'
import router from './router'
import store from './store'
/**
* @var{string} LOGIN_URL The endpoint for logging in. This endpoint should be proxied by Webpack dev server
* and maybe nginx in production (cleaner calls and avoids CORS issues).
*/
const LOGIN_URL = '/auth'
/**
* @var{string} REFRESH_TOKEN_URL The endpoint for refreshing an access_token. This endpoint should be proxied
* by Webpack dev server and maybe nginx in production (cleaner calls and avoids CORS issues).
*/
const REFRESH_TOKEN_URL = '/auth'
/**
* TODO: This is here to demonstrate what an OAuth server will want. Ultimately you don't want to
* expose a client_secret here. You want your real project backend to take a username/password
* request and add the client secret on the server-side and forward that request
* onto an OAuth server. Your backend acts as a middle-man in the process, which is better, for
* example in situations like DDoS attacks.
*
* @var{Object} AUTH_BASIC_HEADERS The options to pass into a Vue-resource http call. Includes
* the headers used for login and token refresh and emulateJSON flag since we are hitting an
* OAuth server directly that can't handle application/json.
*/
const AUTH_BASIC_HEADERS = {
headers: {
'Authorization': 'Basic ZGVtb2FwcDpkZW1vcGFzcw==' // Base64(client_id:client_secret) "demoapp:demopass"
},
emulateJSON: true
}
/**
* Auth Plugin
*
* (see https://vuejs.org/v2/guide/plugins.html for more info on Vue.js plugins)
*
* Handles login and token authentication using OAuth2.
*/
export default {
/**
* Install the Auth class.
*
* Creates a Vue-resource http interceptor to handle automatically adding auth headers
* and refreshing tokens. Then attaches this object to the global Vue (as Vue.auth).
*
* @param {Object} Vue The global Vue.
* @param {Object} options Any options we want to have in our plugin.
* @return {void}
*/
install (Vue, options) {
Vue.http.interceptors.push((request, next) => {
const token = store.state.auth.accessToken
const hasAuthHeader = request.headers.has('Authorization')
if (token && !hasAuthHeader) {
this.setAuthHeader(request)
}
next((response) => {
if (this._isInvalidToken(response)) {
return this._refreshToken(request)
}
})
})
Vue.prototype.$auth = Vue.auth = this
},
/**
* Login
*
* @param {Object.<string>} creds The username and password for logging in.
* @param {string|null} redirect The name of the Route to redirect to.
* @return {Promise}
*/
login (creds, redirect) {
const params = { 'grant_type': 'password', 'username': creds.username, 'password': creds.password }
return Vue.http.post(LOGIN_URL, params, AUTH_BASIC_HEADERS)
.then((response) => {
this._storeToken(response)
if (redirect) {
router.push({ name: redirect })
}
return response
})
.catch((errorResponse) => {
return errorResponse
})
},
/**
* Logout
*
* Clear all data in our Vuex store (which resets logged-in status) and redirect back
* to login form.
*
* @return {void}
*/
logout () {
store.commit('CLEAR_ALL_DATA')
router.push({ name: 'login' })
},
/**
* Set the Authorization header on a Vue-resource Request.
*
* @param {Request} request The Vue-Resource Request instance to set the header on.
* @return {void}
*/
setAuthHeader (request) {
request.headers.set('Authorization', 'Bearer ' + store.state.auth.accessToken)
// The demo Oauth2 server we are using requires this param, but normally you only set the header.
/* eslint-disable camelcase */
request.params.access_token = store.state.auth.accessToken
},
/**
* Retry the original request.
*
* Let's retry the user's original target request that had recieved a invalid token response
* (which we fixed with a token refresh).
*
* @param {Request} request The Vue-resource Request instance to use to repeat an http call.
* @return {Promise}
*/
_retry (request) {
this.setAuthHeader(request)
return Vue.http(request)
.then((response) => {
return response
})
.catch((response) => {
return response
})
},
/**
* Refresh the access token
*
* Make an ajax call to the OAuth2 server to refresh the access token (using our refresh token).
*
* @private
* @param {Request} request Vue-resource Request instance, the original request that we'll retry.
* @return {Promise}
*/
_refreshToken (request) {
const params = { 'grant_type': 'refresh_token', 'refresh_token': store.state.auth.refreshToken }
return Vue.http.post(REFRESH_TOKEN_URL, params, AUTH_BASIC_HEADERS)
.then((result) => {
this._storeToken(result)
return this._retry(request)
})
.catch((errorResponse) => {
if (this._isInvalidToken(errorResponse)) {
this.logout()
}
return errorResponse
})
},
/**
* Store tokens
*
* Update the Vuex store with the access/refresh tokens received from the response from
* the Oauth2 server.
*
* @private
* @param {Response} response Vue-resource Response instance from an OAuth2 server.
* that contains our tokens.
* @return {void}
*/
_storeToken (response) {
const auth = store.state.auth
const user = store.state.user
auth.isLoggedIn = true
auth.accessToken = response.body.access_token
auth.refreshToken = response.body.refresh_token
// TODO: get user's name from response from Oauth server.
user.name = 'John Smith'
store.commit('UPDATE_AUTH', auth)
store.commit('UPDATE_USER', user)
},
/**
* Check if the Vue-resource Response is an invalid token response.
*
* @private
* @param {Response} response The Vue-resource Response instance received from an http call.
* @return {boolean}
*/
_isInvalidToken (response) {
const status = response.status
const error = response.data.error
return (status === 401 && (error === 'invalid_token' || error === 'expired_token'))
}
}Checkout out Login.vue component to see how we use Auth. Also take a look at Dashboard.vue component, you can see the Vue-resource http interceptors let us not worry about including authorization headers in our AJAX calls. The interceptors also take care of refreshing tokens behind the scenes. See the comments marked "TODO" for some caveats with this demo and your own project. I hope to update this demo using a Node Express OAuth2 server for better demonstration of Auth flow.
When using Webpack for Hot Reloading, we'll need to tell the webpack dev server that /api calls need to be reverse proxied to another server (ie. running on node express, nginx, or some embedded server in your backend IDE). For production you would just use nginx to do the proxying. The big advantage is we don't have to worry about CORS and also we don't expose the true API endpoints to the client.
Notice in build/dev-server.js this line:
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
})In this setup we are using: https://github.com/chimurai/http-proxy-middleware (you can see examples there). So let's add options to our config to make this work:
In config/index.js, update the proxyTable object to look like this:
dev: {
// ...
proxyTable: {
'/auth': {
// TODO: Update to use node express oauth2 server for better example.
target: 'http://brentertainment.com/oauth2/lockdin/token', // <-- demo oauth2 server, https://github.com/bshaffer/oauth2-demo-php
changeOrigin: true,
ws: true,
pathRewrite: {
'^/auth': ''
},
router: {
}
},
'/api': {
target: 'http://brentertainment.com/oauth2', // api server
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
pathRewrite: {
'^/api': '/lockdin' // rewrite path localhost:8080/api to http://brentertainment.com/oauth2/lockdin
},
router: {
// when request.headers.host == 'dev.localhost:3000',
// override target 'http://www.example.org' to 'http://localhost:8000'
// 'dev.localhost:3000': 'http://localhost:8000'
}
}
},
// ...
}Delete the App.vue file located in /src folder:
$ rm App.vueIn the /src/components folder create the following folders and .Vue files (just copy these directly from this repo):
/src
/components
- App.vue
- AppFooter.vue
- AppNav.vue
- Hello.vue
/common
- Countries.vue
- Spinner.vue
- countries.data.js
/dashboard
- Dashboard.vue
- AddressModal.vue
/login
- Login.vue
/signup
- Signup.vue
/users
Here we use a folder for each "page" in our SPA. This allows us to represent "pages" with more than a single .Vue file. We can ad other supporting .Vue components, .js files, or data files. There's also a common folder to put any components we feel don't necessarily belong to a page parent. If over time you feel there are too many folders, you can further group/consolidate pages into folders ("page group folders").
- Install Bootstrap 4 and Tether.js, see section: Add Dependencies.
- Add Tether to providePlugin, see section: Configure JQuery and Lodash and Tether
- Require in main.js: see section: Setup Main and Routes
- Add a folder
style(if you haven't already) to your/assetsdirectory and create the following file:
// copy and paste here everything from the node_modules/bootstrap/scss/_variables.scss
// Then make adjustments to variables for your specific app.
- Import into your app.scss, see section: App scss.
Install packages (if you haven't already from earlier section ):
npm install font-awesome roboto-fontface --save-dev
Then add _fonts.scss stylesheet. We'll setup your fonts and also font-awesome here:
/* Font Awesome */
$fa-font-path: '../../../node_modules/font-awesome/fonts';
@import '../../../node_modules/font-awesome/scss/font-awesome';
/* Roboto */
$roboto-font-path: '../../../node_modules/roboto-fontface/fonts';
@import '../../../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface';
Create an images folder at src/assets/images then cut an paste the Vue logo.png file that resides in the assets folder by default. The Navbar component uses a relative link to this image, which Webpack will resolve for us automatically.
You can read more about static assets here: https://vuejs-templates.github.io/webpack/static.html
Bring everything to together into an app.scss file that we import in our main entry:
@import 'fonts';
@import 'variables';
@import '../../../node_modules/bootstrap/scss/bootstrap';
@import '../../../node_modules/vue-multiselect/dist/vue-multiselect.min.css';
Of course if this file gets too big, you can break it up into different supporting files: _forms.scss, _blah-blah.scss, etc.
Make sure you installed babel-polyfill earlier in this tutorial or es6 promises won't work in PhantomJS. If you didn't, you can install it with:
npm install babel-polyfill --save-dev Then update your test/unit/karma.conf.js file to include the polyfill:
//...
files: [
'../../node_modules/babel-polyfill/dist/polyfill.js',
'./index.js'
],A unit test is included from the Webpack template already. It's a simple example that tests the content outputted from the Hello vue component:
import Vue from 'vue'
import Hello from 'src/components/Hello'
describe('Hello.vue', () => {
it('should render correct contents', () => {
const vm = new Vue({
el: document.createElement('div'),
render: (h) => h(Hello)
})
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App')
})
})I find End-to-End testing and Integration testing even more beneficial. Vue-cli has put together a nice setup that includes Nightwatch.js (which uses Selenium and a Chrome driver) for e2e testing right out of the box. Let's remove the existing test located at test/e2e/specs/test.js since it will no longer work with the changes we have made. Let's add a new test that tests that our login form works and that we can reach the dashboard:
// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage
/**
* Test that user can login and see dashboard.
*/
module.exports = {
'default e2e tests': function (browser) {
// automatically uses dev Server port from /config.index.js
// default: http://localhost:8080
// see nightwatch.conf.js
const devServer = browser.globals.devServerURL
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
// Assert that user can see login.
.assert.elementPresent('.login')
.setValue('.js-login__username', 'demouser')
.setValue('.js-login__password', 'testpass')
.click('.js-login__submit')
.pause(1000)
// Assert that user can see dashboard.
.assert.containsText('.ev-dashboard__heading h1', 'This is the dashboard')
.pause(2000)
.end()
}
}Note: You may wish to add another assert that asserts the dashboard is unreachable when a user is logged out.
Now let's run both the unit test and the e2e test. Make sure you are in your project directory, then:
npm run testYou should see some output initially showing the results of each unit test ran:
Hello.vue
✓ should render correct contents
...
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.018 secs / 0.004 secs) TOTAL: 1 SUCCESS
Then the Selenium server will fire up Chrome browser and run the e2e tests to see if those pass:
✔ Element <#app> was visible after 65 milliseconds.
✔ Testing if element <.ev-login> is present.
✔ Testing if element <.ev-dashboard__heading> contains text: "This is the dashboard".
...
OK. 3 assertions passed. (18.522s)
You can of course run unit tests and e2e tests seperately with: npm run unit and npm run e2e.
Run the dev server:
$ cd ~/example-vue-project
$ npm run devOpen your browser and visit http://localhost:8080 . You should see something like this:
Visit the Chrome Web Store to get the Vue Dev Tools extension for helping debug Vue.js applications.
Once installed, Open Chrome dev tools and go to the "Vue" tab.
If you click on the "Vuex" tab, you can see all data from the store in the right pane. Click the export button to copy the data to the clipboard. Click the import button and paste the clipboard data there.
For example, you can alter the accessToken to something invalid (to simulate an expired oauth access_token without waiting on actual expiration) in the pasted data. Then click the import button again and the Vuex store will live update. Now you can confirm that the automatic refreshToken interceptor works.
So now you want to go further and develop a component that others can npm install and import into their own project?
Here you go: https://github.com/prograhammer/vue-library-template
- SurviveJs: https://survivejs.com/webpack/introduction/
- Official Webpack Tutorial: https://webpack.js.org/guides/get-started/