Build a Photo Gallery PWA with React, Spring Boot, and JHipster
This post shows you how to build a photo gallery progressive web app with Spring Boot, React, and JHipster 5. It uses OAuth’s authorization code for authorization and OIDC for authentication. It extracts EXIF metadata from images, and displays them on the UI in a flexible grid format like Flickr does.
Marcus Rosa Pereira
Very good article.
Just a small correction: jHipster has a web interface, as well as it’s Spring Initializr, so that it’s not need to download it’s cli creator.
js DNL mrls RS
Hi!!!
It’s an awesome utility, I started to play with it, but unfortunately it throws an error on ‘yarn e2e’ command, Do you have some suggest?
Greetings,
Matt Raible
Running yarn e2e works on my machine. I had to do the following steps before running it:
1. Run yarn webpack:build so the React UI will be transpiled.
2. Run ./mvnw in one terminal.
3. Run docker-compose src/main/docker/keycloak.yml up in another terminal.
4. Run yarn e2e in a third terminal.
NOTE: If you have PostgreSQL installed on your machine, you may need to modify keycloak.yml to force it to use H2. This is a bug in Keycloak v4, which we fixed in JHipster 5.0.2.
js DNL mrls RS
Awesome!!! It lives, thanks Matt
TalG
had some issues with the yarn e2e part so im just leaving the solution here incase anyone else needs it:
when sudo yarn e2e I got the following error:
WebDriverError: unknown error: DevToolsActivePort file doesn’t exist
So I installed the chrome dependencies:
# Install dependencies.
sudo apt-get update
sudo apt-get install -y unzip openjdk-8-jre-headless xvfb libxi6 libgconf-2-4
and then I run yarn e2e (without sudo!) - and got the following error:
E/launcher - Error: Error: EACCES: permission denied, open '/tmp/ts-node-83664a171b996f6b47b27940c0e540adb38adffecc1f827bd3d8f57934963ed3/2497da76d71a693fc309ca76f7cea103df61078c4d815af0552ff9b08e991fe5/940b241aae25b0ad4670cdd0343cfd0879f9ebeb2b8b84cff95122dfbe180ce0.js’
so then I just:
/tmp$ sudo chown -R notSudoUserName:notSudoUserName ts-node-83664a171b996f6b47b27940c0e540adb38adffecc1f827bd3d8f57934963ed3
and then yarn e2e again (no sudo!) and it all worked.
Miguel Duran
I ran into some errors in the “Create Entities” section. When I ran jhipster import-jdl, there are 9 errors that all look like this:
ERROR in /home/miguel/workspace/gallery/src/main/webapp/app/entities/album/album-delete-dialog.tsx
(12,97): Type ‘{ id: number; }’ does not satisfy the constraint ‘{ id?: string; }’.
Types of property ‘id’ are incompatible.
Type ‘number’ is not assignable to type ‘string’.
Matt Raible
What version of JHipster are you using? Can you try the latest release (5.3.4)?
Miguel Duran
I was using 5.0.1 as recommended in the guide, and upgrading fixed it, thanks!
lime
for your information this is the problem solved by the last release of Jhipster:
Guido Zockoll
Hi,
thanks for sharing. That helped me alot about handling photos in JHipster.
Is there a way to get the original filename of the photo?
Matt Raible
I image it’s possible, but you’d have to store the value in a separate (hidden) field when the user first selects it. We do this now with the setFileData() method. You can find the source of that method in react-jhipster.
Jacek
Hi Matt,
could you prepare a tutorial to show how to configure JHipster with Azure AD B2C instead of Okta? I prefer Okta but unfortunately not our customer…
Regards,
Jacek
Matt Raible
Hello Jacek: I doubt Okta would pay me to write that tutorial. 
If Azure AD B2C supports OAuth 2.0 and OIDC, it should be possible to set environment variables that point to the various endpoints. For example, here’s what I use to configure a JHipster app to use Okta:
export SECURITY_OAUTH2_CLIENT_ACCESS_TOKEN_URI="https://dev-737523.oktapreview.com/oauth2/default/v1/token"
export SECURITY_OAUTH2_CLIENT_USER_AUTHORIZATION_URI="https://dev-737523.oktapreview.com/oauth2/default/v1/authorize"
export SECURITY_OAUTH2_RESOURCE_USER_INFO_URI="https://dev-737523.oktapreview.com/oauth2/default/v1/userinfo"
export SECURITY_OAUTH2_CLIENT_CLIENT_ID="XXX"
export SECURITY_OAUTH2_CLIENT_CLIENT_SECRET=“YYY”
Jacek
Thanks Matt,
I try to find matching variables on Azure.
Jacek
Hi Matt again,
the customer has agreed to use Okta!
Could you point a tutorial how to customize and localize the Okta login page? You know, own logo, own background picture, some additional texts and the language of the login page matches the language set in JHipster app before login action.
Regards,
Jacek
Matt Raible
Hello Jacek - great news! Sorry for the delayed response. Our live widget demo is a good way to learn how to customize the sign-in widget.
sumanpatra
Hi Matt,
Are ImageBlob have any side effects , should I store images in S3 …
Matt Raible
JHipster stores ImageBlog’s as base64 strings. You could modify the code to upload to S3, but I’m not sure if it’s necessary. If you did do that, you’ll probably want to change things so you saved the S3 URL in your database. Uploading files to AWS S3 Bucket using Spring Boot might help.