npm install -g cordova

cordova platform add android

플랫폼 추가 확인

cordova platform ls

나는 실패 했음... 옛날 환경인데... 버전 문제인가?

$ cordova create cordovaReactProject

This command creates a folder cordovaReactProject containing the cordova project.

2. create-react-app을 동시에 사용하여 React 프로젝트를 설정해 보겠습니다 . create-react-app은 사용하기 매우 쉽습니다.

하나의 명령으로 모든 웹팩, 바벨 구성을 관리하여 시작하는 데 도움을 줍니다.

npm v5.2 +를 사용하는 경우 npx와 함께 설치되어 제공되므로 다음을 직접 사용할 수 있습니다.

$ npx create-react-app reactproject

npm 5.1 이하 버전 의 경우 create-react-app을 전역적으로 먼저 설치해야 합니다.

$ npm install -g create-react-app
$ create-react-app reactproject

This creates a folder reactproject which contains the react project code base.

그러면 리액트 프로젝트 코드가 포함된 폴더에 리액트 프로젝트 가 생성됩니다 .

리액트 프로젝트가 올바르게 설정되었는지 확인하려면 프로젝트 디렉터리 내에서 npm start를 실행해 보세요.

$ cd reactproject
$ npm start

This should start a server and on opening the server url ( http://localhost:3000 ) in the browser you should see something like this:

To summarize we’ve created two seperate project folders cordova and react:

cordovaReactProject -> folder containing cordova project
reactproject -> folder containing react project

3. The react project would have a directory structure similar to:

├── .gitignore
├── package.json
├── package-lock.json
├── node_modules
│   ├──..
│   ├──..
│   .
│   .
│   └──
├── public
│   ├── favicon.ico
│   ├── index.html ----> page template
│   └── manifest.json
├── README.md
└── src ----> source files , development directory
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js ----> starting point
    ├── logo.svg
    └── serviceWorker.js

The package.json file would look something like this:

Now we need to merge the two projects (Important):

Copy the src/ and public/ directories from reactproject folder to cordovaReactProject folder
The package.json files also need to be merged. Copy the “scripts”, “dependencies” and “browserList” keys from reactproject/package.json to cordovaReactProject/package.json. Eventually cordovaReactProject/package.json should look like:

cordovaReactProject updated package.json

4. Now that we have merged our react project into our cordova project the latter would have the following directory structure with src/ being our main development directory:

├── config.xml
├── hooks
│   └── README.md
├── package.json --> (merged from the react project)
├── platforms
├── plugins
├── public ---> (copied from the react project)
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src --> Main working directory (copied from the react project)
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── www -------> Build directory
    ├── css
    │   └── index.css
    ├── img
    │   └── logo.png
    ├── index.html
    └── js
        └── index.js

Since package.json was manually updated we need to make sure that the dependencies are installed:

$ cd cordovaReactProject/
$ npm install

To make sure everything has been configured correctly, you can try running npm start in the project directory. The server should start and a page resembling the one posted earlier should appear in your browser on the server url.

5. Now, we need to take care of certain important things:

Updating the meta tags in our main template page:

Add the following <meta> tags in the <head> of public/index.html.

<meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

Loading cordova.js in our main template page:

Add the following script tag just before </body> in public/index.html

<script src="cordova.js" type="text/javascript"></script>

Configuring react dom to be loaded after cordova’s ondevice ready event:

Since scr/index.js file is the entry point we need to tweak it a bit so that the react dom loads after the “deviceready” event has been fired by cordova.

Updating “homepage” in package.json:

The index.html file within the build folder has absolute paths for loading the assets (js, css files). Since the HTML file is going to run directly in webview rather than being hosted on a server the assets need to be accessed using a relative path. For e.g. we want

<script src=”./foo/bar.js”></script>

instead of

<script src="/foo/bar.js></script>

The solution for this is to add a “homepage” property in package.json as metioned below. Adding this would make sure that the assets are fetched using a relative path in the index.html file.

"homepage": "./"

6. The code from the src/ directory written in JSX and ES6 cannot be directly used as it is inside the cordova app. So basically the production build of our react app needs to be used to build the cordova app.

We can easily automate this process using cordova hooks ( more info ). Since we need to execute the react build command before cordova build is prepared, we can use the before_prepare cordova hook.

Hooks need to be defined in the project’s config.xml file. Add the below entry under <widget>:

<hook type="before_prepare" src="scripts/prebuild.js" />

This would execute the scripts/prebuild.js before a cordova build starts. Our prebuild.js file would contain a mechanism to execute the react build.

The advantage of configuring a hook is that you don’t need to worry about platform specific constructs in configuring your tasks e.g. rm -rf, cp won’t work on windows, a folder is accessed as /foo/bar in linux and C:\\foo\\bar in windows.

7. Now that the hook is defined, create a scripts folder within the project directory i.e. cordovaReactProject/ in this case. Within the scripts folder create a prebuild.js file as well.

In this file we need to perform two main functions:

Execute the react build process
React-scripts generates the build output to the build/ folder and cordova uses www/ as its input directory. So once the react build is completed we need to rename build/ to www/

I’ve used an additional rimraf module in my cordova hook, to install that:

$ cd cordovaReactProject
$ npm i rimraf --save

My prebuild.js file:

8. All done! Now we’ll build the cordova app for android to see if everything works!

Within the cordova project execute ( Android sdk and build tools must be installed — Details ):

$ cordova platform add android
$ cordova run android

This would first execute the cordova hook written, then build an apk and run it on an emulator or an android device if connected via usb.

Cordova app android build running on my android phone

Some other tips

If you are planning to use react-router-dom for routing in the app, use <HashRouter> instead of <BrowserRouter>
While accessing the cordova object access it using the window object, or else the react build would throw an undefined variable exception. For .e.g if you are using the local notification plugin ( plugin link ), instead of using it as:

cordova.plugins.notification.local.schedule({
    ....
});

access it using the window object:

window.cordova.plugins.notification.local.schedule({
    ....
});

There are other approaches of setting up a project with this configuration, I’ve used this particular approach as seting up a react project from scratch can be a challenging task.

It involves installing npm modules, creating configurations amongst other things. Doing all of this inside a cordova project adds some complexity. Using create-react-app solves a lot of these problems.

The source code is available in this github repository — https://github.com/pshubham95/cordova-react-example . You can clone this repository directly to get started.

'실전 단아 개발 가이드' 카테고리의 다른 글

Error: Cannot find module 'C:\myfront\viw/config-overrides' (0)	2023.12.28
'react-app-rewired'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다 (0)	2023.12.28
intellij idea community edition 2022.3.1 다운로드 방법 (0)	2023.12.20
MariaDB 버전 확인 방법 (0)	2023.12.20
React에 TypeScript 적용방법 (1)	2023.12.08

실전 단아 개발가이드

react cordova.js 설치

Some other tips

'실전 단아 개발 가이드' 카테고리의 다른 글

티스토리툴바

react cordova.js 설치

Some other tips

'실전 단아 개발 가이드' 카테고리의 다른 글

'실전 단아 개발 가이드' Related Articles

티스토리툴바