Getting started with User Profile

This guide explains two ways to start using User Profile: generating a new application with User Profile already integrated, or integrating it by hand into an existing application.

Quick Start with Craft

The fastest way to try User Profile is to generate a new application with Craft, the AppJars project generator. Craft produces a runnable Spring Boot and Vaadin project with User Profile already integrated, so none of the manual integration steps are needed.

1. Open craft.appjars.com and select the User Profile card in the Modules section. Other AppJars can be selected as well; Craft wires them together.
2. Adjust the Project and Appearance settings if needed, and click Download project.
3. Extract the downloaded archive and run docker compose up -d from the extracted folder. The first start takes a few minutes while the application image is built. To run the application with Maven instead, run mvn spring-boot:run.
4. Open http://localhost:8080; the User Profile views are in the navigation drawer.

When User Manager is selected as well, the profile views attach to the signed-in User Manager account.

Unless User Manager or Issue Tracker is selected as well, the generated application has no login page and every view is accessible without signing in.

The Craft Project Generator page describes every option and the contents of the generated project. Continue with Testing the Application to try User Profile.

Manual Integration

Prepare the Application

The following steps integrate User Profile into an existing Spring Boot and Vaadin application. To follow them from a blank application, open Craft, leave every module unselected, and click Download project. Extract the archive, import it into your IDE of choice, and verify the application starts correctly by running the main class. A project generated by Craft already declares the AppJars repository, so the next step can be skipped.

Add the AppJars Repository

AppJars artifacts are published to the public AppJars Maven repository. Add it to your pom.xml so that Maven can resolve the AppJars dependencies:

<repositories>
    <repository>
        <id>appjars</id>
        <name>AppJars Public Repository</name>
        <url>https://maven.appjars.com</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>

Add the Dependencies

Given that it is a monolithic application, the following dependencies representing the three layers of the appjar must be added:

<dependency>
    <groupId>com.appjars</groupId>
    <artifactId>appjars-user-profile-flow</artifactId>
</dependency>
<dependency>
    <groupId>com.appjars</groupId>
    <artifactId>appjars-user-profile-data-impl</artifactId>
</dependency>
<dependency>
    <groupId>com.appjars</groupId>
    <artifactId>appjars-user-profile-business-impl</artifactId>
</dependency>

After adding them, build the application to confirm that the dependencies are resolved correctly.

Modifying the Main Application Class

The following annotation must be added to the main application class to include the User Profile auto-configuration and its Spring components:

@ComponentScan(basePackageClasses = {UserProfileAutoConfiguration.class, AppJarsAutoConfiguration.class, Application.class})

• @ComponentScan: Instructs Spring to load the beans provided by the appjar as well as the beans of the application itself.

Then inject the RouteConfigurer provided by User Profile and configure the router layout in a @PostConstruct method so that the appjar views share the same layout as the rest of the application:

@Autowired
RouteConfigurer routeConfigurer;

@PostConstruct
public void configure() {
    routeConfigurer.setViewsRouterLayout(MainLayout.class);
}

The import for RouteConfigurer is com.appjars.userprofile.flow.util.RouteConfigurer.

Add the Views to the Navigation

Add the User Profile views to the application's navigation menu. Insert the following snippet at the end of the method createNavigation() in MainLayout, before returning nav:

if (accessChecker.hasAccess(UserProfileView.class)) {
    nav.addItem(new SideNavItem("My Profile", UserProfileView.class, LineAwesomeIcon.USER_CIRCLE.create()));
}
if (accessChecker.hasAccess(ProfilesListView.class)) {
    nav.addItem(new SideNavItem("Profiles", ProfilesListView.class, LineAwesomeIcon.ADDRESS_CARD_SOLID.create()));
}

The imports for the view classes are:

• com.appjars.userprofile.flow.view.UserProfileView
• com.appjars.userprofile.flow.view.ProfilesListView

Configure Application Properties

Add the following properties to application.properties:

spring.jpa.hibernate.ddl-auto=update
spring.jpa.generate-ddl=true

User Profile supports avatar image uploads. The profile form accepts images of up to 10 MB, so raise the Spring multipart limits to match:

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

Finally, add com.flowingcode and com.appjars to the list of allowed packages in application.properties:

vaadin.allowed-packages = com.vaadin,org.vaadin,dev.hilla,com.example.demo,com.flowingcode,com.appjars

Testing the Application

Start the application by running the main Spring Boot class. After it starts, log in and navigate to My Profile in the menu to view and edit your own profile.

The Profiles menu item provides access to the full profile management view. Both views are annotated with @PermitAll, so the appjar makes them available to any authenticated user: restricting the management view to administrators is a decision of the application. Add the corresponding rule to the application security configuration, and guard the menu item accordingly.