We have previously published an article discussing the benefits of using Nx. You can find it here. This article is intended for individuals with experience using Nx. However, if you want to learn how to structure a mid-size or large React application using Nx, this article is for you. The article will be divided into two parts: one will provide an overview of Nx concepts and recommendations based on the official documentation, and the other will present a practical example of how to structure an Nx project with React, based on my experience with multiple Nx + React projects.

Camille Tjhoa

Senior Software Engineer

At Qovery, we build our frontend using Nx and rely on the official nrwl/ci GitHub Actions. Our frontend requires third-party tokens during compile time, but we would like to avoid hardcoding them or using the .env file to define our tokens. The latter exposes our source code directly on GitHub, and even though it's not sensitive data, we don't want it to be easily scraped. As probably many others, we've faced issues when we dug into environment variables using this reusable workflow: https://github.com/nrwl/ci?tab=readme-ov-file#limited-secrets-support https://github.com/nrwl/ci/issues/92 https://github.com/nrwl/ci/issues/44 So, I wanted to share the lessons I learned from this experience.

Camille Tjhoa

Senior Software Engineer