Vaadin in WordPress: Best of both worlds?

While exploring embedding Vaadin, I stumbled upon an interesting article about using web components in WordPress: Using Web Components in WordPress is Easier Than You Think. This got me thinking that running Vaadin in WordPress should be a breeze! After all, Vaadin apps are web components, and you only need three things:

1. Add Access-Control-Allow-Origin header to the Vaadin application wherever it runs.
2. In WordPress, import the web component module by adding the JS to the header: 

<script type="module" src="https://mysite.com/web-component/newsletter-subscription.js"></script>

3. Use the application as a normal HTML element: 

<newsletter-subscription></newsletter-subscription>

Simple, right? I have covered this in more detail in my previous blog post: Embedding Java apps on websites without third-party cookies. If you are running a WordPress website, this article covers the setup in more detail. 

WordPress and plugins needed

If you haven’t got WordPress up and running already, you need to start by installing it. Here is a simple way to set it up locally using Docker Compose. This is the docker-compose.yml that I used:

# Create a working directory
mkdir wordpress && cd wordpress

# Copy-paste the file content
cat > docker-compose.yml

# Start services
docker compose up -d

Now, we can start embedding and integrating the remote Vaadin Java application. Most instructions detail how to build web components into WordPress itself, but in this case, we don't need that. We just load the component remotely and insert it dynamically. 

To be able to do that we need to insert a script into the page. This is not natively supported, but there are some WordPress plugins for JavaScript management:

• WPCode
• Simple Custom CSS and JS
• Header Footer Code Management

I used Simple Custom CSS and JS to install the Vaadin application as a web component on the page.
Later on the page, I just added the HTML snippet to the page by inserting a Custom HTML. 

In my sample case, the application was exported as newsletter-subscription.

This should be all you need. The loader inserted in the header fetches the web component implementation of the Vaadin application, and then you can just use it on your webpage.

While the integration is seamless, there are a few things to keep in mind:

• Chrome does not support remote embedding on localhost by default. I found a way to get around that by disabling features and starting Chrome with the parameters: --disable-web-security --user-data-dir="/tmp/test-data-dir"
• Styles by default follow the hosting page, and some, depending on component and CSS precedence, might affect how your components look. 
• Notifications and loading indicators show up in the context of the hosting page. This is probably how you want them, but from a user perspective, it looks like being outside the Vaadin app.

Vaadin in WordPress: Valid use cases

When should you use an approach like this? The sample here is just a subscription form, and WordPress already offers plenty of widgets to choose from. However, sometimes, you might need a way to include business functionality from a private Java backend that you can't expose to the website. Being a server-side framework, Vaadin Flow makes a great choice for this. 

Here are some example scenarios:

Custom admin dashboards

When your WordPress site requires custom admin dashboards with complex reporting logic that relies on a Java backend and database, embedding a Vaadin app can provide an interactive experience without compromising on security.

Secure user portals

If you need to provide users with a portal where they can log in, access sensitive information, and perform actions that need server-side validation, a Vaadin application in the WordPress website can handle the heavy lifting on the backend.

Complex forms and workflows

For scenarios involving complex forms and workflows that require server-side processing and validation, embedding a Vaadin app can simplify the process. This could be something like job applications, loan processing, or multi-step registration forms.

Final thoughts

These are just a few ideas for embedding a remote Vaadin application. By embedding Vaadin applications into WordPress, you can harness the power of Java server-side logic while enjoying WordPress's flexibility and ease of use. Whether you're creating custom admin dashboards, secure user portals, or handling complex workflows, this approach provides a robust solution for integrating advanced functionality into your website. Happy coding!

Have you embedded Vaadin in WordPress? Share your experience in the comments or join the discussion on the Vaadin Forum.