Express Middleware in Parcel 2?

[samanime]

Is there any kind of middleware for Express built into Parcel 2 yet?

I pulled the repo and the only references seem to be in the (now private) parcel-bundler package.

I also couldn't find any documentation that would seem to indicate it, other than talking about the more programmatic interface, but that still seemed to be pretty self-contained and couldn't be wired with Express directly.

Am I missing something? Any code or samples?

[DeMoorJasper]

@samanime there's no more middleware in parcel 2

We moved away from it to streamline our plugin ecosystem and have a plugin type named reporter that could be used to create your own server if you'd really want to have that. Or you could simply run parcel in watch mode and run your own server on the dist directory.

[adrianmcli]

This sounds like a pretty big cognitive shift from the middleware approach. The Reporter docs are also quite bare right now: https://parcel2-docs.now.sh/plugin-system/reporter/

Will there be an example of how to migrate from the old Express middleware approach?

[adrianmcli]

Regarding the programmatic API, @mischnic posted some examples from the new docs.

It's good to see these examples, but I still can't wrap my head around how to migrate from v1 to v2. I suggest that we put out a "Migration Guide" for those who are using the previous API with the Express middleware, illustrating exactly how to replicate the same behavour in a "before and after" manner.

For example, this is what I currently have but I can't figure out how to do the same in v2:

const Bundler = require("parcel-bundler");

const entryFiles = [path.join(__dirname, "./app/index.html")];
const bundler = new Bundler(entryFiles, { logLevel: 1 });

const app = express();
app.use("/", bundler.middleware());

I shouldn't need to learn about the plugin ecosystem and the reporter to make this work. Ideally there should be an equivalent code block example so that we can easily migrate to v2.

[jzhobes]

Agreed. Also have a very similar setup, and after spending a couple hours getting nowhere with v2, I'm just going to abandon the upgrade and stick with v1 until there's an improved upgrade path.

[astrofrans]

+1 this would be hella useful. I take it you haven't found any solution for migrating to parcel2 using this approach? 🙏

[101arrowz]

You don't need to use the middleware with the new proxying feature.

If you want to emulate your above code:

In server.js:

const app = express();
app.get('/hello-world', (req, res) => {
  res.send("Hello world!");
});
app.listen(54321);

In .proxyrc:

{
  "/api": {
    "target": "http://localhost:54321",
    "pathRewrite": {
        "^/api": ""
    }
  }
}

That proxy config will make Parcel reroute all requests from http://localhost:parcel-port/api/your-path to http://localhost:54321/your-path.

[AndyOGo]

@101arrowz
This is not a feasible nor reliable approach if you have strict Same-Origin Policies in place, as

Two URLs have the same origin if the protocol, port (if specified), and host are the same for both. You may see this referenced as the "scheme/host/port tuple", or just "tuple".
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#definition_of_an_origin

[nickwelp]

You don't need to use the middleware with the new proxying feature.

If you want to emulate your above code:

In server.js:

const app = express();
app.get('/hello-world', (req, res) => {
  res.send("Hello world!");
});
app.listen(54321);

In .proxyrc:

{
  "/api": {
    "target": "http://localhost:54321",
    "pathRewrite": {
        "^/api": ""
    }
  }
}

That proxy config will make Parcel reroute all requests from http://localhost:parcel-port/api/your-path to http://localhost:54321/your-path.

Whatever docs were linked to for a proxying feature are gone

[pykenny]

I was doing something like this in Parcel 1, in order to serve some other static files from another directory:

const bundler = new Bundler(entry, options);   // A parcel-bundler instance
const server = express(); // Express server for static files in another directory

// Serve static files in '/path/for/some/other/static/files'
server.use('/other_statics', express.static('/path/for/some/other/static/files'));
// Set up parcel-bundler middleware
server.use(bundler.middleware());

server.listen(port);

Does removing middleware means I must separate them into two scripts (one for Express server, and another for Parcel)? Using proxy feature also sounds like I need to modify .proxyrc whenever I change Express server's port.

(And there's no description about options in v2's document, mappings between API options and CLI options, as well as mappings between v1 and v2., type information only doesn't help at all and I'm still figuring out.)

[DeMoorJasper]

@pykenny you can also use javascript in the proxy config, so you can actually start your express server in that script if you want the same-ish behavior as before.

[pykenny]

I just found that Parcel.run() is asynchronous, so you can do additional things after the server being stacked up without going blocked.

Below is my initial attempt to run both servers described above in the same script (assume it's placed in project root):

const Path = require('path');
const Parcel = require('@parcel/core').default;
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const devPort = 4000;
const servicePort = 4001;
const staticFilePath = './static'

// Development Server Settings
const frontEndDevServerOptions = {
  defaultConfig: require.resolve('@parcel/config-default'),
  entries: Path.join(__dirname, './src/index.html'),
  outDir: Path.join(__dirname, './dist'),
  publicUrl: '/',
  mode: 'development',
  cache: false,
  logLevel: 4,
  serve: {
    publicUrl: '/',
    port: devPort,
  },
  hot: {
    port: devPort,
    host: '/',
  },
};

const frontendDevServer = new Parcel(frontEndDevServerOptions);
frontendDevServer.run();

const server = express();
server.use('/static', express.static(staticFilePath));

const parcelMiddleware = createProxyMiddleware({
  target: `http://localhost:${devPort}/`,
});
server.use('/', parcelMiddleware);

// Run your Express server
server.listen(servicePort, () => {
  console.log(`Listening to port ${servicePort}...`);
});

So the expected behavior is:

1. When I access URL http://localhost:4001/static/octocat.png, the browser will fetch the image octocat.png in static folder under project root.
2. When I access URL http://localhost:4001/index.html, it will be routed to http://localhost:4000/index.html and serve me bundled index.html in dist folder under project root.

Currently 1. works but 2. doesn't. A message saying Error occured while trying to proxy to: localhost:4001/index.html was returned.

Console outputs:

[HPM] Proxy created: /  -> http://localhost:4000/
Listening to port 4001...
ℹ️ Server running at http://localhost:4000
✨ Built in 23.70s
@parcel/reporter-dev-server: Could not send success event to devserver because it does not exist.
[HPM] Error occurred while trying to proxy request /index.html from localhost:4001 to http://localhost:4000/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm also looking up CLI options to figure out the correct settings.

[Sebobo]

Thanks! This worked for me when I changed the parcel option server to serveOptions and enabled the cache option 👍

[AndyOGo]

Vite has a middleware mode.
https://vitejs.dev/config/server-options.html#server-middlewaremode