Github Codespaces의 Svelte 및 TailwindCSS

다음은 FrontendMentor에 몇 가지 흥미로운 과제를 제출할 때의 메모이며 기본적으로 svelte + tailwindcss 프로젝트를 설정한 다음 Github Pages에 배포할 때의 경험입니다. 이것이 최선의 방법이라고 말할 수 없습니다.

캠퍼스 이메일 .ac.id XD 때문에 무료로 받은 Github Codespace을 사용합니다. 여러 폴더를 처리하거나 패키지 및 종속성을 업데이트할 필요가 없기 때문에 지금 내 인터넷 속도보다 빠르기 때문에 마음에 듭니다.

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

첫째, 저는 항상 VS Code 동기화를 활성화하여 로컬 컴퓨터에서 일반적으로 사용하는 모든 확장과 테마를 Codespaces에서 사용할 수 있도록 합니다. 약간의 시간이 걸릴 수 있으며 이제 모든 것이 올바르게 동기화되었는지 확인하기 위해 브라우저를 다시 로드해야 할 수도 있습니다.

모든 것이 완료되면 일반적으로 자체 시간 추적을 위해 확장Wakatime을 활성화합니다. 개인 프로젝트일지라도 특정 프로젝트에 얼마나 많은 시간을 사용했는지 알고 싶습니다 XD

svelte + TailwindCSS 설치

나는 이미 sveltekit으로 실험을 해 보았고 이해하기도 쉽고 훌륭했지만 단순하고 단일 구성 요소에 대해 라우팅이나 화려한 것 없이 svelte를 사용할 수 있다고 생각합니다.

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

npm install 

svelte가 vite와 함께 실행되었으므로 TailwindCSSVite installation의 공식 가이드를 따를 수 있습니다.

하지만 이svelte-add 명령을 사용하면 더 쉽게 할 수 있습니다.

npx svelte-add@latest tailwindcss

ChasingCode.devblog post 덕분에

이제 모든 요구 사항이 설치되었다고 생각합니다. Hello World를 빌드하고 프로덕션용으로 빌드할 수 있습니다.

npm run dev 
npm run build # for production

하지만 이것을 github 페이지에서 사용할 수 있기를 원하기 때문에 기본 폴더 이름을 dist에서 docs로 변경하거나 새 브랜치로 푸시할 수 있지만 현재로서는 그 XD를 이해하지 못했습니다.

해야 할 일은 vite.config.js를 다음과 같이 수정하는 것입니다.

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'
  }
})

마지막으로 docs 폴더가 나타나고 repo 설정으로 이동한 다음 사이드바에서 페이지 옵션을 선택한 다음/docs 경로로 브랜치 메인을 채울 수 있습니다. Voila!!