Hello World with Typescript

By @ehiber and contributors at 4Geeks Academy

Estas instrucciones estan disponibles en espanol.

Start coding a TypeScript/HTML/CSS website in 30 seconds by opening this template using 4Geeks' One-Click Coding or locally on your computer.

Before you begin

Install the packages by typing:

npm install

How do I run my website to see live changes?

Type on the command line:

npm run start

Then open your local URL in the browser (usually http://localhost:5173).

How do I run this in GitHub Codespaces?

Run the same development server:

npm run start

Vite is configured to listen on 0.0.0.0, so Codespaces can detect and forward port 5173 automatically.

How do I run only the TypeScript check?

Use this command to validate only TypeScript without starting Vite:

npm run typecheck

How do I run main.ts from the terminal?

If you want to execute ./src/main.ts directly and see console.log output in the terminal, run:

npm run console

This command is already wired to ./src/main.ts.

Where do I write my code?

It depends on the language:

• ./src/main.ts for TypeScript logic.
• ./src/style.css for styles (Tailwind CSS v4 is already imported).
• ./index.html for the HTML shell.

You can add more files as needed, just make sure to import them from main.ts.

Note: if you can see the "Hello Rigo" card and the message "If you can see this, Tailwind is working.", Tailwind is configured correctly.

Troubleshooting

I don't see my changes...

Every time you change any file inside ./src, the website refreshes automatically (hot reload).

If changes still don't appear, refresh clearing cache:

• Mac: Cmd + Shift + R
• Windows/Linux: Ctrl + Shift + R

How do I include more images in my project?

Add them inside ./public and reference them in HTML using /your-image-name.ext.

Example:

<img src="/rigo-baby.jpg" alt="Rigo" />

How do I include more TypeScript files?

Add files into ./src and import them from main.ts.

Example:

import { myVar } from "./file2";

How do I publish the website?

This boilerplate is compatible with Vercel in one step.

Contributors

This template was built as part of the 4Geeks Academy Coding Bootcamp by ehiber and contributors. Find out more about our AI Engineering Course, Full Stack Developer Course, and Data Science Bootcamp.

You can find other templates and resources like this at the school's GitHub page.