Basics
If you have worked with Javascript, you know about Module bundlers, right?
In simple term, Module bundler , bundles your code, spread across multiple files (HTML,CSS,JS...) into smaller chunks. Now you might be wondering , why to build bundler if you can send js, html and css files directly from the server. You are right. But remember we are not living in early 2000's, where websites are crap,slow and not to mention their UI.
As different technologies are evolving, for a simple website build using any framework it is common to have files in megabytes.This might seem small, but server and internet is dealing with millions if not billions of such files. If server send files in their raw format just think about internet usage and bandwidth. And we are not even talking about client side. If for every page mb's of files are downloaded and cached in browser. Then you will not be able to open more than 5 pages, before your browser memory ran out.
To tackle this software engineers, build bundlers, they combine your files, minify them and divide them into chunks, to have smaller files to manage for the browser.
I am a front end developer especially work with react.I started with create-react-app and now I move on to Vite. If you don't know these are build tools to bootstrap your react project. Now these tools come with their own module bundlers integrated. CRA uses webpack and Vite uses esBuild. Now these have their own pros and cons.
Now apart from these two, there is third option "Parcel". But sadly there is no build tool with Parcel bundler.
But I was curious how can we use Parcel with React.
So I decided why not give it a try.
The Parceled Journey
I have build my portfolio using Vite. I decided to build same but with parcel. Now to be honest, I have never play with bundler or setup project from scratch. So this overwhelmed me a lot. But surprisingly, it was not that bumpy ride as I thought. Parcel have documented how to setup react project. I follow that and I setup my base.
Now it's time to build the website. I have used tailwindCSS and typescript in my portfolio.
Amazingly Typescript works out of the box with Parcel. No need for additional compiler, tsconfig , nothing. So writing or more frankly copying tsx was a breeze with no compiler error. For TailwindCSS, I have struggled a bit. especially handling the folder structure. But it worked out at last.
My app was running fine, lazy loading , optimization works as expected, CSS was perfect.
But , as always, how can this be so easy.After testing my app, I found out that my Atropos container/styling was not working at all. If you don't know, Atropos is the package to provide 3D parallax effect on hover. In about me page, if you hover over showcase container, there is a beautiful parallax affect. It was not working at all.
I tried to re-install the package, but it was of no use.
Upon closure inspection, I found that, regular import was not working with Atropos.
Let me demonstrate you
In my Vite app, I use -
import Atropos from "atropos/react";
but, in Parcel app it was not importing anything from this path
After some debugging, I find the solution, I have to use -
import Atropos from "atropos/atropos-react";
But still no change in the UI.
I thought , if I have import is working fine. Then issue might be with the CSS of Atropos.
And here also , normal import was not working in Parcel. But unlike above problem , CSS was not auto import was not working either.
whereas in Vite app , it was working perfect -
I don't know whether it was VScode bug, or Parcel bug, but this bug "bug" me whole day
Atlast when I simply add import "atropos/atropos.css"; without suggestion or auto import, it works.
Apart from these major fixes, few minor tweaks was required but you can infer it.
And my portfolio was ready with Parcel. 🎉🎉🎉
I was literally amazed how, easy is Parcel to set up and work with
.
If you want to check my Parcel Project visit github
Thank You
Visit
My Portfolio
Top comments (0)