Why can't I deploy to heroku?

Question

Node.js

I have an application that I run locally in two steps:
1. I start the app/server/index.js server using the node index.js command
2. I start the client which is in the app root using webpack-dev-server --open
I try deploy and ran into an error.
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
The structure of my
App is:
-server
--index.js
--package.json
--Procfile
-src
-index.js
-package. json
I am sending ajax requests from the client, so I changed API_URL from localhost to heroku url.

const API_URL = `http://weather-mern.herokuapp.com/:${process.env.PORT}/data`
      axios({
            method: 'get',
            url: `${API_URL}/get`
        })

Added process.env.PORT to the server's index.js and client's webpack.config

// Start the server
const port = process.env.PORT || 3000;

app.listen(port, () => {
});

devServer: {
    port: process.env.PORT || 3000,
    host: 'localhost',
    //Be possible go back pressing the "back" button at chrome
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    publicPath: publicPath,
    contentBase: path.join(__dirname, publicPath),
    disableHostCheck: true,
    public: 'weather-mern.herokuapp.com',
    //hotmodulereplacementeplugin
    hot: true
  },

The Procfile which is located in the app/server/ directory contains node index.js.
Maybe you need to somehow also launch the webpacka client?
I am very confused with heroku.
Can someone help on skype, telegram or wherever it is convenient for you?