IP : 54.147.0.155

[오픈소스] SVELTEKIT+ CAPACITOR 설치 그리고 안드로이드 스튜디오 빌드 앱실행


SVELTEKIT+ CAPACITOR 설치 

그리고 안드로이드 스튜디오 빌드 앱실행

 

 

좋은 YOUTUBE 영상을 발견하여 문서로 만들어 봅니다.

https://www.youtube.com/watch?v=If1p7yV1gec 

 

앞서 등록한 svelte ionic은 SVELTE + ROUTIPY(ROUT 라이브러리)로 제작된 것입니다.

그래서 최근 업데이트된 SVELTEKIT 의 유용한 기능을 사용할 수 없어서 아쉬웠는데,

아래 방법을 사용하면 SVELTEKIT에 CAPACITOR를 연동하여 개발 할 수 있습니다.

단, IONIC 컴포넌트 사용은 별도로 지정해야 할 것 같네요.

요즘 TAILWIND 사용하고 있는데 이것이 대안이 될 수 있지 않을까요?

 

SVELTEKIT 설치

스벨트KIT 설치(스벨트와 스벨트킷은 다릅니다. 아래 내용은 스벨트킷에서만 작동합니다.)

npm init svelte@next [프로젝트명]


프로젝트 폴더로 이동

CD [프로젝트명]


의존성 패키지 다운로드

npm i


정상작동 확인

npm run dev 


스벨트 빌드 아답터 설치

*스벨트는 빌드 방식이 다양하다. 자동으로 빌드 결과를 서버로 업로드하는등, CDN 서비스와 연동하는 등 편의 기능을 제공하는데, sveltekit 부터는 기본 아답터 그리고 sveltekit docment 페이지에 안내하는 아답터로는 자체 운영서버로 빌드하는 아덥터 내용이 없다. 그래서  해깔릴 수 있다. (아무래도 상용 CDN 서비스 업체에서 후원을 받고 있는듯하다 뒷광고 논란이 있는 부분이다.)

그리고 검색하면 나오는 sveltejs/adapter-static 를 GITHUB 에서 들어가 안내하는데로 다운로드하면 잘 안된다.


npm i @sveltejs/adapter-static@1.0.0-next.26

*npm i -D @sveltejs/adapter-static@next 하라고 read.me 파일에 안내하는데 @next 로 하면 에러가 나와서 구체적으로 버전 번호를 적어주는 방식으로 해야한다.


svelte.config.js 파일을 열어서


import adapter from '@sveltejs/adapter-static';

내용을 제일 윗 줄에 넣어준다. 기존 어덥터는 주석처리하면 빌드시 두가지 방식으로 빌드되지 않을 것이다. 


그리고 아래 KIT 안에 adapter:adapter() 를 넣고 그안에 옵션 설정을해준다.

export default {

kit: {

adapter: adapter({})

}




CAPACITOR 설치

CAPACITOR 패키지 다운로드

npm install @capacitor/core @capacitor/cli @capacitor/android


CAPACITOR 설치

npx cap init [앱이름] [앱ID]

*입이름은 입이름

*앱ID는 회사 구분 ID 예)com.example.appname or com.appname.app 


실행하면

 Web asset directory 디렉토리 물어보는데, 이때 build 로 하고 엔터

*웹앱 폴더를 복사해서 안드로이드에 붙여 넣는데 복사할 폴더 즉, svelte 빌드 결과 폴더를 지정한다. svelte build 시 adapter 설정에서 폴더 명을 지정하면 된다 주로 build 폴더로 만든다.



CPAPCITOR 에 Android 개발환경 설치

npx cap add android




sveltekit 빌드 + CAPACITOR SYNC 연결 

그리고 안드로이드 스튜디오 실행

그리고 실시간 변경 사항 확인 그것도 앱에서

 

 

 

sveltekit 빌드

npm run build


capacitor sync 

npx cap sync

* capacitor sync 는 build 폴더안의 내용을 android 폴더의 웹서버 폴더로 복사해줍니다.


capacitor cli 로 안드로이드스튜디오 실행

npx cap open androidb

*capacitor cli 로 열지 않고 실행하려면

 android studio 에서 file>new>Import project 메뉴를 이용하여 폴더를 지정하는 방식으로

이렇게해서 Android studio 가 열리면 gradle 파일 설치하느라고 한참 걸립니다. 좀기다리고

에러가 없으면 Run app(상단 플레이버튼) 또는 Shift + f10 으로 앱 설치 실행

 

실시간 저장 변경내용 앱에서 확인

(usb케이블 또는 wifi 디버그 연결 되어있어야합니다.)

root 폴더에 capacitor.config.ts 파일


bundledWebRuntime: false, 줄 아래에

server:{ url : "http://10.0.2.2:3000", cleartext : true }

추가

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오톡으로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

공실장 개발센터

번호 제목 글쓴이 날짜 조회수
20 오픈소스 SVELTEKIT+ CAPACITOR 설치 그리고 안드로이드 스튜디오 빌드 앱실행 관리자 01-28 1,534
19 오픈소스 sveltekit 로그인 관리자 12-19 1,301
18 오픈소스 sveltekit Cloudflare에 배포하면 받듣시 해줘야할 일! 서브도메인 ssl 통신 허용! 관리자 12-09 2,111
17 오픈소스 sveltekit 빌드하고 배포하기 (클라우드플레어) 관리자 12-06 2,243
16 오픈소스 sveltekit 빌드하고 배포하기 클라우드플레어 이용하게된 계기 - 프롤로그 관리자 12-06 2,764
15 공시사항 신고가 접수된 게시글입니다. 관리자 11-22 1,022
14 오픈소스 svelte + capacitor 에서 https 로 post로 값넘기기 +1 관리자 01-31 2,036
13 오픈소스 svelte routify 에서 layout 상속 재정의 하기 +1 관리자 10-05 1,939
12 오픈소스 svelte + capacitor + cordova + ionic 빌드하고 폰에 올려서 확인하기 관리자 10-05 3,998
11 오픈소스 svelte + capacitor + cordova + ionic 만들기 쉬운 하이브리드앱 조합 관리자 10-05 2,886
10 오픈소스 svelte sapper 링크 걸기 a href 말고 스크립트로!! 관리자 10-01 3,552
9 오픈소스 svelte on:click 사용 방법 주의사항 관리자 10-01 3,541
8 오픈소스 svelte sapper 빌드하고 서버에 올리기 +1 관리자 09-30 3,624
7 오픈소스 svelte ui +1 관리자 08-03 1,746
6 오픈소스 angular vs react vs vue vs svelte? 관리자 08-03 2,123
5 오픈소스 지도형 홈페이지 파일 그누보드 관리자 04-24 1,734
4 오픈소스 지도형 중개업소 홈페이지 보수 계획 관리자 12-05 1,860
3 IOT 수도계량기 esp32-cam 관리자 12-05 2,763
2 IOT 현재 건물에 설치 되어 있는 CCTV 의 문제점 그리고 ESP32-CAM +2 관리자 12-05 4,505
1 공시사항 공실장 개발샌터 안내 +1 관리자 12-03 1,968