I am deploying my project to railway.app and getting this error Application Error Is your app correctly listening on $PORT?.
It was a mix of JS and jQuery but then I added in webpack.config.js and so I can hide my api key. Now works perfect in development but I am getting above error on deployment. Can someone please help to fix this issue.
my webpack.config.js
require('dotenv').config({ path: './.env' });
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Dotenv = require('dotenv-webpack')
const api_key = process.env.KEY;
module.exports = {
entry: [
'webpack-dev-server/client?:80',
'webpack/hot/only-dev-server',
'./assets/js/script.js',
],
output: {
filename: 'bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{ test: /\.css$/, loader: ['style-loader', 'css-loader'] },
]
},
devServer: {
contentBase: "./assets/",
hot: true,
open: true,
port: 8000,
watchContentBase: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './assets/index.html',
filename: 'index.html',
inject: 'body',
inlineSource: 'output.bundle.js',
apiUrl: `=${api_key}&libraries=places`,
}),
new Dotenv()
]
}
package.json
{
"homepage": "xxxxxxxxxx",
"name": "xxxxxxxxxxn",
"version": "1.0.0",
"description": "xxxxxxxx",
"main": "./assets/js/script.mjs",
"type": "monjs",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --mode=development"
},
"repository": {
"type": "git",
"url": "xxxxxxxxxx"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "xxxxxxxxxx"
},
"dependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"dotenv-webpack": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"url-loader": "^4.1.1",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"devDependencies": {
"css-loader": "^5.2.7",
"gh-pages": "^4.0.0",
"style-loader": "^2.0.0"
}
}
railway.app deploy log
npm WARN config production Use `--omit=dev` instead.
> [email protected] start
> webpack-dev-server --mode=development
Failed to load ./.env.
ℹ ｢wds｣: Project is running at http://localhost:8000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./assets/
ℹ ｢wdm｣: Hash: 6e346835de0c05dad8d4
Version: webpack 4.38.0
Time: 2807ms
Built at: 11/09/2022 9:55:10 AM
Asset Size Chunks Chunk Names
bundle.js 617 KiB main [emitted] main
bundle.js.map 684 KiB main [emitted] main
index.html 10.4 KiB [emitted]
Entrypoint main = bundle.js bundle.js.map
[0] multi (webpack)-dev-server/client?http://localhost:8000 (webpack)/hot/dev-server.js webpack-dev-server/client?:80 webpack/hot/only-dev-server ./assets/js/script.js 76 bytes {main} [built]
[./assets/css/style.css] 1.33 KiB {main} [built]
[./assets/js/script.js] 11.1 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?:80] (webpack)-dev-server/client?:80 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8000] (webpack)-dev-server/client?http://localhost:8000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.52 KiB {main} [built]
+ 31 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html] 10.7 KiB {0} [built]
[./node_modules/lodash/lodash.js] 531 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.
I am deploying my project to railway.app and getting this error Application Error Is your app correctly listening on $PORT?.
It was a mix of JS and jQuery but then I added in webpack.config.js and so I can hide my api key. Now works perfect in development but I am getting above error on deployment. Can someone please help to fix this issue.
my webpack.config.js
require('dotenv').config({ path: './.env' });
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Dotenv = require('dotenv-webpack')
const api_key = process.env.KEY;
module.exports = {
entry: [
'webpack-dev-server/client?http://0.0.0.0:80',
'webpack/hot/only-dev-server',
'./assets/js/script.js',
],
output: {
filename: 'bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{ test: /\.css$/, loader: ['style-loader', 'css-loader'] },
]
},
devServer: {
contentBase: "./assets/",
hot: true,
open: true,
port: 8000,
watchContentBase: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './assets/index.html',
filename: 'index.html',
inject: 'body',
inlineSource: 'output.bundle.js',
apiUrl: `https://maps.googleapis./maps/api/js?key=${api_key}&libraries=places`,
}),
new Dotenv()
]
}
package.json
{
"homepage": "xxxxxxxxxx",
"name": "xxxxxxxxxxn",
"version": "1.0.0",
"description": "xxxxxxxx",
"main": "./assets/js/script.mjs",
"type": "monjs",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --mode=development"
},
"repository": {
"type": "git",
"url": "xxxxxxxxxx"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "xxxxxxxxxx"
},
"dependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"dotenv-webpack": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"url-loader": "^4.1.1",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"devDependencies": {
"css-loader": "^5.2.7",
"gh-pages": "^4.0.0",
"style-loader": "^2.0.0"
}
}
railway.app deploy log
npm WARN config production Use `--omit=dev` instead.
> [email protected] start
> webpack-dev-server --mode=development
Failed to load ./.env.
ℹ ｢wds｣: Project is running at http://localhost:8000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./assets/
ℹ ｢wdm｣: Hash: 6e346835de0c05dad8d4
Version: webpack 4.38.0
Time: 2807ms
Built at: 11/09/2022 9:55:10 AM
Asset Size Chunks Chunk Names
bundle.js 617 KiB main [emitted] main
bundle.js.map 684 KiB main [emitted] main
index.html 10.4 KiB [emitted]
Entrypoint main = bundle.js bundle.js.map
[0] multi (webpack)-dev-server/client?http://localhost:8000 (webpack)/hot/dev-server.js webpack-dev-server/client?http://0.0.0.0:80 webpack/hot/only-dev-server ./assets/js/script.js 76 bytes {main} [built]
[./assets/css/style.css] 1.33 KiB {main} [built]
[./assets/js/script.js] 11.1 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:80] (webpack)-dev-server/client?http://0.0.0.0:80 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8000] (webpack)-dev-server/client?http://localhost:8000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.52 KiB {main} [built]
+ 31 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html] 10.7 KiB {0} [built]
[./node_modules/lodash/lodash.js] 531 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.
- I had a similar issue with a node.js deployment. When i added a PORT in environmental variables of railway, it worked fine. – Lagamura Commented Dec 1, 2022 at 14:19
- Thanks, I was able to deploy it on github so did not tried this solution. – Sohail Shams Commented Dec 20, 2022 at 16:56
1 Answer
Reset to default 4Make sure you are using the PORT environment variable. I see in the webpack.config.js file, you are using always the port 8000 instead of the PORT environment variable.
For instance, I had the same issue in a Node.js app because of using a static port, always the port 4000:
app.listen(4000, () => console.log(`Server running on port ${PORT}`));
Was a tiny fix, use the environment variable
const PORT = process.env.PORT || 4000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));