Software Development Updates

The Create React App was built to simplify the creation of new React projects. It is generally used for designing graphical user interfaces. With a low learning curve and easy-to-use CLI, Create React App (CRA) offers multiple use cases such as automatic transpiration, a built-in development server, and an easy setup for new React programs. However, due to a lack of updates and increasing complexities, many popular React development companies have turned to modern Create React App alternatives. 

This article highlights the issues that developers face when using CRA and discusses some of the best alternatives available for Create React App.

1. Issues with CRA

Setting up a ReactJS project is pretty straightforward thanks to the Create React App (CRA). However, it failed to keep up with time and evolve to fulfill the modern requirements of the React project. As a result, using CRA becomes a tiresome job. Here we will discuss the most common issues with using the CRA.

1.1 Evolving Ecosystem and Modern Alternatives

Since the advent of Create-React-App, React and JavaScript ecosystems have evolved rapidly. As a result, many tools and technologies are no longer compatible with the default settings of CRA. This shift has led to the emergence of modern tools and frameworks that offer a more flexible approach to setting up React projects. Modern alternatives also render better developer experience, customization options, and performance. 

1.2 Performance

Every time a user visits the website, the server sends a complete JavaScript bundler. Bigger the bundler, the longer users have to wait. This negatively impacts SEO and diminishes the user experience and conversion rate. Moreover, CRA provides a default Webpack configuration that leads to poor performance for large React applications. Because of this, developers prefer to opt for alternative options that provide more control over React performance optimization. 

1.3 Polyfilling Core Node.js Modules

When a code fails to run in the browser, a Polyfill is used to modify that code. Polyfills are usually used in the old browsers that didn’t support the new JS methods like filter and array. The core NodeJS modules were built to be server-side JavaScript and their internal modules were not supposed to be used in the browser. But now, such bad patterns are only found in the older React repositories, as the latest versions of CRA have removed these Polyfills. 

1.4 Poor Developer Experience

Before getting started with the local dev server with CRA, developers have to bundle all the code. This process may take a few seconds, and if your project is large, then it may take even longer. 

HMR (Hot Module Replacement) allows developers to make changes to the app whenever required without shutting down the Dev Server. While using Create-React-App, the system first builds all the project files and represents them to the browser. It depends on the size of the project, but it may take a few seconds to apply some simple changes. Needless to say, the speed is very slow, which degrades the entire experience. 

On the contrary, modern tools use ESmodules, which are natively supported by browsers, to start a development server within a few milliseconds. The hot reloading is exceptionally very fast, regardless of the size of your project. 

1.5 Outdated Dependencies

Dependencies are used by default in the Create React App. Most of them have not been updated in a long time, making them vulnerable to several compatibility and security issues. Hence, when you start a project with CRA, you often need to fix all these issues and ensure your app runs smoothly and safely.

Take a thorough look at the image above containing the default installation process. This code alone has a total of eight vulnerabilities, two are of moderate level and six of high level. This situation raises some serious security concerns for your React applications. 

1.6 Limited Customization

CRA is easy to use because it provides limited configurations, making it easier for beginners to use. But when it comes to large or more ambitious projects, the CRA is rendered useless. Moreover, it doesn’t even support plugins or service-side rendering, which can be significant drawbacks. 

It makes assumptions about the project and builds configurations accordingly. You don’t have any control over it as you can’t override them. Therefore, if you want to customize these settings, you have to go through the ejecting process, which can be quite challenging.

2. CRA Alternatives

Now that we recognize the challenges of using Create React App, which messes up the whole developer experience as well as leaves too many unresolved problems behind. It’s about time we start looking for the best alternatives to the CRA.

2.1 Vite

Vite is one of the latest frontend frameworks and a universal solution for bootstrapping React apps across various tech stacks. It aims to create an enhanced experience for front-end developers. 

Vite is very famous for its speed and rapidly evolving as a better alternative to CRA day by day. It provides one of the fastest starting times for a localhost dev server and instant hot reloading. Vite also supports working on multiple frameworks, including Svelte, Preact, React, Vue, and Solid. In addition to that, Vite is highly flexible as it allows a large array of third-party integrations. 

You can create a React application with Vite using the following command.

npm create vite@latest

This will start the process of creating a new application using Vite.

After executing the above code, you will be given some configuration options to set up your desired application as mentioned in the given screen shots below. 

Enter your desired project name, let’s use react-vite-app, and hit enter.

The next step is to select the desired technology. Go for React and hit enter.

