# Running a Blueprint Generated Microservices and Micro Frontend in Local Dev

This tutorial will take you through running an Entando microservice and micro frontend in a local development environment. If you haven't generated your Entando Plugin yet start with the Generate Microservice and Micro Frontend tutorial and then run these steps.

All of the steps below assume you are in the directory where you generated your Entando Plugin

# Start Keycloak using docker-compose

  1. Startup the Keycloak server:

    docker-compose -f src/main/docker/keycloak.yml up

# Notes:

if you have to install docker compose you can follow this guide: https://docs.docker.com/compose/install/ (opens new window)

# Start the microservice

  1. Start the generated Microservice executing the command:

    ./mvnw

# Notes:

If you want to reset the widget data (as example if you deleted all rows from the table widget) if during the generation of the microservice you selected "H2 with disk-based persistence" you can delete the target folder, restart the microservice and the data will be regenerated.

# Start the table widget

Now you can start your generated table widget:

  1. Go to the table widget folder in your project:

    cd ui/widgets/<your-entity-name>/tableWidget

  2. Then install and start your widget executing the command:

    npm install && npm start

  3. When the widget is started a browser window is opened and the widget URL is loaded

  4. If you’re not logged in you’re redirected to the login page.

  5. Log in using:

    Username: user
Password: user

  6. After the login process you’ll be redirected to the widget page and you can see the table widget with some generated data.

# Start the form widget

Now you can start your generated form widget:

  1. If you are running another widget, stop it clicking Ctrl+C in your widget command line window

  2. Go to the form widget folder in your project:

    cd ui/widgets/<your-entity-name>/formWidget

  3. Then install and start your widget executing the command:

    npm install && npm start

  4. When the widget is started a browser window is opened with and the widget URL is loaded

  5. If you’re not logged in you’re redirected to the login page.

  6. Log in using:

    Username: user
Password: user

  7. You’ll be redirected to the widget page and you can see the widget form with the ID 1 loaded.

# Form widget notes:

If you want to load other data you have to change the index.html file in the folder:

cd ui/widgets/<your-entity-name>/formWidget/public

and change the id attribute in this line:

<my-entity-form service-url="%REACT_APP_SERVICE_URL%" id="1" />

# Start the details widget

You can also start your generated details widget:

  1. If you are running another widget, stop it clicking Ctrl+C in your widget command line window

  2. Go to the details widget folder in your project:

    cd ui/widgets/<your-entity-name>/detailsWidget

  3. Then install and start your widget executing the command:

    npm install && npm start

  4. When the widget is started a browser window is opened with and the widget URL is loaded

  5. If you’re not logged in you’re redirected to the login page.

  6. Log in using:

    Username: user
Password: user

  7. You’ll be redirected to the widget page and you can see the widget form with the ID 1 loaded.

# Widget Details notes:

If you want to load other data you have to change the index.html file in the public folder:

cd ui/widgets/<your-entity-name>/detailsWidget/public

and change the "id" attribute in this line:

<my-entity-details service-url="%REACT_APP_SERVICE_URL%" id="1" />

# Notes

# Change keycloak dev settings

If you want to change your keycloak settings to use another keycloak installation (not the docker compose pre configured one) or if you want to change the service-url of your widget you can change the parameters set in the .env.local file that was generated by the entando-blueprint in the root folder of your react widgets:

cd ui/widgets/<your-entity-name>/tableWidget

then edit the file .env.local

By default this variables are set to:

REACT_APP_SERVICE_URL=http://localhost:8081/services/<your-application-name>/api
REACT_APP_KEYCLOAK_URL=http://localhost:9080/auth
REACT_APP_KEYCLOAK_REALM=jhipster
REACT_APP_KEYCLOAK_CLIENT_ID=web_app

# The service-url Variable

The service-url variable is the api Microservice API URL.

# User is not authenticated message

When you run the widgets if you see the message: User is not authenticated. This means that probably your keycloak application is not running so please check if the docker-compose command is still in execution.

# Open the project in an IDE

This section just walks through the anatomy of the project and the micro frontends. You can skip this or review later as desired. The top level project is a normal Spring Boot application. You can look through the code and configuration in src/main/java to get a view of the server side. The micro frontends are in the ui folder. Each entity gets an MFE for details, table, and form.

← Hello World Widget in the App builder →