Update
I have made some changes to the Procfile in order to consolidate my components.
New Procfile Configuration:
web: npm run build-client && node server/index.jsUnfortunately, this has resulted in a significant delay in loading time for my application. The bundling process is taking too long, leading to a poor user experience. Is there a more efficient way to handle this situation?
If all else fails, I am wondering if there is a way to display a static page immediately with the message:
"Blame Heroku, not me"
====== Original Context =======
The application functions correctly when using heroku local and accessing localhost:8080. However, upon deployment with heroku open, the view fails to render. The console displays the following error message:
app.bundle.js:1 Uncaught SyntaxError: Unexpected token <This bundle contains my React components, which are structured with webpack codesplitting to load dependencies at different points due to the combination of afront/three.js framework and React on the frontend. It's puzzling why it works fine locally but encounters issues during deployment.
index.html
I have organized some JS modules by aframe/three components within index.bundle, while all of my react components reside in app.bundle
<head>
<meta charset="utf-8">
<title>Faceoff!</title>
<script src="./commons.js"></script>
<script src="./index.bundle.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<style> ... </style>
</head>
<body>
<div id="app"></div>
<script src="./app.bundle.js" defer></script>
</body>
webpack.config.js
'use strict'
const webpack = require('webpack')
const path = require('path')
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: 'commons.js'
})
const config = {
context: path.resolve(__dirname, 'client'),
entry: {
index: './index.js',
app: './app.jsx'
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name].bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{
test: /jsx?$/,
include: path.resolve(__dirname, 'client'),
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
plugins: [
extractCommons
]
};
module.exports = config
index.js
This file contains the server-side code for the application. Posting this here as others have found solutions around this area.
'use strict'
const express = require('express');
const path = require('path');
const app = express();
const production = process.env.NODE_ENV === 'production';
const port = production ? process.env.PORT : 8080;
var publicPath = path.resolve(__dirname, '../public');
app.use(express.static(publicPath));
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'index.html'))
})
app.listen(port, () => {
console.log(`Virtual Reality Enabled On Port ${port}`);
});