[tauri] 테스트용 앱 기본 구성

간단한 용도로 나름 UI를 갖춘 앱 만들때 가끔 사용하기 위해 기본적인 프로젝트 설정 정리
웹은 만질일이 없다보니 할때마다 기억이....

 

앱 템플릿

npm create tauri-app@latest

frontend : TypeScript / JavaScript
package manager : npm
UI template : React
UI flavor : TypeScript

npm install

 

tailwindcss

Install Tailwind CSS with Create React App - Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

tailwind.config.js 수정

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

 

./src/App.css 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

 

./src/styles.css 제거
./src/main.tsx 파일내 import "./styles.css"; 제거

 

핸들러 설정

rust

./src-tauri/src

#[tauri::command]
fn myFunction(arg: &str) -> String {

}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![myFunction])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

 

tsx

async function myFunction() {
    await invoke("myFunction", { arg }));
}

 

 

실행

npm run tauri dev

 

 

빌드

npm run tauri build