Building a stellar Astro project with Svelte, Tailwind CSS, Vercel, Prettier and TypeScript

Seppe Gadeyne

As a freelance web developer with expertise in optimizing website performance, I specialize in creating lightning-fast and SEO-optimized websites.

Freelance web developer

Welcome to this guide on setting up an Astro project that utilizes Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript. By the end of this post, you'll have a fully configured and efficient Astro project that follows best practices and is ready for production. Let's get started!

Contents

1. Getting started

2. Initial Astro project Setup

3. Adding Svelte, Tailwind CSS, Vercel, and Prettier

4. Configuring Prettier

5. Configuring Astro

6. Configuring TypeScript

7. Configuring Vercel

8. Running the project

9. Conclusion

Getting started

Before you can begin, ensure that you have the following prerequisites installed on your system:

• Node.js (version 16.12.0 or higher)

• Visual Studio Code with these extensions: astro-vscode, prettier-vscode, svelte-vscode and tailwindcss-intellisense

Initial Astro project Setup

To begin, let's create a new Astro project with the following command:

npm create astro@latest

Astro will prompt you for specific details. Follow the instructions and choose the options that best align with your requirements. Selecting TypeScript and retaining the default settings for a coherent setup is essential.

Adding Svelte, Tailwind CSS, Vercel, and Prettier

Next, we will incorporate the desired integrations into our project. Execute the following commands from within the newly-created Astro folder, opting for the default choices when prompted:

npx astro add svelte
npx astro add tailwindcss
npx astro add vercel
npm install prettier prettier-plugin-astro prettier-plugin-svelte prettier-plugin-tailwindcss

Configuring Prettier

To set up Prettier, create a .prettierrc file in the root directory of your project and add the following configuration:

{
   "useTabs": true,
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false,
   "printWidth": 100,
   "plugins": ["prettier-plugin-astro", "prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "pluginSearchDirs": false
}

Also, create a .prettierignore file with the following content:

node_modules/**
vercel.json

Configuring Astro

To configure Astro, modify the astro.config.mjs file as follows:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
import tailwind from '@astrojs/tailwind';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  integrations: [svelte(), tailwind()],
  // output: ‘server’,
  adapter: vercel(),
});

By default, the adapter @astrojs/vercel is set up to utilize server-side rendering. However, for optimal performance, it is advisable to configure it for static output, which allows you to serve only exported HTML files.

Starting from version 2.1, Astro includes a built-in CLI command, astro check which performs TypeScript type checking on your project's .astro files. This command is utilized to identify bugs and type errors in CI before merging changes or deploying your site. To set this up, modify your package.json file as shown below. This configuration will notify you of any errors during development, resulting in a more seamless workflow and dependable code.

{
	"scripts": {
		"dev": "astro check --watch & astro dev"
	}
}

Configuring TypeScript

To configure TypeScript, edit the tsconfig.json file and add the following settings:

{
   "compilerOptions": {
    "module": "esnext",
   	"baseUrl": ".",
   	"paths": {
       	"$lib/*": ["src/*"]
   	}
   },
   "extends": "astro/tsconfigs/strict"
}

A helpful feature in this configuration is the paths setting, making importing components easier. For instance, you can import components using $lib/path/component.astro rather than ../../path/component.astro. This technique is known as Aliases.

Also, add the following declaration to src/env.d.ts file:

declare module '*.astro' {
  const Component: any;
  export default Component;
}

Configuring Vercel

For Vercel configuration, create a vercel.json file in your project's root directory. The following template can be used as a starting point:

{
   "regions": ["fra1"],
   "cleanUrls": true,
   "trailingSlash": false,
   "redirects": [
   	{ "source": "/old-slug", "destination": "/new-slug", "permanent": true }
   ]
}

Running the project

With everything set up, it's time to start the development server. Run the following command:

npm run dev

If you encounter any issues, try removing the node_modules and package-lock.json files, then run npm install followed by npm run dev.

Conclusion

Congratulations, you now have a fully configured Astro project with Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript! This setup will help you create efficient and high-performing web applications. Best of luck with your project, and feel free to reach out if you need assistance.