menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Parcel

📦🚀 Blazing fast, zero configuration web application bundler

Channels
Team

Using parcel to transform css and js assets for a sinatra app

December 11, 2020 at 7:42pm

Using parcel to transform css and js assets for a sinatra app

December 11, 2020 at 7:42pm
I have a sinatra app that serves some js and css for some login pages outside of our react app. I'm thinking about using parcel to transform my layout.html.erb file which references the js and css through link / scrip tags
I think I would just need to create a transformer for html.erb files. the only difference from an html file is that i need to maintain the erb for <%= yield %>
alternatively i could run parcel on the js and css assets directly, but it feels like running it on my html-like layout would be the best way to take advantage of processing tha layout file to reference the build js and css in any environment.
anybody have suggestions or prior art here?

December 22, 2020 at 2:12pm
Exactly looking for the same thing. Tried snowpack and now on Parcel, otherwise I will have to finally settle with Webpack.
The scenario is
  • The backend has its own templating engine and doesn't want to process those files using Parcel
  • Instead it want parcel to treat Javascript, CSS, Images and Fonts as there own entry files and process them to the out dir
  • For production, it will be nice to have a manifest file. This is not the web manifest file, but instead a file that contains the original entry path along with the compiled path. This will help us reference the compiled paths with hash inside the template engine
I think you're describing what we ended up doing. Here's some scripts from my package.json
"start": "yarn build-admin-assets && yarn build-saml-assets && parcel serve ./client/src/index.tsx ",
"build": "yarn build-admin-assets && yarn build-saml-assets && parcel build ./client/src/index.tsx --dist-dir ./public --log-level=error",
"build-admin-assets": "parcel build assets/admin.* --dist-dir ./public --log-level=error",
"build-saml-assets": "parcel build assets/saml.* --dist-dir ./public --log-level=error",
using the entry glob allows us to build js and css in each of those dirs, and they get built to public/admin.css etc without a hash. i dont expect these assets to change much, so this has been a fine setup for us so far.