How to use RedwoodJS applications with several UI component libraries

Get Help and Help Others
1

1. Build a Redwood 4.2 app with Chakra-UI 2.x

Note: This post is a first draft of the document that will appear in the community site once we address all issues raised as comments to this post.)

Introduction

This article is the first part in a series of posts describing the use of several UI component libraries, starting with Chakra UI. The impetus for writing this article comes from Sergei’s post in Discord with additional comments by dennemark and david-thyresson.

To illustrate the modifications needed to use Chakra-UI 2.x UI component library with Redwood 4.2 based application, I selected the egghead tutorial by Lazar Nikolov, a core team member of Chakra. The tutorial is organized as a series of lessons, each lesson being accessible as a branch of this repo. For example, lesson 3 is accessible as branch 3.

The Redwood 4.2 application I used is defined in the beginning of the RedwoodJS tutorial, up to the second page. I did not want to include any of the “UI constructs”, built in the following tutorial chapters.

The final UI is shown below and the matching app is in RW-Chakra repository

image
image1046×866 112 KB

Modifications to a minimalist Redwood 4.2 app

1. Typescript 4.2 import paths

The most relevant “discovery” is that the most recent Typescript changed the processing of import statements, manifested by

error TS2307: Cannot find module 'src' or its corresponding type declarations.

image
image1552×846 91.7 KB

Note the wiggly lines stating how the import files cannot be found while the application behaves correctly

This issue is further discussed in Suppressing “The import path cannot end with a ‘.ts’ extension” error, as well as in .d.ts Extensions Cannot Be Used In Import Paths. It is far from obvious how will this issue be addressed finally. I was able to “ignore” this situation by changing the original tsconfig.json (as generated by running the command yarn create redwood-app --ts ./redwoodblog) with this one

{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "skipLibCheck": false,
    "baseUrl": "./",
    "rootDirs": [
      "./src",
      "../.redwood/types/mirror/api/src"
    ],
    "paths": {
      "src/*": [
        "./src/*",
        "../.redwood/types/mirror/api/src/*"
      ],
      "types/*": ["./types/*", "../types/*"],
      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/api"]
    },
    "typeRoots": [
      "../node_modules/@types",
      "./node_modules/@types"
    ],
    "types": ["jest"],
  },
  "include": [
    "src",
    "../.redwood/types/includes/all-*",
    "../.redwood/types/includes/api-*",
    "../types"
  ]
}

This configuration is a result of guessing what Typescript expects - I am hoping someone will be able to define the content more precisely.

2. React components SaaS startup landing with RedwoodJS and Tailwind CSS

Note: this article describes the use of the tailwindui library in a basic RedwoodJS application, created by Sergey Panarin. This Sergei’s “dev.to” blog describes adding the tailwindui UI component library.

If you need a refresher on tailwindUI - check Documentation - Tailwind UI.

Comming next

From the list of 15 popular React UI component libraries, I selected the next few to describe how to use them with RedwoodJS based applications

daisyUI

react-bootstrap

Added on 3/15/2023

This whole article is written because I need to choose a UI toolkit for my future app development projects While doing this research (based on suggestions in RW online documentation I decided to keep detailed notes so, someone else can benefit from my work. There is no expectation of getting other people’s comments - but do not let this remark discourage you from asking questions.

1 Like