Skip to main content
Version: Current (3.x)

Frontend Migration Guide From Data Viz 2.0 to 3.0

warning
  • Before starting the migration ensure that you have migrated to the most recent version of Data Viz 2.0.
  • The guide can be found here: Data Viz 2.0 Migration Guide

Key Changes​

React Router v7​

  • We have updated the project to use React Router v7 (RR7) (framework-mode).
  • RR7 introduces the concept of Server Side Rendering (SSR) and React Server Components (RSC).
  • RR7 is a major version upgrade and it is highly recommended to upgrade to the latest version of RR7.
  • RR7 comes as a vite plugin and it is used with vite.
  • Vite is a faster build tool than webpack. It also has in-build support for SASS therefore we have removed the SASS loader from the project.
  • More can be found here here
warning
  • You should replace occurences of react-router-dom with react-router in your project.

Removed submodules in favour of NPM packages​

  • We have removed the wp-react-lib submodule in favour of the library version which can be found here

Project Based​

Migration Steps​

tip
  • We recommend using pnpm as the package manager.
  • We also recommend adopting type safety by using TypeScript. This can be done incrementally by adding type annotations to your code.
  • If you have not installed pnpm yet, you can install it by following the instructions here

1. Remove the front submodule folder​

git rm front

2.Create a new react router project​

  • Create a new react router project using our template
npx gitpick devgateway/data-viz-ui/tree/main/example front

3. Install the dependencies​

pnpm install
  • If you are using yarn, npm or bun as the package manager, you can use the following command to install the dependencies:
npm install
  • Install @devgateway/wp-react-lib and @devgateway/dvz-ui-react
npm install @devgateway/wp-react-lib@latest @devgateway/dvz-ui-react@latest

4. Configure the project​

  • Remove the embeddable folder from the new project
rm -r front/app/embeddable
  • Copy the embedded folder from the ui-customizer foler to the new project
cp -r custom/ui-customizer/src/embedded front/app/embeddable
  • Copy the index.js file from the ui-customizer folder to the new project
cp -r custom/ui-customizer/src/index.js front/app/embeddable/index.js
  • Copy the reducers folder from the ui-customizer folder to the new project
cp -r custom/ui-customzer/src/reducers front/app/reducers
  • Create a reducers/index.ts file in to import all the reducers from the
import example from './example-reducer';

const reducers = {
  example,
};

customizer.registerCustomReducers(Reducers);

  • Update or create a embeddable/index.ts file to register your custom components
import { customizer } from '@devgateway/dvz-ui-react';

const ExampleButtonLazy = lazy(() => import('./button'));
const ExampleComponentLazy = lazy(() => import('./MyExampleComponent'));

const embeddables = {
 exampleButton: ExampleButtonLazy,
 exampleComponent: ExampleComponentLazy
};

customizer.registerCustomEmbeddables(embeddables);

  • Copy Images from the ui-customizer folder to the new project
cp -r custom/ui-customzer/src/images front/public/images
  • Adjust the image paths in your code to use the base path /images
<img src="/images/logo.png" alt="logo" />
  • Copy the CSS or SCSS files from the ui-customizer folder to the new project
cp -r custom/ui-customzer/src/scss front/src/styles
  • Update the front/app/root.tsx file to import the CSS/SCSS files, embeddables and reducers
import './styles/main.scss'; // or './styles/main.css'
import './embeddable';
import './reducers';
  • Install the @devgateway/dvz-ui-react and @devgateway/wp-react-lib packages
npm install @devgateway/dvz-ui-react@latest @devgateway/wp-react-lib@latest

5. Cofigure the environment variables​

  • Copy the .env.example file in the front folder and copy the following content:
cp .env.example .env
  • Update the environment variables in the .env file with the correct values.

6. Run the project​

npm run dev

File Extensions​

All Files with react components should have the .jsx or .tsx extension. Update the file extensions accordingly:

# Before
src/components/MyComponent.js

# After
src/components/MyComponent.jsx