astro-ts-tw-hello

Astro Build using TypeScript plus TailwindCSS

Local Development

• VS Code + Development Containers ( Customizations | VS Code Extension )

  • [GitHub] erkobridee/devcontainer-hello - Learning about Development Containers

import path alias

It's commonly used the pattern @* -> src/*, but this approach annoys me due to the current npm package namespaces ( scopes | npm docs ) which normally starts with @{user_name/org_name}.

So to avoid that I tested the pattern ~/* -> src/*, inspired on Unix OS, but those 2 caracteres for a lazy person like me it's too much.

So later on, I saw some cases where it's been using the pattern #* -> src/* ( tsconfig.json ) which avoid the issue from @.

Astro

• [YouTube] Astro in 100 Seconds | Fireship ( 2021-07-15 )

• Astro Docs

  • Install and set up Astro

  • Project Structure | Astro Docs

  • Import Aliases | Astro Docs

  • Markdown & MDX | Astro Docs

    • Configuring Markdown and MDX

  • View Transitions | Astro Docs

    • astro:after-swap

    • Astro View Transitions | Chrome for Developers - live, source code

  • Deploy your Astro Site to GitHub Pages | Astro Docs

    • [GitHub] withastro/github-pages - Automatically deploy an Astro site to GitHub Pages

    • Create gh-pages branch in existing repo | jf

  • @astrojs/tailwind

Editor Setup

• Editor Setup | Astro Docs

  • ESLint

    • [GitHub] ota-meshi/eslint-plugin-astro

  • Prettier

    • [GitHub] withastro/prettier-plugin-astro

• Get VSCode, eslint & prettier working with Astro | Geek's blog (2023/02/11)

• Effortless Code Styling: Configuring Astro with Prettier, ESLint, and Tailwind CSS | Raj Vadeghar (2024/03/03)

Test it online

Setup a new project using this repository

You can use the Use this template button

degit

npx degit erkobridee/astro-ts-tw-hello {project_name}

create a new project based on a GitHub repository’s main branch

npm create astro@latest -- --template erkobridee/astro-ts-tw-hello