Skip to main content

UI Layer

Installing and compiling the dashboard and general application interface.

Context​

Netuno applications already come with a set of advanced front-end technologies configured by default, including React, Vite, Less, and Ant.Design.

Within the applications, there is the 📁 ui (user interface) folder, which is where we develop the dashboards and other front-end components.

Before You Start​

Make sure you have PNPM and Bun installed, which are prerequisites. Learn more about how:

Install Dependency Modules​

To install all the default dependencies, go to the 📁 ui (user interface) folder within your application under development, for example:

cd apps/my_app/ui/

Run the command to install the dependency modules:

pnpm install

PNPM is an improved and more optimized alternative to NPM.

Automatic Compilation​

Go to the 📁 ui (user interface) folder of your application under development, for example:

cd apps/my_app/ui/

To automatically compile the front-end with each code change, run:

pnpm run watch

Make sure you have Bun installed.

Automatic Front-end Integration with Netuno​

Netuno allows you to launch the UI alongside the Netuno application server process.

All React build messages will be integrated into the same terminal as the Netuno application.

To do this, simply enable the configuration in the Netuno application's commands in 📂 config/_development.json, that is, in the command with the ui path, change enabled to true, like this:

config/_development.json
{
  ...
  "commands": [
    {
      "enabled": true,
      "path": "ui",
      "command": "pnpm run watch"
    }
  ],
  ...
}

Whenever you edit the Netuno application's configuration files, you must restart the server so that the new changes can be applied.

Finally, start/restart the server with your Netuno application to verify its functionality.

And now everything will be integrated into a single centralized terminal, thus avoiding having multiple scattered terminals.

More information:

Other Front-end Technologies​

Within the 📁 ui folder, you can configure any front-end technology or include any new dependency module that you need.

If you don't want to use any of the default technologies, you can replace them with any other, especially by adapting the files:

  • package.json
  • vite.config.js