Why express.js can not find static files? - node.js

Question

I created simple express.js server
Server config:
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
const SERVER_PORT = 3000;
if (process.env.NODE_ENV === "development") {
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
app.use(webpackHotMiddleware(compiler));
}
app.use(express.static("build"));
app.get("/", (req, res) => {
res.sendFile(__dirname + '/build/index.html', { root: __dirname })
});
app.listen(SERVER_PORT, (error) => {
if (error) {
console.error(error)
} else {
console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", SERVER_PORT, SERVER_PORT)
}
});
I build project with webpack. here is webpack config:
const BUILD_DIR = path.resolve(__dirname, './build');
const ASSETS_PATH = path.resolve(__dirname, './src/js');
const STATIC_PATH = path.resolve(__dirname, './public')
var webpack_config = {
mode: ( process.env.NODE_ENV === "production" ) ? "production" : "development",
context: __dirname,
entry: {
main: [
"react",
"react-dom",
"react-router"
],
react_app: [
path.join(ASSETS_PATH, "/index.tsx"),
"webpack-hot-middleware/client?path=/__webpack_hmr&reload=true"
]
},
output: {
path: BUILD_DIR,
filename: 'js/[name].min.js',
publicPath: '/build',
hotUpdateChunkFilename: '.hot/hot-update.js',
hotUpdateMainFilename: '.hot/hot-update.json',
},
resolve: {
extensions: [' ', '.web.js', '.ts', '.tsx', '.js', '.jsx', 'css'],
},
devtool: ("production" === process.env.NODE_ENV) ? "source-map" : "eval-source-map",
module: {
rules: [
{
test: /\.(jsx|js)$/,
use: ['babel-loader?compact=true&comments=true&minified=true', 'eslint-loader'],
exclude: /node_modules/
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/'
},
{
test: /\.(ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/css/fonts/'
}
}
},
{
test: /\.(eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/css/media/'
}
}
},
{
test: /\.jpe?g$|\.ico$|\.gif$|\.png$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
limit: 1024 * 10,
name: '[name].[ext]',
outputPath: 'images/'
}
}
},
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
}
}
, 'css-loader'],
},
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: ' Appointment-APP | Stefanini EMEA ',
template: './public/index.html',
filename: path.join(BUILD_DIR, '/index.html'),
chunks: ['main', 'react_app']
}),
new CopyWebpackPlugin({
patterns: [
{
from: path.join(STATIC_PATH, '/images'),
to: path.join(BUILD_DIR, '/images'),
toType: 'dir'
},
]
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css',
}),
],
};
Here I have 2 mods- production and delete. In delete mode it works nice, but when I launch server and try to enter http://localhost:3000/ I get errors like:
Refused to apply style from 'http://localhost:3000/build/css/react_app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:9 GET http://localhost:3000/build/js/main.min.js net::ERR_ABORTED 404 (Not Found)
So, I specified static folder path - app.use(express.static("build"));, but no result. It seems, that express cannot find files in "buid" folder

Answer 1

You have to code like this
app.use('/', express.static(path.join(__dirname, 'build')))
then check.

Answer 2

may be this will be useful for somebody. to solve this issue I used express documentation and Jay Suchak variant. Code
app.use('/build', express.static(path.join(__dirname, 'build')));
worked for me