Serve Static Files during Development with Parcel

published on 2022-09-11

Serving static files like images is an essential ingredient for front-end development. With bundlers such as webpack and Parcel, this task has become as easy as developers could wish for. While this holds for the production environment of a front-end, matters are a little more complicated during development. parcel serve does not copy static files to the output directory (i.e., dist) during development, leaving developers on the outlook for a custom solution.

For production environment emulation, Parcel has introduced an API proxy that allows specifying paths that should be proxied to another destination during development. Creating a .proxyrc.json in the project's root directory, we can configure a http-proxy-middleware options object according to our needs. Since serving static files is most conveniently accomplished with serve-static, using http-proxy-middleware is not sufficient, though. Luckily, we can also configure the API proxy through a .proxyrc.js in the project's root directory with any connect-compatible middleware that we are familiar with from express.

Leveraging the API proxy, we can serve static files at /static using Parcel from a directory called public with the following configuration in .proxyrc.js (based on the idea of subata on GitHub):

.proxyrc.js

const path = require("path");
const serveStatic = require("serve-static");

const assetsPath = path.join(__dirname, "public");
// Beware the leading `/` before the path!
const pathToServe = "/static";

module.exports = function (app) {
  app.use(pathToServe, serveStatic(assetsPath));
  
  // Optionally, serve more static assets from another folder.
  // app.use(pathToServe, serveStatic(anotherAssetsPath));
};

If we host more than one folder of assets, we can simply add further request handlers (i.e., calls to app.use) by copying line 8 (i.e., app.use(pathToServe, serveStatic(assetsPath))) and providing a different path instead of assetsPath. That is possible because app.use will pass a request on to the next handler in case of a failure (i.e., a file not being found).