Skip to content

Commit f8027dd

Browse files
akeshavanakeshavan
committed
doc: adding documentation
1 parent 0febb92 commit f8027dd

File tree

4 files changed

+114
-21
lines changed

4 files changed

+114
-21
lines changed

‎my-app/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
66
<title>my-app</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">
8+
<link rel="stylesheet" href="https://unpkg.com/katex@0.6.0/dist/katex.min.css">
79
</head>
810
<body>
911
<div id="app"></div>
1012
<!-- built files will be auto injected -->
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
1114
</body>
1215
</html>

‎my-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
"path.join": "^1.0.0",
2121
"store": "^2.0.12",
2222
"vue": "^2.5.2",
23-
"vue-authenticate": "^1.3.4",
2423
"vue-axios": "^2.0.2",
24+
"vue-markdown": "^2.2.4",
2525
"vue-router": "^3.0.1"
2626
},
2727
"devDependencies": {

‎my-app/src/App.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@
4949
</b-navbar>
5050

5151
<!-- The content is in the router view -->
52-
<router-view :isAuthenticated="isAuthenticated" :userInfo="userInfo"/>
52+
<div class="router">
53+
<router-view :isAuthenticated="isAuthenticated" :userInfo="userInfo"/>
54+
</div>
5355

5456
</div>
5557
</template>
@@ -135,4 +137,8 @@ export default {
135137
text-align: center;
136138
color: #2c3e50;
137139
}
140+
141+
.router {
142+
padding-top: 40px;
143+
}
138144
</style>

‎my-app/src/components/Home.vue

Lines changed: 103 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,107 @@
11
<template>
2-
<div class="hello">
3-
<h1>{{ msg }}</h1>
4-
<h2>Essential Links</h2>
5-
<ul>
6-
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
7-
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
8-
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
9-
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10-
<br>
11-
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12-
</ul>
13-
<h2>Ecosystem</h2>
14-
<ul>
15-
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16-
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17-
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18-
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19-
</ul>
2+
<div class="home container">
3+
<h1>{{msg}}</h1>
4+
<vue-markdown>This app features
5+
6+
* [Vue.js]() - a frontend framework
7+
* [Webpack]() - a tool to bundle your files
8+
* [vue-router]() - client-side routing
9+
* [Axios]() - a library to call your REST api
10+
* [vue-bootstrap]() which adds [Twitter bootstrap v4]() styling to the site
11+
* Authentication with [GitHub]()
12+
13+
### Getting started
14+
15+
First make sure you have [`npm` and `node.js`](https://nodejs.org/en/download/) installed
16+
17+
Next, clone the boilerplate from GitHub:
18+
19+
```bash
20+
git clone https://github.com/akeshavan/vue-auth-boilerplate
21+
```
22+
23+
Then install all `npm` packages:
24+
25+
```bash
26+
cd vue-auth-boilerplate/my-app
27+
npm install
28+
```
29+
30+
To run the app, do:
31+
32+
```bash
33+
npm run dev
34+
```
35+
36+
And navigate to [http://localhost:8080](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.
37+
38+
### Setting up OAuth:
39+
40+
You need to set up oauth to your own server in order for this boilerplate to work.
41+
42+
#### Register a new application on GitHub
43+
44+
On your GitHub account, go to Settings > Developer Settings > OAuth Apps > New OAuth App.
45+
Fill out the form, making sure that your **Authorization callback URL** is `http://localhost:8080`.
46+
Take note of the `client_id` and `client_secret` of your app.
47+
48+
#### Server side
49+
50+
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.
51+
52+
The server should return a JSON that looks like:
53+
54+
```js
55+
{"token": "secret_token_from_the_server"}
56+
```
57+
58+
This token will be used for all future calls to your server. In this example, our server is the GitHub api.
59+
60+
If you don't have a server, then set one up with [prose/gatekeeper and heroku](https://github.com/prose/gatekeeper#heroku-button)
61+
62+
Your server needs to have the `client_secret` handy.
63+
64+
#### Client side
65+
66+
In the `src/config.js` file of this boilerplate app, edit it so that your `client_id` and authentication endpoint `authUrl` are correct.
67+
68+
```js
69+
export default {
70+
authUrl: 'https://your_authentication_endpoint/',
71+
clientId: 'your github client id',
72+
redirectUri: 'http://localhost:8080', //eventually this will become your production url
73+
};
74+
```
75+
76+
### Production
77+
78+
To build the app for production, do:
79+
80+
```bash
81+
npm run build
82+
```
83+
84+
Everything in the `dist/` folder is your production app.
85+
86+
</vue-markdown>
87+
2088
</div>
89+
90+
2191
</template>
2292

2393
<script>
94+
import VueMarkdown from 'vue-markdown'
95+
2496
export default {
2597
name: 'Home',
98+
components: {
99+
VueMarkdown,
100+
},
26101
data() {
27102
return {
28-
msg: 'Welcome to Your Vue.js App',
103+
msg: 'Welcome to your Vue app boilerplate',
104+
content: '\ni am a ~~tast~~ **test**. `foo = bar`',
29105
};
30106
},
31107
};
@@ -47,4 +123,12 @@ li {
47123
a {
48124
color: #42b983;
49125
}
126+
.home {
127+
text-align: left;
128+
}
129+
130+
.home h1 {
131+
text-align: center;
132+
}
133+
50134
</style>

0 commit comments

Comments
 (0)