I'm sorry for the confusing title, but I am currently puzzled by a situation related to how Express serves static files. I am working on a simple Vue app that is being served statically by Express.
server/app.js (entry point)
import express from 'express';
import morgan from 'morgan';
import path from 'path';
import bodyParser from 'body-parser';
const app = express();
// Serving static files from the public directory
app.use(express.static(path.join(__dirname, '..', 'public')));
// Using morgan to log requests in dev mode
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true,
}));
app.listen(process.env.PORT || 3000, () => {
console.log(`Listening on port: ${process.env.PORT}`);
});
// Serving index.html page when root request is made
app.get('/', (req, res, next) => {
res.sendFile('index.html', {
root: path.join(__dirname, '..', 'public'),
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
public/main.js
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import App from './App';
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});
public/App.vue
<template>
Hello World!
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
#app {}
</style>
When I serve the files from the public directory, I am able to access them in the browser at URLs like http://localhost:3000/App.vue.
This setup should display a simple UI page with just the text "Hello World!" In Chrome, however, I only see a blank page with the title "Hello World" and cannot open DevTools. The Vue extension also does not detect Vue running on the page.
In Mozilla, the same issue occurs as in Chrome, but I can view DevTools and only see basic HTML without any other files being loaded, even if they are present in the public directory. There are no errors in the logs either.
While initially hitting the root endpoint used to produce a response in the server logs, it no longer does so for some reason.
I have attempted to use a basic webpack.config to bundle my Vue and JS files, but the behavior remains the same.