├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── load-minified.js ├── service-worker-dev.js ├── service-worker-prod.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── api.js ├── assets │ └── logo.png ├── components │ ├── Hello.vue │ └── PostsManager.vue ├── main.js ├── router │ └── index.js └── server.js ├── static ├── img │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg └── manifest.json └── test ├── e2e ├── custom-assertions │ └── elementCount.js ├── nightwatch.conf.js ├── runner.js └── specs │ └── test.js └── unit ├── .eslintrc ├── index.js ├── karma.conf.js └── specs └── Hello.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": [ "istanbul" ] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage 8 | /test/e2e/reports 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | 18 | *.sqlite 19 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2018-Present Okta, Inc. 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Basic CRUD with Vue.js and Node 2 | 3 | This example app shows how to create a Node.js API and display its data with a Vue.js UI. 4 | 5 | Please read [Build a Basic CRUD App with Vue.js and Node](https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node) to see how this app was created. 6 | 7 | **Prerequisites:** [Node.js](https://nodejs.org/). 8 | 9 | > [Okta](https://developer.okta.com/) has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage, and secure users and roles in any application. 10 | 11 | * [Getting Started](#getting-started) 12 | * [Links](#links) 13 | * [Help](#help) 14 | * [License](#license) 15 | 16 | ## Getting Started 17 | 18 | To install this example application, run the following commands: 19 | 20 | ```bash 21 | git clone https://github.com/oktadeveloper/okta-vue-node-example.git 22 | cd okta-vue-node-example 23 | npm install 24 | ``` 25 | 26 | This will get a copy of the project installed locally. To start each app, follow the instructions below. 27 | 28 | To run the server: 29 | 30 | ```bash 31 | node ./src/server 32 | ``` 33 | 34 | To run the client: 35 | 36 | ```bash 37 | npm run dev 38 | ``` 39 | 40 | ### Create an Application in Okta 41 | 42 | You will need to [create an OpenID Connect Application in Okta](https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node#add-authentication-with-okta) to get your values to perform authentication. 43 | 44 | Before you begin, you’ll need a free Okta developer account. Install the [Okta CLI](https://cli.okta.com/) and run `okta register` to sign up for a new account. If you already have an account, run `okta login`. 45 | 46 | Then, run `okta apps create`. Select the default app name, or change it as you see fit. Choose **Single-Page App** and press **Enter**. 47 | 48 | Use `http://localhost:8080/callback` for the Redirect URI and accept the default Logout Redirect URI of `http://localhost:8080`. 49 | 50 | #### Server Configuration 51 | 52 | Set the `issuer` and copy the `clientId` into `src/server.js`. 53 | 54 | ```javascript 55 | const oktaJwtVerifier = new OktaJwtVerifier({ 56 | clientId: '{yourClientId}', 57 | issuer: 'https://{yourOktaDomain}/oauth2/default' 58 | }) 59 | ``` 60 | 61 | #### Client Configuration 62 | 63 | Set the `issuer` and copy the `clientId` into `src/router/index.js`. 64 | 65 | ```javascript 66 | const oktaAuth = new OktaAuth({ 67 | issuer: 'https://{yourOktaDomain}/oauth2/default', 68 | clientId: '{yourClientId}', 69 | redirectUri: window.location.origin + '/callback', 70 | scopes: ['openid', 'profile', 'email'] 71 | }) 72 | ``` 73 | 74 | ## Links 75 | 76 | This example uses the following libraries provided by Okta: 77 | 78 | * [Okta JWT Verifier](https://github.com/okta/okta-oidc-js/tree/master/packages/jwt-verifier) 79 | * [Okta Vue SDK](https://github.com/okta/okta-vue) 80 | 81 | ## Help 82 | 83 | Please post any questions as comments on the [blog post](https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node), or visit our [Okta Developer Forums](https://devforum.okta.com/). 84 | 85 | ## License 86 | 87 | Apache 2.0, see [LICENSE](LICENSE). 88 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | require('./check-versions')() 4 | 5 | process.env.NODE_ENV = 'production' 6 | 7 | const ora = require('ora') 8 | const rm = require('rimraf') 9 | const path = require('path') 10 | const chalk = require('chalk') 11 | const webpack = require('webpack') 12 | const config = require('../config') 13 | const webpackConfig = require('./webpack.prod.conf') 14 | 15 | const spinner = ora('building for production...') 16 | spinner.start() 17 | 18 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 19 | if (err) throw err 20 | webpack(webpackConfig, function (err, stats) { 21 | spinner.stop() 22 | if (err) throw err 23 | process.stdout.write(stats.toString({ 24 | colors: true, 25 | modules: false, 26 | children: false, 27 | chunks: false, 28 | chunkModules: false 29 | }) + '\n\n') 30 | 31 | console.log(chalk.cyan(' Build complete.\n')) 32 | console.log(chalk.yellow( 33 | ' Tip: built files are meant to be served over an HTTP server.\n' + 34 | ' Opening index.html over file:// won\'t work.\n' 35 | )) 36 | }) 37 | }) 38 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const chalk = require('chalk') 4 | const semver = require('semver') 5 | const packageConfig = require('../package.json') 6 | const shell = require('shelljs') 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | }, 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | for (let i = 0; i < versionRequirements.length; i++) { 30 | const mod = versionRequirements[i] 31 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 32 | warnings.push(mod.name + ': ' + 33 | chalk.red(mod.currentVersion) + ' should be ' + 34 | chalk.green(mod.versionRequirement) 35 | ) 36 | } 37 | } 38 | 39 | if (warnings.length) { 40 | console.log('') 41 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 42 | console.log() 43 | for (let i = 0; i < warnings.length; i++) { 44 | const warning = warnings[i] 45 | console.log(' ' + warning) 46 | } 47 | console.log() 48 | process.exit(1) 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | /* eslint-disable */ 4 | require('eventsource-polyfill') 5 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 6 | 7 | hotClient.subscribe(function (event) { 8 | if (event.action === 'reload') { 9 | window.location.reload() 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | require('./check-versions')() 4 | 5 | const config = require('../config') 6 | if (!process.env.NODE_ENV) { 7 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 8 | } 9 | 10 | const opn = require('opn') 11 | const path = require('path') 12 | const express = require('express') 13 | const webpack = require('webpack') 14 | const proxyMiddleware = require('http-proxy-middleware') 15 | const webpackConfig = process.env.NODE_ENV === 'testing' 16 | ? require('./webpack.prod.conf') 17 | : require('./webpack.dev.conf') 18 | 19 | // default port where dev server listens for incoming traffic 20 | const port = process.env.PORT || config.dev.port 21 | // automatically open browser, if not set will be false 22 | const autoOpenBrowser = !!config.dev.autoOpenBrowser 23 | // Define HTTP proxies to your custom API backend 24 | // https://github.com/chimurai/http-proxy-middleware 25 | const proxyTable = config.dev.proxyTable 26 | 27 | const app = express() 28 | const compiler = webpack(webpackConfig) 29 | 30 | const devMiddleware = require('webpack-dev-middleware')(compiler, { 31 | publicPath: webpackConfig.output.publicPath, 32 | quiet: true 33 | }) 34 | 35 | const hotMiddleware = require('webpack-hot-middleware')(compiler, { 36 | log: false 37 | }) 38 | // force page reload when html-webpack-plugin template changes 39 | compiler.plugin('compilation', function (compilation) { 40 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 41 | hotMiddleware.publish({ action: 'reload' }) 42 | cb() 43 | }) 44 | }) 45 | 46 | // enable hot-reload and state-preserving 47 | // compilation error display 48 | app.use(hotMiddleware) 49 | 50 | // proxy api requests 51 | Object.keys(proxyTable).forEach(function (context) { 52 | let options = proxyTable[context] 53 | if (typeof options === 'string') { 54 | options = { target: options } 55 | } 56 | app.use(proxyMiddleware(options.filter || context, options)) 57 | }) 58 | 59 | // handle fallback for HTML5 history API 60 | app.use(require('connect-history-api-fallback')()) 61 | 62 | // serve webpack bundle output 63 | app.use(devMiddleware) 64 | 65 | // serve pure static assets 66 | const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 67 | app.use(staticPath, express.static('./static')) 68 | 69 | const uri = 'http://localhost:' + port 70 | 71 | let _resolve 72 | const readyPromise = new Promise(resolve => { 73 | _resolve = resolve 74 | }) 75 | 76 | console.log('> Starting dev server...') 77 | devMiddleware.waitUntilValid(() => { 78 | console.log('> Listening at ' + uri + '\n') 79 | // when env is testing, don't need open it 80 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 81 | opn(uri) 82 | } 83 | _resolve() 84 | }) 85 | 86 | const server = app.listen(port) 87 | 88 | module.exports = { 89 | ready: readyPromise, 90 | close: () => { 91 | server.close() 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /build/load-minified.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const fs = require('fs') 4 | const UglifyJS = require('uglify-es') 5 | 6 | module.exports = function(filePath) { 7 | const code = fs.readFileSync(filePath, 'utf-8') 8 | const result = UglifyJS.minify(code) 9 | if (result.error) return '' 10 | return result.code 11 | } 12 | -------------------------------------------------------------------------------- /build/service-worker-dev.js: -------------------------------------------------------------------------------- 1 | // This service worker file is effectively a 'no-op' that will reset any 2 | // previous service worker registered for the same host:port combination. 3 | // In the production build, this file is replaced with an actual service worker 4 | // file that will precache your site's local assets. 5 | // See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 6 | 7 | self.addEventListener('install', () => self.skipWaiting()); 8 | 9 | self.addEventListener('activate', () => { 10 | self.clients.matchAll({ type: 'window' }).then(windowClients => { 11 | for (let windowClient of windowClients) { 12 | // Force open pages to refresh, so that they have a chance to load the 13 | // fresh navigation response from the local dev server. 14 | windowClient.navigate(windowClient.url); 15 | } 16 | }); 17 | }); -------------------------------------------------------------------------------- /build/service-worker-prod.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | // Check to make sure service workers are supported in the current browser, 5 | // and that the current page is accessed from a secure origin. Using a 6 | // service worker from an insecure origin will trigger JS console errors. 7 | var isLocalhost = Boolean(window.location.hostname === 'localhost' || 8 | // [::1] is the IPv6 localhost address. 9 | window.location.hostname === '[::1]' || 10 | // 127.0.0.1/8 is considered localhost for IPv4. 11 | window.location.hostname.match( 12 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 13 | ) 14 | ); 15 | 16 | window.addEventListener('load', function() { 17 | if ('serviceWorker' in navigator && 18 | (window.location.protocol === 'https:' || isLocalhost)) { 19 | navigator.serviceWorker.register('service-worker.js') 20 | .then(function(registration) { 21 | // updatefound is fired if service-worker.js changes. 22 | registration.onupdatefound = function() { 23 | // updatefound is also fired the very first time the SW is installed, 24 | // and there's no need to prompt for a reload at that point. 25 | // So check here to see if the page is already controlled, 26 | // i.e. whether there's an existing service worker. 27 | if (navigator.serviceWorker.controller) { 28 | // The updatefound event implies that registration.installing is set 29 | var installingWorker = registration.installing; 30 | 31 | installingWorker.onstatechange = function() { 32 | switch (installingWorker.state) { 33 | case 'installed': 34 | // At this point, the old content will have been purged and the 35 | // fresh content will have been added to the cache. 36 | // It's the perfect time to display a "New content is 37 | // available; please refresh." message in the page's interface. 38 | break; 39 | 40 | case 'redundant': 41 | throw new Error('The installing ' + 42 | 'service worker became redundant.'); 43 | 44 | default: 45 | // Ignore 46 | } 47 | }; 48 | } 49 | }; 50 | }).catch(function(e) { 51 | console.error('Error during service worker registration:', e); 52 | }); 53 | } 54 | }); 55 | })(); 56 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const config = require('../config') 5 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | return path.posix.join(assetsSubDirectory, _path) 12 | } 13 | 14 | exports.cssLoaders = function (options) { 15 | options = options || {} 16 | 17 | const cssLoader = { 18 | loader: 'css-loader', 19 | options: { 20 | minimize: process.env.NODE_ENV === 'production', 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | // generate loader string to be used with extract text plugin 26 | function generateLoaders (loader, loaderOptions) { 27 | const loaders = [cssLoader] 28 | if (loader) { 29 | loaders.push({ 30 | loader: loader + '-loader', 31 | options: Object.assign({}, loaderOptions, { 32 | sourceMap: options.sourceMap 33 | }) 34 | }) 35 | } 36 | 37 | // Extract CSS when that option is specified 38 | // (which is the case during production build) 39 | if (options.extract) { 40 | return ExtractTextPlugin.extract({ 41 | use: loaders, 42 | fallback: 'vue-style-loader' 43 | }) 44 | } else { 45 | return ['vue-style-loader'].concat(loaders) 46 | } 47 | } 48 | 49 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 50 | return { 51 | css: generateLoaders(), 52 | postcss: generateLoaders(), 53 | less: generateLoaders('less'), 54 | sass: generateLoaders('sass', { indentedSyntax: true }), 55 | scss: generateLoaders('sass'), 56 | stylus: generateLoaders('stylus'), 57 | styl: generateLoaders('stylus') 58 | } 59 | } 60 | 61 | // Generate loaders for standalone style files (outside of .vue) 62 | exports.styleLoaders = function (options) { 63 | const output = [] 64 | const loaders = exports.cssLoaders(options) 65 | for (const extension in loaders) { 66 | const loader = loaders[extension] 67 | output.push({ 68 | test: new RegExp('\\.' + extension + '$'), 69 | use: loader 70 | }) 71 | } 72 | return output 73 | } 74 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const isProduction = process.env.NODE_ENV === 'production' 6 | 7 | module.exports = { 8 | loaders: utils.cssLoaders({ 9 | sourceMap: isProduction 10 | ? config.build.productionSourceMap 11 | : config.dev.cssSourceMap, 12 | extract: isProduction 13 | }), 14 | transformToRequire: { 15 | video: ['src', 'poster'], 16 | source: 'src', 17 | img: 'src', 18 | image: 'xlink:href' 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const utils = require('./utils') 5 | const config = require('../config') 6 | const vueLoaderConfig = require('./vue-loader.conf') 7 | 8 | function resolve (dir) { 9 | return path.join(__dirname, '..', dir) 10 | } 11 | 12 | module.exports = { 13 | entry: { 14 | app: './src/main.js' 15 | }, 16 | output: { 17 | path: config.build.assetsRoot, 18 | filename: '[name].js', 19 | publicPath: process.env.NODE_ENV === 'production' 20 | ? config.build.assetsPublicPath 21 | : config.dev.assetsPublicPath 22 | }, 23 | resolve: { 24 | extensions: ['.js', '.vue', '.json'], 25 | alias: { 26 | 'vue$': 'vue/dist/vue.esm.js', 27 | '@': resolve('src') 28 | } 29 | }, 30 | module: { 31 | rules: [ 32 | { 33 | test: /\.(js|vue)$/, 34 | loader: 'eslint-loader', 35 | enforce: 'pre', 36 | include: [resolve('src'), resolve('test')], 37 | options: { 38 | formatter: require('eslint-friendly-formatter') 39 | } 40 | }, 41 | { 42 | test: /\.vue$/, 43 | loader: 'vue-loader', 44 | options: vueLoaderConfig 45 | }, 46 | { 47 | test: /\.js$/, 48 | loader: 'babel-loader', 49 | include: [resolve('src'), resolve('test')] 50 | }, 51 | { 52 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 53 | loader: 'url-loader', 54 | options: { 55 | limit: 10000, 56 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 57 | } 58 | }, 59 | { 60 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 61 | loader: 'url-loader', 62 | options: { 63 | limit: 10000, 64 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 65 | } 66 | }, 67 | { 68 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 69 | loader: 'url-loader', 70 | options: { 71 | limit: 10000, 72 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 73 | } 74 | } 75 | ] 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const fs = require('fs') 4 | const path = require('path') 5 | const utils = require('./utils') 6 | const webpack = require('webpack') 7 | const config = require('../config') 8 | const merge = require('webpack-merge') 9 | const baseWebpackConfig = require('./webpack.base.conf') 10 | const HtmlWebpackPlugin = require('html-webpack-plugin') 11 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 12 | 13 | // add hot-reload related code to entry chunks 14 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 15 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 16 | }) 17 | 18 | module.exports = merge(baseWebpackConfig, { 19 | module: { 20 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 21 | }, 22 | // cheap-module-eval-source-map is faster for development 23 | devtool: '#cheap-module-eval-source-map', 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': config.dev.env 27 | }), 28 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 29 | new webpack.HotModuleReplacementPlugin(), 30 | new webpack.NoEmitOnErrorsPlugin(), 31 | // https://github.com/ampedandwired/html-webpack-plugin 32 | new HtmlWebpackPlugin({ 33 | filename: 'index.html', 34 | template: 'index.html', 35 | inject: true, 36 | serviceWorkerLoader: `` 38 | }), 39 | new FriendlyErrorsPlugin() 40 | ] 41 | }) 42 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const fs = require('fs') 4 | const path = require('path') 5 | const utils = require('./utils') 6 | const webpack = require('webpack') 7 | const config = require('../config') 8 | const merge = require('webpack-merge') 9 | const baseWebpackConfig = require('./webpack.base.conf') 10 | const CopyWebpackPlugin = require('copy-webpack-plugin') 11 | const HtmlWebpackPlugin = require('html-webpack-plugin') 12 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 13 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 14 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin') 15 | const loadMinified = require('./load-minified') 16 | 17 | const env = process.env.NODE_ENV === 'testing' 18 | ? require('../config/test.env') 19 | : config.build.env 20 | 21 | const webpackConfig = merge(baseWebpackConfig, { 22 | module: { 23 | rules: utils.styleLoaders({ 24 | sourceMap: config.build.productionSourceMap, 25 | extract: true 26 | }) 27 | }, 28 | devtool: config.build.productionSourceMap ? '#source-map' : false, 29 | output: { 30 | path: config.build.assetsRoot, 31 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 32 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 33 | }, 34 | plugins: [ 35 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 36 | new webpack.DefinePlugin({ 37 | 'process.env': env 38 | }), 39 | new webpack.optimize.UglifyJsPlugin({ 40 | compress: { 41 | warnings: false 42 | }, 43 | sourceMap: true 44 | }), 45 | // extract css into its own file 46 | new ExtractTextPlugin({ 47 | filename: utils.assetsPath('css/[name].[contenthash].css') 48 | }), 49 | // Compress extracted CSS. We are using this plugin so that possible 50 | // duplicated CSS from different components can be deduped. 51 | new OptimizeCSSPlugin({ 52 | cssProcessorOptions: { 53 | safe: true 54 | } 55 | }), 56 | // generate dist index.html with correct asset hash for caching. 57 | // you can customize output by editing /index.html 58 | // see https://github.com/ampedandwired/html-webpack-plugin 59 | new HtmlWebpackPlugin({ 60 | filename: process.env.NODE_ENV === 'testing' 61 | ? 'index.html' 62 | : config.build.index, 63 | template: 'index.html', 64 | inject: true, 65 | minify: { 66 | removeComments: true, 67 | collapseWhitespace: true, 68 | removeAttributeQuotes: true 69 | // more options: 70 | // https://github.com/kangax/html-minifier#options-quick-reference 71 | }, 72 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 73 | chunksSortMode: 'dependency', 74 | serviceWorkerLoader: `` 76 | }), 77 | // split vendor js into its own file 78 | new webpack.optimize.CommonsChunkPlugin({ 79 | name: 'vendor', 80 | minChunks: function (module, count) { 81 | // any required modules inside node_modules are extracted to vendor 82 | return ( 83 | module.resource && 84 | /\.js$/.test(module.resource) && 85 | module.resource.indexOf( 86 | path.join(__dirname, '../node_modules') 87 | ) === 0 88 | ) 89 | } 90 | }), 91 | // extract webpack runtime and module manifest to its own file in order to 92 | // prevent vendor hash from being updated whenever app bundle is updated 93 | new webpack.optimize.CommonsChunkPlugin({ 94 | name: 'manifest', 95 | chunks: ['vendor'] 96 | }), 97 | // copy custom static assets 98 | new CopyWebpackPlugin([ 99 | { 100 | from: path.resolve(__dirname, '../static'), 101 | to: config.build.assetsSubDirectory, 102 | ignore: ['.*'] 103 | } 104 | ]), 105 | // service worker caching 106 | new SWPrecacheWebpackPlugin({ 107 | cacheId: 'my-vue-app', 108 | filename: 'service-worker.js', 109 | staticFileGlobs: ['dist/**/*.{js,html,css}'], 110 | minify: true, 111 | stripPrefix: 'dist/' 112 | }) 113 | ] 114 | }) 115 | 116 | if (config.build.productionGzip) { 117 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 118 | 119 | webpackConfig.plugins.push( 120 | new CompressionWebpackPlugin({ 121 | asset: '[path].gz[query]', 122 | algorithm: 'gzip', 123 | test: new RegExp( 124 | '\\.(' + 125 | config.build.productionGzipExtensions.join('|') + 126 | ')$' 127 | ), 128 | threshold: 10240, 129 | minRatio: 0.8 130 | }) 131 | ) 132 | } 133 | 134 | if (config.build.bundleAnalyzerReport) { 135 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 136 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 137 | } 138 | 139 | module.exports = webpackConfig 140 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | // This is the webpack config used for unit tests. 4 | 5 | const utils = require('./utils') 6 | const webpack = require('webpack') 7 | const merge = require('webpack-merge') 8 | const baseConfig = require('./webpack.base.conf') 9 | 10 | const webpackConfig = merge(baseConfig, { 11 | // use inline sourcemap for karma-sourcemap-loader 12 | module: { 13 | rules: utils.styleLoaders() 14 | }, 15 | devtool: '#inline-source-map', 16 | resolveLoader: { 17 | alias: { 18 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 19 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 20 | 'scss-loader': 'sass-loader' 21 | } 22 | }, 23 | plugins: [ 24 | new webpack.DefinePlugin({ 25 | 'process.env': require('../config/test.env') 26 | }) 27 | ] 28 | }) 29 | 30 | // no need for app entry during tests 31 | delete webpackConfig.entry 32 | 33 | module.exports = webpackConfig 34 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const merge = require('webpack-merge') 4 | const prodEnv = require('./prod.env') 5 | 6 | module.exports = merge(prodEnv, { 7 | NODE_ENV: '"development"' 8 | }) 9 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | const path = require('path') 5 | 6 | module.exports = { 7 | build: { 8 | env: require('./prod.env'), 9 | index: path.resolve(__dirname, '../dist/index.html'), 10 | assetsRoot: path.resolve(__dirname, '../dist'), 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | productionSourceMap: true, 14 | // Gzip off by default as many popular static hosts such as 15 | // Surge or Netlify already gzip all static assets for you. 16 | // Before setting to `true`, make sure to: 17 | // npm install --save-dev compression-webpack-plugin 18 | productionGzip: false, 19 | productionGzipExtensions: ['js', 'css'], 20 | // Run the build command with an extra argument to 21 | // View the bundle analyzer report after build finishes: 22 | // `npm run build --report` 23 | // Set to `true` or `false` to always turn it on or off 24 | bundleAnalyzerReport: process.env.npm_config_report 25 | }, 26 | dev: { 27 | env: require('./dev.env'), 28 | port: 8080, 29 | autoOpenBrowser: true, 30 | assetsSubDirectory: 'static', 31 | assetsPublicPath: '/', 32 | proxyTable: {}, 33 | // CSS Sourcemaps off by default because relative paths are "buggy" 34 | // with this option, according to the CSS-Loader README 35 | // (https://github.com/webpack/css-loader#sourcemaps) 36 | // In our experience, they generally work as expected, 37 | // just be aware of this issue when enabling this option. 38 | cssSourceMap: false 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const merge = require('webpack-merge') 4 | const devEnv = require('./dev.env') 5 | 6 | module.exports = merge(devEnv, { 7 | NODE_ENV: '"testing"' 8 | }) 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | my-vue-app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | <% for (var chunk of webpack.chunks) { 25 | for (var file of chunk.files) { 26 | if (file.match(/\.(js|css)$/)) { %> 27 | <% }}} %> 28 | 29 | 30 | 33 |
34 | 35 | <%= htmlWebpackPlugin.options.serviceWorkerLoader %> 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-vue-app", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "Brandon Parise ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 12 | "e2e": "node test/e2e/runner.js", 13 | "test": "npm run unit && npm run e2e", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "dependencies": { 17 | "@okta/jwt-verifier": "^2.1.0", 18 | "@okta/okta-auth-js": "^4.8.0", 19 | "@okta/okta-vue": "^3.1.0", 20 | "axios": "^0.21.2", 21 | "bootstrap": "^4.5.3", 22 | "bootstrap-vue": "^2.21.2", 23 | "cors": "^2.8.5", 24 | "finale-rest": "^1.1.1", 25 | "sequelize": "^6.6.2", 26 | "sqlite3": "^5.0.3", 27 | "vue": "^2.5.2", 28 | "vue-router": "^3.0.1" 29 | }, 30 | "devDependencies": { 31 | "autoprefixer": "^7.1.5", 32 | "babel-core": "^6.26.0", 33 | "babel-eslint": "^8.0.1", 34 | "babel-loader": "^7.1.2", 35 | "babel-plugin-istanbul": "^4.1.5", 36 | "babel-plugin-transform-runtime": "^6.23.0", 37 | "babel-preset-env": "^1.6.0", 38 | "babel-preset-stage-2": "^6.24.1", 39 | "babel-register": "^6.26.0", 40 | "chai": "^4.1.2", 41 | "chalk": "^2.1.0", 42 | "chromedriver": "^2.33.1", 43 | "connect-history-api-fallback": "^1.4.0", 44 | "copy-webpack-plugin": "^4.1.1", 45 | "cross-env": "^5.0.5", 46 | "cross-spawn": "^5.1.0", 47 | "css-loader": "^0.28.7", 48 | "cssnano": "^3.10.0", 49 | "eslint": "^4.9.0", 50 | "eslint-config-standard": "^10.2.1", 51 | "eslint-friendly-formatter": "^3.0.0", 52 | "eslint-loader": "^1.9.0", 53 | "eslint-plugin-html": "^3.2.2", 54 | "eslint-plugin-import": "^2.7.0", 55 | "eslint-plugin-node": "^5.2.0", 56 | "eslint-plugin-promise": "^3.6.0", 57 | "eslint-plugin-standard": "^3.0.1", 58 | "eventsource-polyfill": "^0.9.6", 59 | "express": "^4.17.1", 60 | "extract-text-webpack-plugin": "^3.0.0", 61 | "file-loader": "^1.1.5", 62 | "friendly-errors-webpack-plugin": "^1.6.1", 63 | "html-webpack-plugin": "^2.30.1", 64 | "http-proxy-middleware": "^0.17.4", 65 | "inject-loader": "^3.0.1", 66 | "karma": "^6.3.16", 67 | "karma-coverage": "^1.1.1", 68 | "karma-mocha": "^1.3.0", 69 | "karma-phantomjs-launcher": "^1.0.4", 70 | "karma-phantomjs-shim": "^1.5.0", 71 | "karma-sinon-chai": "^1.3.2", 72 | "karma-sourcemap-loader": "^0.3.7", 73 | "karma-spec-reporter": "0.0.31", 74 | "karma-webpack": "^2.0.5", 75 | "mocha": "^4.0.1", 76 | "nightwatch": "^0.9.16", 77 | "opn": "^5.1.0", 78 | "optimize-css-assets-webpack-plugin": "^3.2.0", 79 | "ora": "^1.3.0", 80 | "phantomjs-prebuilt": "^2.1.15", 81 | "rimraf": "^2.6.2", 82 | "selenium-server": "^3.6.0", 83 | "semver": "^5.4.1", 84 | "shelljs": "^0.8.5", 85 | "sinon": "^4.0.1", 86 | "sinon-chai": "^2.14.0", 87 | "sw-precache-webpack-plugin": "^0.11.4", 88 | "uglify-es": "^3.1.3", 89 | "url-loader": "^0.6.2", 90 | "vue-loader": "^13.3.0", 91 | "vue-style-loader": "^3.0.3", 92 | "vue-template-compiler": "^2.5.2", 93 | "webpack": "^3.7.1", 94 | "webpack-bundle-analyzer": "^3.3.2", 95 | "webpack-dev-middleware": "^1.12.0", 96 | "webpack-hot-middleware": "^2.19.1", 97 | "webpack-merge": "^4.1.0" 98 | }, 99 | "engines": { 100 | "node": ">= 4.0.0", 101 | "npm": ">= 3.0.0" 102 | }, 103 | "browserslist": [ 104 | "> 1%", 105 | "last 2 versions", 106 | "not ie <= 8" 107 | ] 108 | } 109 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/api.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import axios from 'axios' 3 | 4 | const client = axios.create({ 5 | baseURL: 'http://localhost:8081/', 6 | json: true 7 | }) 8 | 9 | export default { 10 | async execute (method, resource, data) { 11 | // inject the accessToken for each request 12 | let accessToken = await Vue.prototype.$auth.getAccessToken() 13 | return client({ 14 | method, 15 | url: resource, 16 | data, 17 | headers: { 18 | Authorization: `Bearer ${accessToken}` 19 | } 20 | }).then(req => { 21 | return req.data 22 | }) 23 | }, 24 | getPosts () { 25 | return this.execute('get', '/posts') 26 | }, 27 | getPost (id) { 28 | return this.execute('get', `/posts/${id}`) 29 | }, 30 | createPost (data) { 31 | return this.execute('post', '/posts', data) 32 | }, 33 | updatePost (id, data) { 34 | return this.execute('put', `/posts/${id}`, data) 35 | }, 36 | deletePost (id) { 37 | return this.execute('delete', `/posts/${id}`) 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /src/components/PostsManager.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 92 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import { BootstrapVue } from 'bootstrap-vue' 7 | import 'bootstrap/dist/css/bootstrap.css' 8 | import 'bootstrap-vue/dist/bootstrap-vue.css' 9 | 10 | Vue.use(BootstrapVue) 11 | Vue.config.productionTip = false 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | template: '', 18 | components: { App } 19 | }) 20 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Hello from '@/components/Hello' 4 | import PostsManager from '@/components/PostsManager' 5 | import OktaVue, { LoginCallback } from '@okta/okta-vue' 6 | import { OktaAuth } from '@okta/okta-auth-js' 7 | 8 | const oktaAuth = new OktaAuth({ 9 | issuer: 'https://{yourOktaDomain}/oauth2/default', 10 | clientId: '{yourClientId}', 11 | redirectUri: window.location.origin + '/callback', 12 | scopes: ['openid', 'profile', 'email'] 13 | }) 14 | 15 | Vue.use(Router) 16 | Vue.use(OktaVue, { oktaAuth }) 17 | 18 | let router = new Router({ 19 | mode: 'history', 20 | routes: [ 21 | { 22 | path: '/', 23 | name: 'Hello', 24 | component: Hello 25 | }, 26 | { 27 | path: '/callback', 28 | component: LoginCallback 29 | }, 30 | { 31 | path: '/posts-manager', 32 | name: 'PostsManager', 33 | component: PostsManager, 34 | meta: { 35 | requiresAuth: true 36 | } 37 | } 38 | ] 39 | }) 40 | 41 | export default router 42 | -------------------------------------------------------------------------------- /src/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const cors = require('cors') 3 | const bodyParser = require('body-parser') 4 | const Sequelize = require('sequelize') 5 | const finale = require('finale-rest') 6 | const OktaJwtVerifier = require('@okta/jwt-verifier') 7 | 8 | const oktaJwtVerifier = new OktaJwtVerifier({ 9 | clientId: '{yourClientId}', 10 | issuer: 'https://{yourOktaDomain}/oauth2/default' 11 | }) 12 | 13 | let app = express() 14 | app.use(cors()) 15 | app.use(bodyParser.json()) 16 | 17 | // verify JWT token middleware 18 | app.use((req, res, next) => { 19 | // require every request to have an authorization header 20 | if (!req.headers.authorization) { 21 | return next(new Error('Authorization header is required')) 22 | } 23 | let parts = req.headers.authorization.trim().split(' ') 24 | let accessToken = parts.pop() 25 | oktaJwtVerifier.verifyAccessToken(accessToken, 'api://default') 26 | .then(jwt => { 27 | req.user = { 28 | uid: jwt.claims.uid, 29 | email: jwt.claims.sub 30 | } 31 | next() 32 | }) 33 | .catch(next) // jwt did not verify! 34 | }) 35 | 36 | // For ease of this tutorial, we are going to use SQLite to limit dependencies 37 | let database = new Sequelize({ 38 | dialect: 'sqlite', 39 | storage: './test.sqlite' 40 | }) 41 | 42 | // Define our Post model 43 | // id, createdAt, and updatedAt are added by sequelize automatically 44 | let Post = database.define('posts', { 45 | title: Sequelize.STRING, 46 | body: Sequelize.TEXT 47 | }) 48 | 49 | // Initialize finale 50 | finale.initialize({ 51 | app: app, 52 | sequelize: database 53 | }) 54 | 55 | // Create the dynamic REST resource for our Post model 56 | let userResource = finale.resource({ 57 | model: Post, 58 | endpoints: ['/posts', '/posts/:id'] 59 | }) 60 | 61 | // Resets the database and launches the express app on :8081 62 | database 63 | .sync({ force: true }) 64 | .then(() => { 65 | app.listen(8081, () => { 66 | console.log('listening to port localhost:8081') 67 | }) 68 | }) 69 | -------------------------------------------------------------------------------- /static/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /static/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /static/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /static/img/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/favicon.ico -------------------------------------------------------------------------------- /static/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /static/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oktadev/okta-vue-node-example/0f3e26927827b201ee3be5ffda6c6e9c8963a33c/static/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /static/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-vue-app", 3 | "short_name": "my-vue-app", 4 | "icons": [ 5 | { 6 | "src": "/static/img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/static/img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2) 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']) 19 | } 20 | 21 | var spawn = require('cross-spawn') 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 23 | 24 | runner.on('exit', function (code) { 25 | server.close() 26 | process.exit(code) 27 | }) 28 | 29 | runner.on('error', function (err) { 30 | server.close() 31 | throw err 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js PWA') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf') 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' } 30 | ] 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from '@/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js PWA') 10 | }) 11 | }) 12 | --------------------------------------------------------------------------------