Skip to content

Commit ee2bd4d

Browse files
author
Matt Raible
authored
Update README with more info
1 parent 625dbcb commit ee2bd4d

File tree

1 file changed

+55
-46
lines changed

1 file changed

+55
-46
lines changed

README.md

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,94 @@
1-
# Simple CRUD with Vue.js and Spring Boot
2-
3-
This example app shows how to build a basic CRUD app with Spring Boot 2.1, Spring Data, and Vue.js.
1+
# Build a Simple CRUD App with Spring Boot and Vue.js
42

5-
Please read [Build a Simple CRUD App with Spring Boot and Vue.js](https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue) to see how this app was created.
3+
This example app shows how to build a CRUD app with Spring Boot 2.7, Spring Data, Quasar, and Vue.js.
64

7-
**Prerequisites:** [Java 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html), [Node.js](https://nodejs.org/), and [Yarn](https://yarnpkg.com/).
5+
Please read [Build a Simple CRUD App with Spring Boot and Vue.js](https://developer.okta.com/blog/2022/08/19/build-crud-spring-and-vue) to see how this app was created.
86

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.
7+
**Prerequisites:**
108

11-
* [Getting Started](#getting-started)
12-
* [Links](#links)
13-
* [Help](#help)
14-
* [License](#license)
9+
- [Java 11](https://adoptium.net/)
10+
- [Okta CLI](https://cli.okta.com/manual/#installation)
11+
- [Node 16+](https://nodejs.org)
1512

16-
## Getting Started
13+
You will need a free Okta Developer account if you don't already have one. You will be able to sign up for one in the instructions below using the Okta CLI.
14+
15+
## Clone and Configure the Project
1716

1817
To install this example application, run the following commands:
1918

2019
```bash
21-
git clone https://github.com/oktadeveloper/okta-spring-boot-vue-crud-example.git
22-
cd okta-spring-boot-vue-crud-example
20+
git clone https://github.com/oktadev/okta-spring-boot-vue-crud-example.git spring-boot-vue
21+
cd spring-boot-vue
2322
```
2423

25-
This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.
24+
If you do not already have a free Okta developer account, use the CLI to create one (`okta register`). Otherwise, log in (`okta login`).
2625

27-
To run the server, cd into the `server` folder and run:
28-
29-
```bash
30-
./gradlew bootRun
31-
```
26+
Once you are registered and logged in, create a new OIDC application.
3227

33-
To run the client, cd into the `client` folder and run:
34-
3528
```bash
36-
yarn install && yarn run serve
29+
okta apps create
3730
```
3831

39-
### Create a New OIDC App in Okta
32+
- The default name is fine.
33+
34+
- Select **2: Single Page App**
4035

41-
To create a new OIDC app on Okta:
36+
- The default redirect URIs are fine.
4237

43-
1. Log in to your developer account, navigate to **Applications**, and click on **Add Application**.
44-
3. Select **Single-Page App** and click **Next**.
45-
4. Give the application a name and click **Done**.
38+
You need to put the **Issuer** and **Client ID** into two places. The first is to configure the Spring Boot API. The second configures the Vue client. Replace the bracketed values below with the values from the Okta CLI output.
4639

47-
#### Server Configuration
40+
`resource-server/src/main/resources/application.properties`
4841

49-
Set your domain and copy the `clientId` into `server/src/main/resources/application.yml`.
42+
```properties
43+
server.port=9000
44+
okta.oauth2.issuer=https://<your-okta-domain>/oauth2/default
45+
okta.oauth2.clientId=<your-client-id>
46+
```
47+
48+
You'll also need to update the `.env` file in the client project.
5049

51-
**NOTE:** The value of `{yourOktaDomain}` should be something like `dev-123456.oktapreview`. Make sure you don't include `-admin` in the value!
50+
`client/.env`
5251

53-
```yaml
54-
okta:
55-
oauth2:
56-
client-id: {yourClientId}
57-
issuer: https://{yourOktaDomain}/oauth2/default
52+
```env
53+
VUE_APP_CLIENT_ID=<your-client-id>
54+
VUE_APP_ISSUER_URI=<your-issuer-uri>
55+
VUE_APP_SERVER_URI=http://localhost:9000
5856
```
5957

60-
#### Client Configuration
58+
## Start the App
6159

62-
For the client, set the `issuer` and copy the `clientId` into `client/src/router.js`.
60+
To start the API, open a Bash shell and navigate to the `resource-server` subdirectory.
6361

64-
```js
65-
Vue.use(Auth, {
66-
issuer: 'https://{yourOktaDomain}/oauth2/default',
67-
client_id: '{yourClientId}',
68-
redirect_uri: window.location.origin + '/implicit/callback',
69-
scope: 'openid profile email'
70-
});
62+
```bash
63+
./gradlew bootRun
7164
```
7265

66+
To start the client, open another Bash shell and navigate to the `client` subdirectory.
67+
68+
Install the dependencies.
69+
70+
```bash
71+
npm install
72+
```
73+
74+
Start the client.
75+
76+
```bash
77+
npm run serve
78+
```
79+
80+
Open a browser to `http://localhost:8080`.
81+
7382
## Links
7483

7584
This example uses the following open source libraries from Okta:
7685

7786
* [Okta Spring Boot Starter](https://github.com/okta/okta-spring-boot)
78-
* [Okta Vue SDK](https://github.com/okta/okta-oidc-js/tree/master/packages/okta-vue)
87+
* [Okta Vue SDK](https://github.com/okta/okta-vue)
7988

8089
## Help
8190

82-
Please post any questions as comments on the [blog post](https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue), or visit our [Okta Developer Forums](https://devforum.okta.com/). You can also email developers@okta.com if would like to create a support ticket.
91+
Please post any questions as comments on the [blog post](https://developer.okta.com/blog/2022/08/19/build-crud-spring-and-vue), or visit our [Okta Developer Forums](https://devforum.okta.com/).
8392

8493
## License
8594

0 commit comments

Comments
 (0)