remix-gql-tailwind Starter Kit

This starter kit features Remix, GraphQL, and Tailwind CSS.

Table of Contents

• Overview
  • Tech Stack
  • Included Tooling
  • Kit Organization / Architecture
  • Example Components
• Installation
  • CLI
  • Manual
• Commands
• Demo Implementation

Overview

Tech Stack

• Remix v1.x
• React v17.x
• GraphQL
• Tailwind CSS v3.x

Included Tooling

• Jest - Test runner
• TypeScript - Type checking
• Storybook - Component library
• ESLint - Code linting
• Prettier - Code formatting
• Vite - Storybook builder

Kit Organization / Architecture

For this kit, we maintained the Remix convention and we do recommend it. For the app/components folder, each component is co-located with its tests and stories. This structure makes it easy to find all the code and functionality related to a specific component. Due to Remix’s preference for data fetching from the route page, the components are primarily simple view components.

• Storybook

  Storybook was introduced because it is really a great tool for testing components in isolation and good for documentation. As of Remix v1.x, Storybook isn’t supported and doesn’t work well with Remix, so Vite was used in building Storybook to work properly. This might change in the future.

• Styling

This kit utilizes Tailwind for styling based on Remix’s preference and due to the fact that other CSS libraries such as Styled Components and CSS Modules aren’t supported currently. See https://remix.run/docs/en/v1/guides/styling for more information. The styles are exported from a <componentName>.classNames.ts as named exports, this is majorly to avoid surface styling which can be a bit complex. Also, you could write the Tailwind classes inline but this method is used to keep the file clean and ensure reusability of styles.

If you want to follow this pattern, take a look at our GitHub demo implementation below. Using this structure makes it easy to find all the code and functionality related to a specific component.

Example Components

In this remix-gql-tailwind/app/components directory you will find the Counter and Greeting directory.

The Counter directory contains the following files:

• Counter.stories.tsx
• Counter.classNames.ts
• Counter.test.tsx
• Button.tsx
• Counter.tsx
• index.ts

The Greeting directory contains the following files:

• Greeting.stories.tsx
• Greeting.classNames.ts
• Greeting.test.tsx
• Greeting.tsx
• index.ts

Installation

CLI (Recommended)

npm create @this-dot/starter -- --kit remix-gql-tailwind

or

yarn create @this-dot/starter --kit remix-gql-tailwind

• Follow the prompts to select the remix-gql-tailwind starter kit and name your new project.
• cd into your project directory and run yarn.
• Run yarn dev to start the development server.
• Open your browser to http://localhost:3000 to see the included example code running.

Manual

Note: The command below clones the entire repository, including other starter kits.

git clone https://github.com/thisdot/starter.dev.git

• Copy and rename the starters/remix-gql-tailwind directory to the name of your new project.
• cd into your project directory and run yarn.
• Run yarn dev to start the development server.
• Open your browser to http://localhost:3000 to see the included example code running.

Commands

• yarn dev - Starts the development server.
• yarn test - Runs the unit tests.
• yarn storybook - Starts the Storybook UI.
• yarn format - Formats code with prettier for the entire project.
• yarn build - Builds the project for production.
• yarn start - Starts the production server.

Demo Implementation

Repository

The demo application tries to implement some of GitHub’s pages and functionality. It uses the OAuth credentials in GitHub to authenticate users with their GitHub accounts and uses graphql-request to fetch data from the GitHub GraphQL API. Check out the link above to learn more or check out the demo!