How to start react-native with ignite boilerplate.

 

 

 

React Native 학습을 시작하기 앞서 관련된 boilerplate를 알아봤다.

 

현재 깃허브에서 인기순위 1위 ignite를 실행해보고자 한다.

https://github.com/infinitered/ignite

infinitered/ignite

 

설치 및 관련 설명은 깃허브 페이지에도 잘 나와 있지만,

그 과정을 기록하기 위해 글을 써내려 가고자 한다.

 

---

먼저 아래와 같이 ignite-cli를 설치하고

바로 기본 프로젝트를 생성해본다.

$ yarn global add ignite-cli
$ ignite new MyApp

생성 과정에서 몇가지 선택을 해야한다.

먼저 boilerplate 종류를 Bowser와 Andross 중 하나를 선택해야한다.

나의 경우 Bowser를 선택했다.

Andross의 경우 기존 react 프로젝트를 진행했을때 써왔던 redux와 saga를 사용해서 편할테지만,

Bowser에서 MST를 사용하는데 학습 조금만 하면 더욱 간편하게 코드를 작성 할 수 있다고 해서 선택!

 

다음으로 Expo 사용 유무를 선택해야하는데,

Expo로 할꺼면 Ignite를 사용하지 않았을테니 False!

문제의 Detox이다. 테스트에 유용할거라 생각해서 True를 하니.. 설치 에러가 발생했다.

 

에러는 아래와 같다.

 

무리 없이 설치가 완료 됐다면, 오늘 아주 운이 좋다고 생각하면 된다.

나의 경우 여러 문제가 생겨 몇 시간을 소모했다.

05:39:46 [ignite] changed to directory /react-native/MyNewIgniteApp/MyNewIgniteApp
05:39:46 [ignite] merging Bowser package.json with React Native package.json
05:39:46 [ignite] writing newly merged package.json
05:39:46 [ignite] adding boilerplate to project for generator commands
05:41:20 [ignite]
  Error: Command failed with exit code 2: ignite add bowser --debug
  
  - error.js:56 makeError
    [global]/[gluegun]/[execa]/lib/error.js:56:11
  
  - index.js:114 handlePromise
    [global]/[gluegun]/[execa]/index.js:114:26
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7
  


      There were errors while generating the project. Run with --debug to see verbose output.
    
an error occured while installing ignite-bowser boilerplate.
{ Error: Command failed with exit code 2: ignite add bowser --debug
    at makeError (/Users/.config/yarn/global/node_modules/gluegun/node_modules/execa/lib/error.js:56:11)
    at handlePromise (/Users/.config/yarn/global/node_modules/gluegun/node_modules/execa/index.js:114:26)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  command: 'ignite add bowser --debug',
  exitCode: 2,
  signal: undefined,
  signalDescription: undefined,

 

원인을 찾다 해결이 되지 않아 다른 방법으로 진행해보았다.

 

 

react-native-ignite 패키지를 설치한다.

$npm install -g react-native-ignite
$ignite new MyApplication

설치가 정상적으로 잘 됐다.

그러나 또 다른 문제가 발생 했다.

$ react-native run-ios

구글링을 해보고 따라해 봤지만, 적용되지 않았다.

Found Xcode project MyApplication.xcodeproj

Cound't find iPhone 6 simulator

 

 

 

다시 원점으로 돌아가,

 

cli를 다시 설치하고

$ npm install -g ignite-cli
# or
$ yarn global add ignite-cli

새로운 프로젝트를 생성

$ ignite new MyApp -b bowser

 

정상적으로 생성이 완료됐다..

 

 

이유는 모르겠다.. 

컴퓨터를 재부팅 하지도 않았고,

각 과정들 사이에서 기록하지 못할 삽질들 덕분으로 판단된다.

(xcode/simulator 설정 등)

 

 

아무튼 마지막 중요 관문!

프로젝트를 실행해보자.

$ react-native run-ios

먼가 제대로 되는것 같다!

 

새로운 터미널이 팝업된다.

 

simulator가 실행 완료 되면

터미널에서 'r' 을 입력한다.

 

앱 아이콘이 생성된다.

 

앱 메인 화면!

 

 

 

 

 

 

---

 

https://github.com/infinitered/ignite-bowser

infinitered/ignite-bowser