How can I config to run AirFrame on Heroku.

[moises-paschoalick]

I want to try run AirFrame on Heroku and it's built ok with webpack, the build log of Heroku I put bellow. When I try to access the URL it is the response: 404 Not Found/nginx. I try many things. I think it's something releaded of the port. I try process.env.PORT too. I changed the webpack.config.cliente.prod.js like that: devServer: { hot: false, contentBase: config.distDir, compress: true, historyApiFallback: { index: '/' }, host: 'https://unaroadmap.herokuapp.com', port: process.env.PORT }

==-=-=-=-=-=- HEROKU LOG =-=-=-=-=-

-----> React.js (create-react-app) multi app detected =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git =====> Detected Framework: Multipack =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git =====> Detected Framework: Node.js

-----> Creating runtime environment

   NPM_CONFIG_LOGLEVEL=error
   NODE_ENV=production
   NODE_MODULES_CACHE=true
   NODE_VERBOSE=false

-----> Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default)

   Resolving node version 12.x...
   Downloading and installing node 12.17.0...
   Using default npm version: 6.14.4

-----> Restoring cache - node_modules

-----> Installing dependencies Installing node modules (package.json) audited 1399 packages in 9.755s

   57 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

-----> Build

-----> Caching build - node_modules

-----> Pruning devDependencies removed 932 packages and audited 463 packages in 12.798s

   23 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

-----> Build succeeded! =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git =====> Detected Framework: React.js (create-react-app) Writing static.json to support create-react-app Enabling runtime environment variables =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git =====> Detected Framework: Static HTML % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed -----> Installed directory to /app/bin Using release configuration from last framework (Static HTML). -----> Discovering process types Procfile declares types -> (none) Default types for buildpack -> web -----> Compressing... Done: 64.1M -----> Launching... Released v37 https://unaroadmap.herokuapp.com/ deployed to Heroku

-==--==- How can I change the config of this AirFrame? I'm new using react and if someone can help me I really appreciate that.

[sfncook]

@moisesguilherme What Heroku instructions did you follow to try to deploy this to heroku?

[1devNdogs]

You have to run the production build (npm run build:prod) like the airframe docs said, this will give you the compiled app in the /dist directory, then, you have to create a server.js for the express server, (runing directly with webpack on heroku is a pain, webpack is not for ruining a production server, there is an "export (build)" process for that) after that, you have to modify some scripts to instead of runing webpack with start command it will run server.js, serving the app in the /dist directory. For development with webpack you can use dev script now. more details in: https://codeburst.io/deploy-your-webpack-apps-to-heroku-in-3-simple-steps-4ae072af93a8

  "scripts": {
    "dev": "npm run start:dev",
    "start": "node server.js",
    "build:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.dev.js",
    "build:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.prod.js",
    "start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js",
    "start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js",
    "heroku-postbuild": "npm run build:prod"
  },

const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();
const distDir = path.join(__dirname, 'dist/');

app.use(express.static(distDir));

app.get("*", (req, res) => {
  res.sendFile(path.resolve(distDir, "index.html"));
});

console.log("LISTENING! on port: ", port);
app.listen(port);

For me this was the best way. Good luck!

2 more things:

• HEROKU Env : NPM_CONFIG_PRODUCTION=false This is to avoid heroku removing dev deps.

• webpack.config.client.prod.js 0.0.0.0 and process.env.PORT

  devServer: {
    hot: false,
    contentBase: config.distDir,
    compress: true,
    historyApiFallback: {
      index: "/",
    },
    host: "0.0.0.0",
    port: process.env.PORT ,
  },