Daniele Irsuti - Frontend developer

CRA con Cordova, come funzioni?

Prerequisiti

Installa Create React App CLI (CRA)

npm install -g create-react-app

Installa Cordova CLI

npm install -g cordova

Crea il progetto con CRA.

Aggiungi i seguenti script all’interno del package.json e la proprietà homepage (importante!).

homepage: './', //<----- non dimenticarlo o vedrai schermata bianca
scripts: {
    "start": "npm run remove:www && react-scripts start",
    "build": "npm run remove:www && react-scripts build",
    "build:cordova": "npm run remove:www && react-scripts build && node __script.js && mv build www",
    "test": "react-scripts test",
    "eject": "npm run remove:www && react-scripts eject",
    "remove:www": "rm -rf www"
}

CRA builda all’interno della cartella build ma Cordova ha bisogno che il contenuto della build venga spostato sotto www. Per questo motivo al comando npm run build:cordova viene dato un comando aggiuntivo: node __script.js.

Di seguito il contenuto dello script __script.js

let FS = require("fs");

// read the index.html from build folder
let data = FS.readFileSync("./build/index.html", "utf8");

function insertContent(fullContent, beforeWhat, newContent) {
  // get the position before which newContent has to be added
  const position = fullContent.indexOf(beforeWhat);

  // since splice can be used on arrays only
  let fullContentCopy = fullContent.split("");
  fullContentCopy.splice(position, 0, newContent);

  return fullContentCopy.join("");
}

// will add the <meta> tags needed for cordova app
const afterAddingMeta = insertContent(
  data,
  "<link",
  `<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">` +
    `<meta name="format-detection" content="telephone=no">` +
    `<meta name="msapplication-tap-highlight" content="no">`
);

// will add <script> pointing to cordova.js
const afterAddingScript = insertContent(
  afterAddingMeta,
  "<script",
  `<script type="text/javascript" src="cordova.js"></script>`
);

// updates the index.html file
FS.writeFile("./build/index.html", afterAddingScript, "utf8", err => {
  if (err) {
    throw err;
  }
});

Per fare prima: creare un progetto di esempio in cordova su un’altra directory, esterna al progetto, prendere il contenuto e spostarla sul progetto fatto in CRA con il package.json modificato:

cordova create quellochetipare Sostituire con il nome del progetto.

Per buildare per una piattaforma ricorda prima di aggiungerla:

cordova platform add <browser | android | ios> <— Selezionane una o aggiungila ad una ad una.

Per eseguire su una piattaforma:

cordova run <browser | android | ios>

Il resto sono tutte configurazioni standard.

— WIP —

Link utili (credits)