Read on dev.to.
As such you may have noticed, Parcel does not support Purescript. Meaning that we would not be able to simply say
and have it up and running. Another thing being that the recommended build tool for Purescript supports some cool stuff such as
(though I really haven’t seen this sort of thing with any other build tool) and
which starts a server that rebuilds the JS output for any change in the source.
However, there is no hot reloading in the browser. You would still have to do a manual refresh. I feel that’s kind of a drag when you are developing, and since it is not impossible to setup hot reloading, far from it, it’s super easy now thanks to Parcel (since we don’t even have to configure Webpack! 🎉) I believe it might not be too farfetched to go for this option.
Anyway, let’s get down to the details.
I’m guessing that you have set up a Purescript project using the recommended approach. If not, knock yourselves out.
Make sure you have a
package.json file in your project root. You may create one manually or answer a few questions on the way to set up one using the
npm dependencies as well
You could simply run,
npm i -D concurrently parcel-bundler
And lastly, an
In my case, among the numerous plugins that I’ve installed for VSCode (or maybe even VSCode supports this natively) I have a shortcut to a code snippet that essentially generates a boilerplate HTML. You could check if you have it as well by typing a
! in a
In any case, here it is:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
Great! Y’er doin’ it
You only have to make two changes now.
package.json file set up the script that would make it easier to start the development server.
Simply add this to the
"start": "concurrently \"pulp --watch build --to ./output/app.js\" \"parcel index.html\""
Now to close the loop in order for Parcel to pick up the emitted
Add this to the
head section of the
And that’s it! We’re done! 🎊
and that should be enough.
Setting up a build script
Alternatively, you may even set up a build script to use when your project is completed.
Add this to the
scripts section in your
"build": "pulp build --to ./output/app.js && parcel build index.html"