DEV Community

Cover image for Better ways to Create React App

Better ways to Create React App

Valeria on August 30, 2022

If you've tried React, chances are you've used create-react-app at least once. In case you were lucky and you haven't, here's how it goes: You run...
Read full post
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

You can also use Parcel bundler which is quite convenient most of the time

npm init -y && npm i parcel -D && npm i react react-dom -s
Enter fullscreen mode Exit fullscreen mode

Didn't you tried it before?

Collapse
 
valeriavg profile image
Valeria •

Yes, I believe I did, though don't recall much. How does it fair in comparison to the tools from the article?

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Didn't check tbh, I used it once on a production project and most of the time on side projects due to this "zero config"; actually it has a couple of quirks that need to be understood though. At the point we choose parcel, the output was definitely lower in weight than webpack, but I didn't tested it against rollup.

The setup speed is quite good and it handles config and deps whenever it found them in the project.

Quick example. If your entry point look like that:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

and you want to add a global scss, you can simply do:

<link rel="stylesheet" href="./styles/main.scss">
Enter fullscreen mode Exit fullscreen mode

and Parcel will install some scss-to-css parser as dependency, also optimize it with cssnano or any other optimizer and build the entire thing, replace the reference to the scss file in the html for a reference to the parsed, minified, optimized and hashed css version and serve it for you.

Isn't automation the absolute end target in our field? 😍😂

Thread Thread
 
valeriavg profile image
Valeria •

I tested parcel as you've suggested, here's what I've got:

npm i parcel --save-dev
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

added 166 packages, and audited 167 packages in 23s

72 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

166 packages, twice that of vite, but also no vulnerabilities.

Takes a lot more space on the disc though:

du -hc -s  node_modules
204M    node_modules
Enter fullscreen mode Exit fullscreen mode

It seems to be quite slow, to be honest:

./node_modules/.bin/parcel public/index.html
Server running at http://localhost:1234
✨ Built in 976ms
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇 •

Thanks for the info! 😁

It's slower the first time always (or when you add new things that require new deps) as it needs to check your project thingies to install other dependencies, it should be faster in subsequent builds, also the top benefit is on config (or the lack of it)

Collapse
 
ivan_jrmc profile image
Ivan Jeremic •

I replaced CRA with Vite long time ago never looked back.

Collapse
 
congquyen99 profile image
congquyen99 •

yep, CRA is sucks

Collapse
 
kenramiscal1106 profile image
Ken Daniele Ramiscal •

I like this article.

Tools are evolving and we need to switch gears to other tools like vite or nextjs to solve some moder problems

Collapse
 
hoanghelios profile image
Hoang Dao •

I tried Vite recently and then no more CRA =))

Collapse
 
jmalvarez profile image
José Miguel Álvarez Vañó •

Thanks for the post, it is very interesting!

Collapse
 
rajeshkhadka profile image
Rajesh khadka •

Sure, In my recent project CRA gave me 72 vulnerabilities

Collapse
 
evillord666 profile image
Ushakov Michael •

I am finding very versatile to create bundle js and css files that code be used without npm, just include them 8n app layout is vite do the same? Personally I prefer to use gulp for this, if you would like to see an example, i'll paste here link to one of a github project

Collapse
 
valeriavg profile image
Valeria •

While vite or the underlying rollup would do what you described, esbuild, as described in the end of the article, might be a better option. It can be used as an executable or via JavaScript or Go API.

Collapse
 
evillord666 profile image
Ushakov Michael •

Thanks for replying and interesting article

Collapse
 
pengeszikra profile image
Peter Vivo • • Edited

Vite can be help to remove vulnerability from legacy project which contains react 15 - 16 - 17 modules to upgrade react 18?
My node_modules around 1Gb.

Collapse
 
valeriavg profile image
Valeria •

Vite doesn't remove vulnerabilities. It has less dependencies of its own, so replacing tooling of a legacy project with vite will help, but only to a certain extent.
Unfortunately, refactoring an old project is a tedious and manual task.