A Beginner’s Guide to Parcel JS

If you thought GulpJS was cool, wait until you see Parcel! From zero to actively building a site in like 2 minutes top! It's the quickest way I know of to go from thinking about a website to actively building. I'll show you the basic functionality-setting up Parcel to watch your HTML file and automatically pull in, bundle, compile, and minify SCSS and JS.
Please subscribe if you want me to continue making content!

[@PosessedFurby]

Bro....I looked through seven videos and thought parcel was impossible. You took me through it in a chill tone and made it easy. Thank you so much.

[@CodinginPublic]

Glad it helped! Thanks for saying something!

[@jachub123]

hey, i dont know what was so complicated for me but i have tried to get exactly that stand in my development environment. I tried it with a watch task and combining watch and open browser and everything for 2 days, now you tell me all i had to do was define a dev task and im done in under 10 minutes... phew... i dont know if i should be happy or crying because i couldnt get this easy thing to work :( i blamed the documentation of pracel. but hey, thank you very much thats what i wanted and its surprising, how easy it was ^^ cheers

[@CodinginPublic]

So glad it was a help! I know it can feel like wasted time (trying to figure out something and getting frustrated and stuck), but over time those efforts add up to make you a great learner. Thanks for the comment.

[@jachub123]

@@CodinginPublic thanks for the vid. you know anything about a problem with the watch task in parcel? it only hot reloads my changes when i save my html file. when i make changes to my .js file or scss file it doesnt hot reload and it doesnt compile as well. i see that it builds something in the terminal but nothing really happens. I already googled it, some people had the same problem, but their fix didnt help me.

[@CodinginPublic]

Hey! I know this is probably already true, but are your files linked in your html file? That’s the first thing to ensure. Happy to look at your code. Twitter DMs are open.

[@jachub123]

@@CodinginPublic yes they are linked in the html file

[@jachub123]

ah, i found the error. it was really the linking that was the problem. but since i also linked the css files in the js file they were taking effect. and so i didnt notice that they actually were linked wrong in the html file itself. thanks :)

[@lubtct]

Well... that was easy. Great video! Thanks for the tutorial.

[@CodinginPublic]

Glad it was a help! Thanks for saying something!

[@romimaximus]

Awesome tutorial, !!... but i have a question, everytime i need bundle my code, parcel is making copy of my files inside the "dist" folder, just like your folder "dist" in the video, .. so does parcel provides some way or some "plugin", to clean the "dist" folder before rebuild code ?

[@CodinginPublic]

Glad you liked it! I would think you could add this at the beginning of the build script (just inside the first quotation mark of the build script), but haven’t tried it yet: rm -rf public/dist/*

[@romimaximus]

​@@CodinginPublic awesome thankx, but i use windows ... i have to use a diferent way "rmdir /q /s dist && parcel build src/index.html".... but thank you very much for your halp ..!!

[@CodinginPublic]

oh, nice! Glad you got it to work! Great job!

[@A.Atherton]

Is it smart enough to know if index.html calls on other html files? Can pages be linked through this or do I have to "dev": "parcel src/index2.html ? Or is that in step 5? Thanks

[@CodinginPublic]

Thanks for the question! So…looking back at this video, I don't really feel like it really explained anything 🤦‍♂️🤣. If I remember correctly, that's why I created a second video here: kzbin.info/www/bejne/jaO0lKN3htZ2jMk I'm pretty sure I explain how to have it look at multiple html files.

[@tea42]

Great tutorial and has everything I needed to get started. One problem though, if I added test.html HMR does not occur on this page. Only works on index.html. Any solution to this problem or am I not supposed to make any other files than index.html?

[@CodinginPublic]

Sorry for my delay here. Yes, so you'll need to declare all targets you need. You can read about it here: parceljs.org/features/targets/#entries

[@catreunion]

Thank you very much! :D

[@CodinginPublic]

Sure thing. Thanks for saying something!

[@a.athertonwrites]

This was super helpful and got me setup using parcel!! There seems to be an issue where you have to update to v2 in the cmd prompt, not sure why the download wasn't newest Right now having issues with redirecting to a new page using parcel. It does fine with an html button to a new page but when I use JS to verify a login password the url shows it is on the new page but the previous page reloads. I have checked my code and it should be the new page! If you know why this issue happens with this bundler it would help!

[@CodinginPublic]

I fully admit that this tutorial didn't actually do a whole lot other than show you how to get up a single dev server file. I wish I had done more with the video. I'm pretty sure that's why I added a second shortly after: kzbin.info/www/bejne/jaO0lKN3htZ2jMk If I remember correctly, I explained how to add multiple files in the linked video. Hope that helps!

[@tedthetutor4587]

Has anyone tried getting Parcel to do vendor prefixes (css transitions still require these for example). I could never get this working with Parcel 1.xx.

[@CodinginPublic]

Hey! Sorry for my delay. Somehow I missed this. You should be able to get it working with PostCSS pretty easily. Here's there explanation in the docs: parceljs.org/languages/css/#postcss Let me know if that doesn't make sense. Thanks!

[@paulehrig6414]

Thx for your videos; they're great. I do have an issue with this one and need some help. Everything is fine in dev and it all works. However when i open the index.html file from the dist directory in chrome the js. css & jpg files are not loading. I can manually fix the problem changing for example the css file location from /main.77bb5cfd.css to ./main.77bb5cfd.css ... same problem with js and jpg file . ??? Thx a head of time!

[@CodinginPublic]

Thanks, Paul! Sorry for my delay here! Hmm… it sounds like something’s the matter with the way relative paths are compiled. If you mark the path relative when referencing it in your index.html file (./main.js), does that change things? Are there subdirectories in your build process?

[@paulehrig6414]

@@CodinginPublic Thx for your response. Yes, the relative paths created by Parcel in the index.html do not work outside of dev. If I resolve the path (ex: from /main.js to ./main.js) everything works - Is there something that can be done so Parcel creates the the correct relative paths -or- is this something i need to live with. I've used Parcel with 3 other projects with the same results. ... Again thanks for your time and support Paul!

[@neontuts5637]

Nice video. How to minify and convert images to webp in Parcel?

[@CodinginPublic]

Thanks! Looks like there’s built-in functionality in parcel for both minifying and converting to webp! parceljs.org/recipes/image/

[@neontuts5637]

@@CodinginPublic Oh! thank you. Keep creating awesome contents :)

[@CodinginPublic]

Sure thing! Thanks so much!

[@yurialexeivillamiljimenez9408]

Omg i just cannot get it to work :( already seen like 10+ tutorials

[@CodinginPublic]

Sorry it’s giving you trouble. Can you put your code up on GitHub or somewhere? I’m happy to take a look. Also, let me know what error message you’re getting.

[@ufdiu3n8s2]

Hey, have you done it already? Im struggling with itttt :(

[@CodinginPublic]

Sorry you’re having trouble. If you’re able to put your code up somewhere I’m happy to take a look.