Getting Started with Data Viz

DATA VIZ provides a generic UI which utilizes the react-wp-lib library, which allows React components to be embedded into WordPress Gutenberg blocks, enabling dynamic content visualization.

This documentation is a guide for setting up a new data visualization project. It is a guide for setting up a new data visualization project.

Requirements

• Docker
• Docker Compose v2
• Java 21
• NodeJS v22+
• Intellij IDEA (optional) - for running the microservices. You can use any other IDE.

Installation

In order to start a new data visualization-based project, this repo can be used as a template project. This example project includes all the code necessary for a complete data visualization setup

Setup

1. Clone your repo together with the submodules

Run

git clone your-repo-url

# SSH
git clone git@github.com:devgateway/data-viz-example.git project-name

# HTTPS
git clone https://github.com/devgateway/data-viz-example.git project-name

2. Remove the .git folder

• This is necessary so that we can use the project as a template for a new project

rm -rf .git

3. Add Maven Services in Intellij IDEA

4. Execute dev_services.sh script

• This script will start the required docker services for the project to run.
• The script is located in the root of the project and is called dev_services.sh.

Change permissions

chmod +x dev_services.sh

Run the script

./dev_services.sh

• The following services are started by the script:
  • eureka - for service discovery
  • gateway - for routing requests to the appropriate services
  • starter - for the starter service
  • example-service - for the example service
  • security - for the security service
  • wordpress - for the wordpress service
  • ui - for the ui front-end
  • nginx - for the nginx service
  • mysql - for the mysql service
  • postgres - for the postgres service
  • docs - for the docs service (optional)
  • superset - for the superset service (optional)
  • redis - for the redis service required by the superset service (optional)

4. Setting up the frontend

• Navigate to the front folder

cd front

• Install the dependencies

npm

npm install

pnpm

pnpm install

Yarn

yarn install

Bun

bun install

• Setup the environment variables and replace the placeholders with the correct values

cp .env.example .env

or create a .env file in the front folder and copy the following content:

VITE_PROTOCOL=http
VITE_DOMAIN=localhost
VITE_REACT_APP_WP_API=$VITE_PROTOCOL://$VITE_DOMAIN/wp/wp-json
VITE_REACT_APP_WP_STYLES=$VITE_PROTOCOL://$VITE_DOMAIN/wp/wp-admin/load-styles.php?c=1&dir=ltr&load%5Bchunk_0%5D=dashicons,admin-bar,buttons,media-views,editor-buttons,wp-components,wp-block-editor,wp-nux,wp-editor,wp-block-library,wp-block-&load%5Bchunk_1%5D=library-theme,wp-edit-blocks,wp-edit-post,wp-format-library,wp-block-directory,common,forms,admin-menu,dashboard,list-tables,edi&load%5Bchunk_2%5D=t,revisions,media,themes,about,nav-menus,wp-pointer,widgets,site-icon,l10n,wp-auth-check&ver=5.5.6' id='wp-block-library-css
VITE_REACT_APP_GA_CODE=
VITE_REACT_APP_DEFAULT_LOCALE=en
VITE_REACT_APP_WP_HOSTS=http://localhost
VITE_REACT_APP_USE_HASH_LINKS=false
VITE_REACT_APP_WP_SEARCH_END_POINT=/dg/v1/search
VITE_REACT_APP_API_ROOT=http://localhost

• Run the frontend

npm run dev

• The frontend will be available at http://localhost:5173

5. Start the Microservices (optional)

• Select one of the microservices located in the services folder.
• Set the active profile to dev by clicking on the Edit Configurations option in the top right corner of the Intellij IDEA window as shown below:

Step	Image
Edit Configurations
Set Active Profile

• Run the microservice by clicking the green play button in the top right corner of the Intellij IDEA window.

Post-Setup

• Initialize the git repository

git init

• Add the remote repository

git remote add origin your-repo-url