RIO's create-frontend CLI

A CLI for creating new web frontend projects from scratch.

npm create --yes rio-cloud/frontend my-fancy-project

👉 Before starting, you should already have some information ready:

• OAuth ClientID
• OAuth redirect_uri
• OAuth silent redirect_uri
• Sentry DSN

If you just want a small local frontend toy project that allows you to play around with UIKIT components, simply enter dummy values for the parameters.

Tech stack

The RIO template is opinionated and comes already with some pre-defined libraries to give you a head start and streamline the various projects so developers feel familiar when working with multiple projects. If you still want to use something else, feel free to remove or adapt the sample implementations.

• Build tooling:
  • Vite - uses esbuild and Rollup under the hood
• Frontend library:
  • React
• Routing:
  • React Router
• State management:
  • Redux Toolkit
• Data fetching:
  • RTK Query since it is within the same ecosystem as Redux
• UI component library:
  • RIO UIKIT
• Form validation
  • React Hook Form
• Date library Even though there are some older UIKIT components that still uses moment.js, The date-fns library is set out to replace that in our services
  • date-fns
• Testing
  • Vitest as test runner and testing framework for unit tests
  • Testing Library as the testing utility
  • Cypress as integration, end-to-end, monitoring test suite
• API mocking:
  • MSW to mock API calls by intercepting requests on the network level. This can be used for development and testing alike
• Localization:
  • react-intl as I18n library
  • Phrase for managing translations with Phrase
• Service monitoring and issue tracking:
  • Sentry
• Static code analysis and formatting:
  • Biome
• Automated dependency updates:
  • Renovate basic configuration file only, further configurations must be customized

Migration guides for existing frontend projects

• Migrating to Vite
• Migrating to Mock Service Worker

⚠️ Note for Windows users ⚠️

Some of the utility we're using in this CLI does not work 100% reliably on Windows. See this issue, for example. We try to iron out these issues, but you may run into problems when running the CLI in a path on one drive, e.g. C:\Users\RandomUser\code and then manually setting the output directory to a path on another drive e.g. D:\projects\awesome-sauce.

👉 We highly recommend navigating into the parent folder of your desired new project directory. In the example above, you're best off going into D:\projects and then just running npm create --yes rio-cloud/frontend awesome-sauce.

The CLI will automatically assume the output directory to be a child directory of your current working dir + the project name you're giving - and you don't have to type in the folder path, since the CLI will propose it automatically. To complete the step, just hit enter.