mischnic
commented
5 years ago Could you please reduce that example? E.g.: removing everything from the server except parcel itself, only include one subpage (utilities...).
Closed tagyoureit closed 5 years ago
mischnic
commented
5 years ago Could you please reduce that example? E.g.: removing everything from the server except parcel itself, only include one subpage (utilities...).
tagyoureit
commented
5 years ago Hi, I created a repo with a greatly simplified setup: https://github.com/tagyoureit/parcel-router-prod.
I think this comes down to how Express is routing to the "static" pages once Parcel builds them. Currently, I have
app.use( express.static( path.join( process.cwd(), '/dist/www' ), { maxAge: '14d' } ) );as my express routes. Parcel does a great job of handling the dynamic routes that are created. I think my issue is how to have Express handle the same routes with production compiling.
Is there a good way to do this or do I need to somehow hardcode the routes in Express? Much thanks!
mischnic
commented
5 years ago For Single Page (React) Apps (means client side routing), the server needs to be configured to serve the index file for any requests that aren't found. So you need to do this:
import * as http from "http";
import express = require("express");
const path = require("path").posix;
import Bundler = require("parcel-bundler");
let app: express.Application = express();
if (process.env.NODE_ENV !== "production") {
const entry = path.join(process.cwd(), "/www/index.html");
let parcel = new Bundler(entry, {
outDir: "./dist/dev"
});
app.use(parcel.middleware());
} else {
app.use(
express.static(path.join(process.cwd(), "/dist/www"), { maxAge: "14d" })
);
// Single Page App: fallback to index.html
app.get("*", (req, res) =>
res.sendFile(path.join(__dirname + "/www/index.html"))
);
}
http.createServer(app).listen(3000, () => {
console.log(`http server started on port 3000`);
});Wow! I spent a few hours looking for an answer here and was ready to start implementing isomorphic routing. This is so simple and you saved me so much time (and a lot of hair being pulled out from my head). Thanks!
Just out of curiosity, is this documented somewhere that I should have been able to find it? Seems like such a basic setup that I should have come across it in my Googling.
mischnic
commented
5 years ago 🎉
Just out of curiosity, is this documented somewhere that I should have been able to find it? Seems like such a basic setup that I should have come across it in my Googling.
I'll add it to the docs somewhere: https://github.com/parcel-bundler/website/issues/453
🐛 bug report
Hopefully this is just a setup issue, but I don't know where to start. I looked at a lot of other issues but didn't see anything relevant.
In short, with Dev environment:
With env=Production,
🎛 Configuration (.babelrc, package.json, cli command)
My current repo can be see here: https://github.com/tagyoureit/nodejs-poolController/tree/6.0-DEV
My main app page (app.tsx) looks like this:
Where my Express server is setup, I use Parcel with Dev environment like this:
For the CLI, (see package.json above) dev:
npm run devproduction:npm start🤔 Expected Behavior
I would expect to be able to browse to
http://localhost:3000/utilitiesin Production just like with Dev.😯 Current Behavior
When I browse to
http://localhost:3000everything works. However, when I try to go tohttp://localhost:3000/utilitiesthe browser gives me the messageCannot GET /utilities.💁 Possible Solution
Not sure where to look! Please help. :)
🔦 Context
Trying to allow users to use the app with all the benefits of production (less memory, faster, no need for HRM, etc).
💻 Code Sample
Current repo: https://github.com/tagyoureit/nodejs-poolController/tree/6.0-DEV
🌍 Your Environment