Select the tech stack to use in the React app. Select according to your requirement from TypeScript or TypeScript + SWC, JavaScript or JavaScript + SWC. 

After that, your app is created now to run the application. Follow the command and steps given below.

cd react-vite-app

npm install

npm run dev

Press h + enter for more shortcuts.

To build for production:

#NPM

npm run build

Pros:

• Supports TypeScript. 
• Supports preprocessors and CSS modules with CSS import. 
• Supports web workers and WebAssembly (Wasm).
• Prioritizes the developer experience. 
• Allows for automatic build optimization. 
• Supports react project creation with SWC (Speedy Web Compiler) which is 20x faster than Babel on a single thread and 70x faster on four cores.

Cons:

• For React, it only supports JSX files. And it is mandatory to “Import React” into every JSX file.
• Required to use plugins to import SVG files as React components.
• It is challenging to modify the build process as it is based on modern technologies.

2.2 React Boilerplate

React Boilerplate is another top Create React App alternative on the list to set up a project. It is claimed to be the future solution for high-speed web applications. You can also access the React Boilerplate software even without a network connection. 

Although the concept of the library is the same as others, the method for setting up a new code repository is quite different. First of all, you have to clone the setup repository with the following command. 

git clone https://github.com/react-boilerplate/react-boilerplate.git.

my-react-boilerplate

Then run the setup script given below while entering the cloned repository. 

$ cd my-react-boilerplate
$ npm run setup

Now, use the start script to initiate the development server.

$ npm start

This brings up the default homepage.

Pros

• Supports contemporary JS features, such as dynamic imports. 
• Provides Node-sass support for SCSS files.
• Offers direct support for CSS modules and files.
• Enables code splitting. 

Cons

• The last commit was released in April 2019, making it quite outdated. 
• Very opinionated in its approach.
• Has a large package library.

2.3 React Starter Kit

As another alternative to Create React App, React Starter Kit is a boilerplate for isomorphic web projects. It is considered very opinionated because it includes a default tech stack containing GraphQL, Express, and NodeJS. 

The most recent repository is cloned to serve as the starting point for the boilerplate.

git clone https://github.com/kriasoft/react-firebase-starter.git.

Now, go to the newly created folder and install the dependencies.

cd example

yarn install

The development server is launched using the command given below. 

yarn start

As a result, we get a simple boilerplate homepage as shown below. 

Pros

• Allows static type checking in Flow and React testing in Enzyme. 
• Supports GraphQL. 
• Handles server activities like server-side rendering. 
• Offers information on executing common use cases. 

Cons

• Extremely opinionated.
• Provides a large-size package. 
• Comes with numerous dependencies.

2.4 Create Next App

If your ReactJS project requires features like static site generation or server-side rendering, then using Create Next App as an alternative to Create React App is the way to go. While using Create Next App, you can bootstrap a generic single-page React application with client-side rendering. It serves as a Command Line Interface tool to execute NextJS programs.

To create the boilerplate, we have to implement the following command.

npx create-next-app@latest next-app

Now, run the code given below to start a dev server.

Pros

• Create Next App supports a rapid refresh and data fetching. 
• Uses getServerSideProps() function for server-side rendering. 

Cons

• Optimization options aren’t available for programs with continuous data retrieval. 
• The learning curve for SSR-related features is steep.

3. Conclusion

Although CRA has been quite helpful for a long time, it has become necessary to explore more cutting-edge technologies and tools. This article discusses the issues with using CRA for setting up projects and suggests some popular CRA alternatives. Every option has its own strengths and weaknesses. Some are good at performance, some are fast, whereas some provide better configuration options. It’s best to consider your specific requirements when making a decision about it. 

FAQs

Is create-react-app still recommended?

Once React developers used to prefer CRA because of its simplicity, but over time, complications grew. So, the React documentation released on March 16, 2023, no longer recommends using CRA to create React applications. 

Why is Next.js better than create-react-app?

Two reasons that make NextJS better than CRA. Firstly, static destinations and server-side rendering make NextJS faster than CRA. Secondly, it offers performance enhancement features like image optimization, while CRA has multiple performance issues. 

What are the disadvantages of CRA?

There are many disadvantages of using CRA including limited configuration and customization options, security issues, performance issues, and reduced flexibility. 

What can I use instead of create-react-app?

There are many alternatives that you can use instead of Create React Apps, such as Vite, React Boilerplate, React Starter Kit, and NextJS.