node - procfile heroku

Alojando una aplicación React de producción creada con Wepback en Heroku

Question

Cada vez que presiono heroku, simplemente dice "No encontrado". ¿Asumo que es porque el paquete web no funciona?

He intentado todo tipo de secuencias de comandos:

"scripts": {
  "clean": "rimraf dist",
  "build": "npm run clean && NODE_ENV=production && webpack -p --progress",
  "postinstall": "npm run builds",
  "serve": "webpack-dev-server"
}

y otra, simplemente sin la postinstalación.

El que tenga postinstall me dará un error, diciendo que no estaba instalado el paquete web (guardado en mis devDependencies). En el segundo, obtengo una compilación exitosa en el registro de Heroku pero "No encontrado" cuando cargo la página.

Answer 1

Debe colocar el paquete web (así como otras dependencias que necesite en Heroku) en "dependencias" en su paquete.json, no en "devDependencias".

Answer 2

Creo que una mejor manera de manejar esto es mantener su package.json . package.json limpio, y dado que Heroku hace que sea más difícil construir cosas, solo maneje ese caso específico.

Usamos el enganche postinstall de NPM para realizar tareas de compilación, cargar dependencias de desarrollo para esas tareas, limpieza, etc.

Desde la sección de scripts de su package.json . package.json :

"scripts": { 
  "postinstall": "node ./ops/heroku-build.js" 
}

Y heroku-build.js :

''use strict'';

if (''HEROKU'' in process.env || (''DYNO'' in process.env && process.env.HOME === ''/app'')){

  const pkg = require(''../package.json'');
  const ChildProcess = require(''child_process'');


  let deps = pkg.devDependencies;
  let packages = "";

  Object.keys(deps).forEach((key) => {
    packages += `${key}@${deps[key]} `; // note space at end to separate entries
  });

  try {
    console.time("install");
    console.log("starting npm install of dev dependencies");
    ChildProcess.execSync(`npm install ${packages}`);
    console.timeEnd("install");

    console.time("build");
    console.log("starting npm build");
    ChildProcess.execSync(`npm run build:all`);
    console.timeEnd("build");

    console.time("uninstall");
    console.log("starting npm uninstall of dev dependencies");
    ChildProcess.execSync(`npm uninstall ${packages}`);
    console.timeEnd("uninstall");
  }
  catch (err) {
    console.error(err.message);
  }
} else {
  console.log("Not Heroku, skipping postinstall build");
}

De esta forma, si decidimos implementar AWS o algún otro lugar en el futuro, podemos manejar las idiosincrasias de su entorno por separado.

Documentación de Heroku sobre cómo personalizar el proceso de compilación .