Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mraible/javaone2017-jhipster-demo
Blog application created during my JHipster talk at JavaOne 2017
https://github.com/mraible/javaone2017-jhipster-demo
angular cloudfoundry heroku java javaone jhipster spring-boot typescript
Last synced: 29 days ago
JSON representation
Blog application created during my JHipster talk at JavaOne 2017
- Host: GitHub
- URL: https://github.com/mraible/javaone2017-jhipster-demo
- Owner: mraible
- Created: 2017-10-04T00:52:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-04T00:52:43.000Z (over 7 years ago)
- Last Synced: 2024-10-16T11:41:10.939Z (3 months ago)
- Topics: angular, cloudfoundry, heroku, java, javaone, jhipster, spring-boot, typescript
- Language: Java
- Homepage:
- Size: 363 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# blog
This application was generated using JHipster 4.9.0, you can find documentation and help at [http://www.jhipster.tech/documentation-archive/v4.9.0](http://www.jhipster.tech/documentation-archive/v4.9.0).
## Development
Before you can build this project, you must install and configure the following dependencies on your machine:
1. [Node.js][]: We use Node to run a development web server and build the project.
Depending on your system, you can install Node either from source or as a pre-packaged bundle.
2. [Yarn][]: We use Yarn to manage Node dependencies.
Depending on your system, you can install Yarn either from source or as a pre-packaged bundle.
After installing Node, you should be able to run the following command to install development tools.
You will only need to run this command when dependencies change in [package.json](package.json).
yarn install
We use yarn scripts and [Webpack][] as our build system.
Run the following commands in two separate terminals to create a blissful development experience where your browser
auto-refreshes when files change on your hard drive.
./mvnw
yarn start
[Yarn][] is also used to manage CSS and JavaScript dependencies used in this application. You can upgrade dependencies by
specifying a newer version in [package.json](package.json). You can also run `yarn update` and `yarn install` to manage dependencies.
Add the `help` flag on any command to see how you can use it. For example, `yarn help update`.
The `yarn run` command will list all of the scripts available to run for this project.
## OAuth 2.0 / OpenID Connect
Congratulations! You've selected an excellent way to secure your JHipster application. If you're not sure what OAuth and OpenID Connect (OIDC) are, please see [What the Heck is OAuth?](https://developer.okta.com/blog/2017/06/21/what-the-heck-is-oauth)
To log in to your app, you'll need to have [Keycloak](https://keycloak.org) up and running. The JHipster Team has created a Docker container for you that has the default users and roles. You can see [the settings for Keycloak on GitHub](https://github.com/danielpetisme/jhipster-keycloak). Start Keycloak using the following command.
```
docker-compose -f src/main/docker/keycloak.yml up
```
The security settings in `src/main/resources/application.yml` are configured for this image.
```yaml
oauth2.issuer: http://localhost:9080/auth/realms/jhipster
security:
basic:
enabled: false
oauth2:
client:
accessTokenUri: ${oauth2.issuer}/protocol/openid-connect/token
userAuthorizationUri: ${oauth2.issuer}/protocol/openid-connect/auth
clientId: web_app
clientSecret: web_app
clientAuthenticationScheme: form
scope: openid profile email
resource:
userInfoUri: ${oauth2.issuer}/protocol/openid-connect/userinfo
tokenInfoUri: ${oauth2.issuer}/protocol/openid-connect/token/introspectr
preferTokenInfo: false
```
### Okta
If you'd like to use Okta instead of Keycloak, you'll need to change a few things. First, you'll need to create a free developer account at . After doing so, you'll get your own Okta instance, that has a name like `https://dev-123456.oktapreview.com`.
Modify `src/main/resources/application.yml` to use your Okta settings.
```yaml
oauth2.issuer: https://dev-123456.oktapreview.com/oauth2/default
security:
basic:
enabled: false
oauth2:
client:
accessTokenUri: ${oauth2.issuer}/v1/token
userAuthorizationUri: ${oauth2.issuer}/v1/authorize
clientId: {clientId}
clientSecret: {clientSecret}
clientAuthenticationScheme: form
scope: openid profile email
resource:
userInfoUri: ${oauth2.issuer}/v1/userinfo
tokenInfoUri: ${oauth2.issuer}/v1/introspect
preferTokenInfo: false
```
Create an OIDC App in Okta to get a `{clientId}` and `{clientSecret}`. To do this, log in to your Okta Developer account and navigate to **Applications** > **Add Application**. Click **Web** and click the Next button. Give the app a name you’ll remember, and specify "http://localhost:8080" as a Base URI and Login Redirect URI. Click **Done** and copy the client ID and secret into your `application.yml` file.
Create a `ROLE_ADMIN` and `ROLE_USER` group and add users into them. Create a user with username "[email protected]" and password "Java is hip in 2017!". Modify e2e tests to use this account when running integration tests. You'll need to change credentials in `src/test/javascript/e2e/account/account.spec.ts` and `src/test/javascript/e2e/admin/administration.spec.ts`.
Navigate to **API** > **Authorization Servers**, click the **Authorization Servers** tab and edit the default one. Click the **Claims** tab and **Add Claim**. Name it "groups" or "roles", and include it in the ID Token. Set the value type to "Groups" and set the filter to be a Regex of `.*`.
After making these changes, you should be good to go! If you have any issues, please post them to [Stack Overflow](https://stackoverflow.com/questions/tagged/jhipster). Make sure to tag your question with "jhipster" and "okta".
### Service workers
Service workers are commented by default, to enable them please uncomment the following code.
* The service worker registering script in index.html
```
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js')
.then(function() { console.log('Service Worker Registered'); });
}
```
* The copy file option in webpack-common.js
```js
{ from: './src/main/webapp/sw.js', to: 'sw.js' },
```
Note: Add the respective scripts/assets in `sw.js` that is needed to be cached.
### Managing dependencies
For example, to add [Leaflet][] library as a runtime dependency of your application, you would run following command:
yarn add --exact leaflet
To benefit from TypeScript type definitions from [DefinitelyTyped][] repository in development, you would run following command:
yarn add --dev --exact @types/leaflet
Then you would import the JS and CSS files specified in library's installation instructions so that [Webpack][] knows about them:
Edit [src/main/webapp/app/vendor.ts](src/main/webapp/app/vendor.ts) file:
~~~
import 'leaflet/dist/leaflet.js';
~~~
Edit [src/main/webapp/content/css/vendor.css](src/main/webapp/content/css/vendor.css) file:
~~~
@import '~leaflet/dist/leaflet.css';
~~~
Note: there are still few other things remaining to do for Leaflet that we won't detail here.
For further instructions on how to develop with JHipster, have a look at [Using JHipster in development][].
### Using angular-cli
You can also use [Angular CLI][] to generate some custom client code.
For example, the following command:
ng generate component my-component
will generate few files:
create src/main/webapp/app/my-component/my-component.component.html
create src/main/webapp/app/my-component/my-component.component.ts
update src/main/webapp/app/app.module.ts
## Building for production
To optimize the blog application for production, run:
./mvnw -Pprod clean package
This will concatenate and minify the client CSS and JavaScript files. It will also modify `index.html` so it references these new files.
To ensure everything worked, run:
java -jar target/*.war
Then navigate to [http://localhost:8080](http://localhost:8080) in your browser.
Refer to [Using JHipster in production][] for more details.
## Testing
To launch your application's tests, run:
./mvnw clean test
### Client tests
Unit tests are run by [Karma][] and written with [Jasmine][]. They're located in [src/test/javascript/](src/test/javascript/) and can be run with:
yarn test
For more information, refer to the [Running tests page][].
## Using Docker to simplify development (optional)
You can use Docker to improve your JHipster development experience. A number of docker-compose configuration are available in the [src/main/docker](src/main/docker) folder to launch required third party services.
For example, to start a postgresql database in a docker container, run:
docker-compose -f src/main/docker/postgresql.yml up -d
To stop it and remove the container, run:
docker-compose -f src/main/docker/postgresql.yml down
You can also fully dockerize your application and all the services that it depends on.
To achieve this, first build a docker image of your app by running:
./mvnw package -Pprod dockerfile:build
Then run:
docker-compose -f src/main/docker/app.yml up -d
For more information refer to [Using Docker and Docker-Compose][], this page also contains information on the docker-compose sub-generator (`jhipster docker-compose`), which is able to generate docker configurations for one or several JHipster applications.
## Continuous Integration (optional)
To configure CI for your project, run the ci-cd sub-generator (`jhipster ci-cd`), this will let you generate configuration files for a number of Continuous Integration systems. Consult the [Setting up Continuous Integration][] page for more information.
[JHipster Homepage and latest documentation]: http://www.jhipster.tech
[JHipster 4.9.0 archive]: http://www.jhipster.tech/documentation-archive/v4.9.0
[Using JHipster in development]: http://www.jhipster.tech/documentation-archive/v4.9.0/development/
[Using Docker and Docker-Compose]: http://www.jhipster.tech/documentation-archive/v4.9.0/docker-compose
[Using JHipster in production]: http://www.jhipster.tech/documentation-archive/v4.9.0/production/
[Running tests page]: http://www.jhipster.tech/documentation-archive/v4.9.0/running-tests/
[Setting up Continuous Integration]: http://www.jhipster.tech/documentation-archive/v4.9.0/setting-up-ci/
[Node.js]: https://nodejs.org/
[Yarn]: https://yarnpkg.org/
[Webpack]: https://webpack.github.io/
[Angular CLI]: https://cli.angular.io/
[BrowserSync]: http://www.browsersync.io/
[Karma]: http://karma-runner.github.io/
[Jasmine]: http://jasmine.github.io/2.0/introduction.html
[Protractor]: https://angular.github.io/protractor/
[Leaflet]: http://leafletjs.com/
[DefinitelyTyped]: http://definitelytyped.org/