Hot Reload With Mendix

Vinicius Strugata Ambrosio
5 min readOct 21, 2024

--

I swear I asked the AI ​​to generate an image about Hot Reload and I spelled it correctly!

The Mendix technology is well known for quickly delivering web applications through its drag-and-drop Integrated Development Environment(IDE): Studio Pro. There's a pre-configured style for every visual element you drag into your UI. But what if you need to customize the default appearance of a typical Mendix Application?

UI Resource Theme Module

When you create an application within Studio Pro using the Blank Web App template, you also receive a pre-defined set of style sheets that configure its look and feel. These style sheets are normally defined in the Atlas_Core and Atlas_Web_Content (and Atlas_Native_Mobile, if your project was created based on the Blank Native Mobile App). It’s possible to have more style theme modules, but these are the basis.

Such modules define the Mendix application visuals. There is a Figma Design Kit — Mendix Atlas UI KIT-Widgets and Layouts — specifically designed to help front-end developers and designers create beautiful web applications.

Figma Mendix Atlas UI Kit

If you are happy with the visuals defined by Atlas UI Kit, you are ready to go. Just change the basic colors and maybe the fonts and you’ll get an application able to be released in the market.

Warm Reload - Using the Design Properties Panel

I’ve mentioned that the UI Modules define a set of styles for your application. You can change the pre-configured style for a given UI element by modifying its properties in the Design Properties Panel. By using this panel, even a developer with minimal knowledge of SCSS can build good-looking web applications because all the styles are previously available in a UI Resource Theme Module (such as Atlas_Core).

By changing the properties directly in the panel, we’ve got a kind of Warm Reload, since we still need to run the application in Studio Pro to effectively apply the changes. It’s not bad, but it could be quicker…

In addition, the Design Properties Panel doesn’t show all the possible styling properties for a given widget, so sometimes a junior Mendix front-end developer gets stuck when creating the pages.

For example, how could you set the Home text style to italic? Such property isn’t defined in the Design Properties Panel:

Where can I set the font as Italic?

Hot Reload — Custom StyleSheets

One possible solution for this issue is to define custom style sheets and apply them to the desired widget. Below is the procedure:

  • [1] In the App Explorer panel, open the main.scss file, located in the app/styling/web folder.
  • [2] Use the SCSS code below to define a style class called text-italic that defines the font as italic.
@import "custom-variables";

.text-italic {
font-style: italic;
}
  • [3] Select the Home text. In the Design Properties Panel, append the text-italic class to the Class text field.
  • [4] Save the project and hit the Run button. The Home text should be rendered using the font-style: italic setting.
A custom style sheet required to set the font style as Italic
  • [5] This procedure may seem a bit laborious, but you get a bonus as a reward: the real Hot Reload! Append a new style to the previously defined class to apply a border around the Home text and then save the main.scss file:
@import "custom-variables";

.text-italic {
font-style: italic;
border: 1px solid black;
}
Hot Reload with Mendix — Via Custom StyleSheets!

Comments

  • By defining the SCSS styles in a custom style sheet you get the benefit of the Hot Reload. OK, for small projects this does not seem to be a huge advantage, but for bigger projects, it may save you some time.
  • In addition, if you are proficient in SCSS, you can achieve results that are not easily possible by using the Design Properties Panel exclusively.
  • It’s possible to define the font-italic as a setting to be configured in the Design Properties Panel. To do so, you need to edit a JSON file that instructs the panel to set the italic as font style. See more details in the Mendix Docs:
  • Does the Hot Reload also work in Native Mobile? Kind of … If you follow a similar procedure in a Native Mobile Project in Studio Pro, you only get the styling results applied to your application after rerunning the project, as opposed to ReactNative or Flutter, which is only needed to save the file to apply the changes.
Mendix Native: Warm Reload (need to run the project to apply the changes)
  • But if you do a three-finger gesture on the app, it will reload with the saved changes.
Three-finger gesture to achieve (almost) the Hot Reload on Mendix Native
  • It is worth mentioning that Hot Reload works with PWA applications as well.

--

--

Vinicius Strugata Ambrosio
Vinicius Strugata Ambrosio

Written by Vinicius Strugata Ambrosio

Mendix Developer, Python Enthusiast and Flutter/Dart Learner — https://www.linkedin.com/in/vstram/

No responses yet