[svelte] capacitor, sveltekit을 이용하여 모바일 앱 만들기

2022. 6. 17. 20:55·svelte
728x90
반응형

기존 실행되는 sveltekit 프로젝트에서 adapter가 달려있다고 가정한다.

capacitor 를 이용할 것이다.

npm install -D @capacitor/core @capacitor/cli @capacitor/android @capacitor/filesystem @capacitor/geolocation

위 명령어로 capacitor 등등 옵션 등을 install 한다.

그 이후, 

npx cap init

위 명령어를 입력하여, capacitor.config.json 파일을 생성시킨다.

{
  "appId": "com.example.app",
  "appName": "javamin",
  "webDir": "build",
  "bundledWebRuntime": false,
  "server": {
    "url": "https://javamin.tistory.com",
    "cleartext": true
  }
}

위 내용은 capacitor.config.json의 내용인데 server 이 후로 진행되는 코드는 url과 연결되어 앱으로 만들어진다.

 

npx cap add android

Android를 추가하고,  

npm run build

빌드를 한다. 하지만, build 시에 index.html 파일이 존재하지 않아서  동기화가 되지 않는다.

npx cap sync

위 명령어로 동기화를 한 후, 

#1
npx cap open android

#2
npx cap run

1. android studio 가 켜져서 에뮬레이터가 실행된다.

2. vscode 에서 에뮬레이터를 실행한다.

 

728x90
반응형

'svelte' 카테고리의 다른 글

Svelte4, Sveltekit2 으로 마이그레이션  (0) 2023.12.29
[SVELTE] 프로젝트 생성  (0) 2022.05.10
'svelte' 카테고리의 다른 글
  • Svelte4, Sveltekit2 으로 마이그레이션
  • [SVELTE] 프로젝트 생성
밍글링글링
밍글링글링
mingling - 밍글링, 밍글밍글링. 코드와 어우러지다. IT/ 프로그래밍/소스
    반응형
    250x250
  • 밍글링글링
    mingling
    밍글링글링
  • 전체
    오늘
    어제
    • 밍글링글링 (407) N
      • Flutter (2)
      • 일상생활 (8)
        • 리뷰 (1)
        • 생활정보 (4)
        • 맛집 (0)
        • 여행 (0)
        • 모든정보 (3)
      • JAVA (126)
        • 개념 (6)
        • 예제 (115)
        • Exception (2)
      • C (1)
        • C (1)
        • C++ (0)
        • C# (0)
      • JS (29)
        • JavaScript (18)
        • JQuery (5)
        • AJax (0)
        • NODE.JS (6)
        • Angular.JS 2.0 (0)
      • WEB (87)
        • HTML (6)
        • CSS (61)
        • JSP (20)
        • JSTL (0)
      • FrameWork (8)
        • Spring (8)
        • BootStrap (0)
        • MyBATIS (0)
        • JUnit (0)
      • 외부 라이브러리 (5)
      • 공유 소스 관리 (5)
        • Git (5)
        • SVN (0)
      • 빅데이터 프로그래밍 (37)
        • Python (37)
        • R Programming (0)
      • DB (7)
        • ORACLE (0)
        • MySql (6)
      • Development Tools (7)
        • StarUML (0)
        • eXERD (0)
        • Eclipse (4)
      • SKILL (6)
        • Migration (0)
        • Security (6)
      • MicroSoft (0)
        • Excel (0)
        • Word (0)
      • Android (0)
      • Server (21)
        • Ubuntu (5)
        • Linux (15)
      • IOS (0)
      • XML (0)
      • 미디어 (0)
      • 공지사항 (3)
      • NETWORK (1)
      • 게임 (4)
        • 피파 (1)
        • 리니지M (0)
        • 배틀그라운드 (1)
        • 듀랑고 (2)
      • 세상 이슈 (6)
      • 일렉트론 (0)
      • 대회 소식 (4)
      • 업무 (2)
      • Express, Vue (6)
      • docker (11)
      • svelte (3)
      • 블록체인 (1)
      • IT (10) N
      • Rust (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    VS Code 팁
    Extension Bisect
    css list
    css tb
    자바 for문
    mysql db
    docker
    오류
    SSL 인증서
    자바 exception
    ssl 인증서 발급
    gitlab 설치
    css float
    svelte
    lang rust
    vue cli
    jsp include
    러스트
    spring java
    jsp parameter
    티스토리 자동화
    java casting
    Rust lang
    자바 객체 지향
    vscode
    Java Array
    브라우저 자동화
    리눅스 설치
    클론코딩
    nginx ssl 설정
    css table
    vue 설치
    프런트엔드
    자바 배열
    nginx
    자바 생성자
    에디터 팁
    servlet class
    proxy pass
    AI 코딩 에이전트
    Node
    API 설계
    ubuntu
    rust linux
    css transition
    css block
    React Compiler
    nginx ssl 적용
    자바 클래스
    css perspective
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
밍글링글링
[svelte] capacitor, sveltekit을 이용하여 모바일 앱 만들기
상단으로

티스토리툴바