This app features
- Vue.js - a frontend framework
- Webpack - a tool to bundle your files
- vue-router - client-side routing
- Axios - a library to call your REST api
- vue-bootstrap which adds Twitter bootstrap v4 styling to the site
- Authentication with GitHub
Getting started
First make sure you have npm
and node.js
installed
Next, clone the boilerplate from GitHub:
git clone https://github.com/akeshavan/vue-auth-boilerplate
Then install all npm
packages:
cd vue-auth-boilerplate/my-app
npm install
To run the app, do:
npm run dev
And navigate to http://localhost:8080 (or wherever npm starts the server). As you make changes to your app, the browser will reload so you don't have to keep refreshing the page.
Setting up OAuth:
You need to set up oauth to your own server in order for this boilerplate to work.
Register a new application on GitHub
On your GitHub account, go to Settings > Developer Settings > OAuth Apps > New OAuth App.
Fill out the form, making sure that your Authorization callback URL is http://localhost:8080
.
Take note of the client_id
and client_secret
of your app.
Server side
Your server endpoint should be something like http://your_rest_api.com/authenticate/code
, where code is a string from GitHub that's procided by the client.
The server should return a JSON that looks like:
{"token": "secret_token_from_the_server"}
This token will be used for all future calls to your server. In this example, our server is the GitHub api.
If you don't have a server, then set one up with prose/gatekeeper and heroku
Your server needs to have the client_secret
handy.
Client side
In the src/config.js
file of this boilerplate app, edit it so that your client_id
and authentication endpoint authUrl
are correct.
export default {
authUrl: 'https://your_authentication_endpoint/',
clientId: 'your github client id',
redirectUri: 'http://localhost:8080', //eventually this will become your production url
};
Production
To build the app for production, do:
npm run build
Everything in the dist/
folder is your production app.