Skip to main content

React Extension Development with Web POS

Overview​

This guide walks through the workflow for developing a React UI Extension against a running Web POS instance. By the end you will learn how to develop a react screen with the ability to reflect the changes with a simple browser reload.

What You Will Learn​

  • How to connect the Web POS to a UI Extension project running in development mode
  • How the watch-and-preview dev script works and how to reflect changes in the Web POS

Pre-requisites​

  • Web POS is Setup
  • Training POS Extension is Generated
  • Build Automatically is enabled in Eclipse — select Project menu and confirm Build Automatically is checked

TODO : This may chnage with the new way of adding the extension project into WebPos Buil Automatically

  • Ensure that VS Code is set as the preferred editor for .js and .jsx files in Eclipse if you prefer VS Code for js development. TODO : Add the exact steps VsCode

Update POS Extension to run in Dev Mode​

By default, the package.xml file is configured to load the extension from a local FILE path. For development against a running dev server, this must be changed to a URL source.

Open the package.xml file in your extension project.

Locate the source configuration entry and change the source type from FILE to URL.

Update the URL value to point to the local dev server address . Default port is 5000

TODO : Add the URL here so that the users can copy. Alternatively we can generate a commented out URL when we generate the extension

packages

Save the file.

Add the POS Extension Dependency to Web POS​

The Web POS must include the extension project as a dependency to the Web POS inside the pom.xml file.

open the Training - WebPos project pom.xml file and add the extension project as a dependency.

TODO : Sathira - Add a screenshot of the pom file once the training web pos is created

Click Apply to save the changes.

Start the Web POS​

Launch the Web POS Tomcat server from Eclipse.

Select Run menu → Run Configurations

Expand the Apache Tomcat group and select WebPos

Click Run...button

run launch

( This will take a few minutes to launch )

Once started, confirm the Web POS is accessible in the browser through http://localhost:39870/WebPos/HTMLPosVite/index.html

Start the Extension Dev Server​

The extension should run in Dev Mode.

Right Click on trainingposextension folder inside src-js/packages folder of the POS Extension and Click Run Node Dev Sever to run the Extension in Dev Mode

Dev Server Option

Click Run Node Dev Server...button

Confirm that the terminal output shows the dev server is running and listening.

Terminal

Live Reload After Code Changes​

With the dev server running, any changes you make to your extension’s source files are automatically rebuilt. After the build, simply reload the browser to see the updated output in Web POS .No server restart is needed.

At this stage, the extension project does not yet include any React components. The next tutorial will guide you through creating your first custom React component and observing live changes directly in Web POS.