Svelte and TailwindCSS on Github Codespaces

Here is my notes when submitting some interesting challenges on FrontendMentor and basically just my experience when set up a svelte + tailwindcss project then deploy it on Github Pages and I can't tell this as the best way to do.

I use Github Codespace which I got for free maybe because my campus email .ac.id XD and I love it since I don't need to handle multiple folder or updating packages and dependencies also it was faster than my internet speed now.

There is also many alternative to run VS Code online like gitpod.io or you can choose a simpler one like codesandbox.io, replit.com, etc

Firstly, I always enable VS Code synchronization so I can get all extension and theme that I usually use in my local machine to be available in Codespaces. It may take a little time, and you may need to reload the browser just to make sure everything is now synced correctly.

When everything is done, I usually enable Wakatime extension for self time tracking just want to know how much time I used for specific project even it just my personal project XD

Installing svelte + TailwindCSS

I've already have experiment with sveltekit and it was awesome also easy to understand, but I feel like for a simple and single component I can just use svelte without routing or any fancy things.

npm init vite . --template svelte # intall in current dir

npm install 

Since svelte was running with vite we can just follow the official guide on TailwindCSS Vite installation

But I can do that easier with this svelte-add command

npx svelte-add@latest tailwindcss

Thanks to ChasingCode.dev blog post

Now, I think all requirement was installed we can just try to build a hello world and build for production.

npm run dev 
npm run build # for production

But since I want this to be available on github pages, I should change the default folder name from dist to docs or I can push to a new branch but currently I didn't really understand that XD.

What to do is modify vite.config.js to something like this

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  // if env is development use / by default or use my github repo name
  base: process.env.NODE_ENV === 'development' ? '/' : '/NFT-preview-card-component/',
  build: {
    outDir: 'docs'
  }
})

Finally docs folder will appeared and I can just go to repo settings, then choose page option on sidebar, then fill with branch main with /docs path, Voila!!