Create React App Alternatives in 2024

Three days ago, Dan Abramov responded to a GitHub pull request that addressed the issues newer developers find themselves facing by using create-react-app (CRA). In his reply, he offers a bit of history as to why CRA was created and lists some of the problems with Create React App. To give a bit of background, CRA was created because, in 2016, the tooling landscape was fragmented and not integrated. There was no clear way to create a full-fledged React application. Developers needed to set up quite a bit of configuration, causing them to give up on updating their projects or spending a ton of time getting all of the tools to work together.

Dan offered five options on what could be done with create-react-app in the future:

• Option 1: Create a new framework from scratch
• Option 2: Deprecate Create React App, maintain a Vite template
• Option 3: Deprecate Create React App, suggest React frameworks
• Option 4: Make Create React App use a single framework
• Option 5: Turn Create React App into a launcher

The proposal from Dan, however is option 5, to “turn create-react-app into a launcher”.

Some users seems to like option 3:

But others are totally fine with option 5:

Nonetheless, create-react-app was built as a means to provide reasonable default configurations. And it worked. For a while. It was actually very nice to set up an entire react project with a single command, being great for beginners. But there are a few reasons why it wasn’t and isn’t so good, especially today, in 2023.

1. Slow in development
2. Difficult to set up popular tools (e.g. tailwind and typescript)
3. Better options available

This article is going to explore a few different options you have when it comes to create-react-app.

Online Environments

Perhaps the easiest way to experiment and start learning React (or any frontend framework) is with an instant developer environment.

StackBlitz and CodeSandbox are just two such environments that easily allow you to start writing React applications, right in your browser, without the need to install anything on your system. They both offer the benefit of being shareable so that you can show your coworkers or friends what you’ve been building!

This is a great choice if you’re just starting out on your React journey, but as you get better, you’ll want to create bigger and better projects. For this, you’ll need a build tool to manage those projects.

Build Tools

You’re ready to build something large. You’re going to need a build tool for this. Let’s explore 6 alternatives to create-react-app.

1. Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Vite (pronounced veet) is the most similar replacement to CRA on this list, getting started is as simple as running the following command:

npm create vite@latest

After running the command, you’ll be prompted with the configuration options.

Vite is much faster than CRA in development because it builds your application on-demand, with tools like native es modules and es build that scale much better for big projects. It provides a starting point for SPA creation, but doesn’t deal with server-side rendering or routing out-of-the-box (it’s something you would have to configure yourself), unlike react rendering frameworks such as Next.js.

2. Nx

Nx makes scaling easy. Modern techniques such as distributed task execution and computation caching make sure your CI times remain fast, even as you keep adding projects to your workspace.

Nx is a tool known for building monorepos, but it’s CLI can also build plain React apps that have nothing to do with monorepos.Nx can build standalone React applications with some features that you won’t find in Vite. You have the option to choose your own bundler, such as Vite or Webpack.

To get started with a React project with Nx, simply type:

npx create-nx-workspace@latest --preset=react

3. Next.js

Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

The main difference when building a Next.js application is that you have a special directory such as pages or app that can structure routing for a multi-page application. It also comes with server-side rendering, and server-side data fetching with React server components to build fullstack applications with few external dependencies.

npx create-next-app@latest

There are lots of other features, of which you can check out via the basic features page.

4. Remix

Focused on web standards and modern web app UX, you’re simply going to build better websites

Recently acquired by Shopify, Remix provides many of the same features as Next.js. The biggest difference is related to data fetching – Next.js uses React server components, while Remix does not.

Both frameworks solve many of the same problems, but they each have subtle differences. We will probably be seeing a lot more of Remix as we progress into 2023.

npx create-remix@latest

5. Gatsby

Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.

Although Gatsby had a major decline in use over the last few years, Gatsby was recently acquired by Netlify. This acquisition will surely see a spike in Gatsby usage. Originally, Gatsby was built for developing static, content-heavy frontends, but now also supports server-side rendering.

It’s pretty easy to get started with Gatsby:

npm init gatsby

6. Astro

Astro is a popular web framework for building performant, content-focused websites. Our next-gen frontend architecture (known as Astro Islands) can optimize your site to load 33% faster with 90% less JavaScript using the UI frameworks you already love like React, Svelte, and Vue.

React takes over the entire DOM. Astro has it’s own templating language for handling most of your static content, but allows you to introduce interactivity as needed. This both simplifies your code and introduces huge performance gains.

npx create astro@latest

Conclusion

While we’re not completely sure what’s going to happen to create-react-app in the coming months, this article explored 6 different alternatives to the command. These tools all have their pros and cons, and you should research them accordingly. It’s going to be interesting to see what comes of the create-react-app command, if anything at all.

Happy hacking!