Let's say we just spent a couple of hours inside Gemini creating a first draft of an idea. Now we want to take this draft and turn it into a functional React app.

Setup

The first step is to set up a Vite project.

npm create vite@latest

Select React and TypeScript + React Compiler.

Next we replace the content src/App.jsx with the content we generated with Google Gemini.

Google Gemini uses Lucide Icons, so we have to install it as well.

npm install lucide-react@next

Adding Tailwind

It also uses Tailwind for styling. So we install it

npm install tailwindcss @tailwindcss/vite

and add it to vite.config.ts.

import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset()] }),
    tailwindcss()
  ],
})

Add @import "tailwindcss"; to the top of thesrc/index.css file. We can delete the rest of the file.

@import "tailwindcss";

We can also delete src/App.css.

Fine Tuning

I generally like to adjust a couple of things before I'm done:

First, I like to use BiomeJs instead of EsLint. If it comes with good default settings, we generally do not have to tweak it at all. For professional projects, this might not be a good idea, but for a hobby project it's perfect.

npm i -D -E @biomejs/biome && npx @biomejs/biome init

Next, I generally like to turn on all possible linting flags for TypeScript by adding the following flags to the tsconfig.json file:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "noImplicitReturns": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
  },
}

Hosting on GitLab

To host on GitLab, we have to first set the base inside vite.config.ts.

import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset()] }),
    tailwindcss()
  ],
  base: "https://orasund.gitlab.io/card-game-sim/",
})

Next, we can add a CI pipeline by including a .gitlab-ci.yml file.

image: node:latest

# allow caching for faster deployment
cache:
  paths:
    - node_modules/
    - .cache/

pages:
  stage: deploy
  script:
    - npm install
    - npm run build
  artifacts:
      paths:
        - dist
  publish: dist
  only:
    - main

Then commit and push, and our app is now hosted on GitLab.

To make the website publicly available, first disable "Use unique domain" under Deploy > Pages in GitLab.