Ditch the depreciated Create React App and enjoy blazing-fast SaaS development by migrating to Vite in 8 easy steps.

Create React App was depreciated earlier this year, and more and more security issues have been appearing from npm. Moving to a new development environment is a smart move.

Why Vite?

1. It's fast. Unlike CRA, Vite does not bundle your entire application before serving. Hot reloading is also faster.
2. Improved build performance. 
3. Typescript support.
4. Lots of configuration options.

Migrating from CRA is relatively easy and pain free, you can do it in less than 30 minutes using the steps below.

1. Install Packages

First, install the Vite package, Vite React and JS Config Paths plugins.

Run the following:

npm i vite @vitejs/plugin-react vite-jsconfig-paths

2. Create The Vite Config File

Create a file in your root directory called vite.config.js

Import and add the two plugins you just installed and configure the server to run on port 3000 (the same as create-react-app) or whichever port you prefer.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import jsconfigPaths from 'vite-jsconfig-paths'

export default defineConfig ({

  plugins: [react(), jsconfigPaths()],
  server: {
    port: 3000,
    open: '/'
  },
  preview: {
	port: 3000
  },
  css: {
    preprocessorOptions: {
      scss: {
    	additionalData: `@import "src/components/global.scss";`
      }
    }
  }
});

Setting server.open to / will automatically open the browser window when the server starts. The preview.port flag is the port that opens in development mode, and server.port is the port used when you build your application.

In my project, I have a global SCSS file with variables (like scale and colours). I want to import this into all the SCSS files in my project. This can be configured in the config file to save having to import it to many individual files.

3. Set The Base URL (Optional)

I like to set a base URL in my projects to import directly from the /src folder without having to write /src. You can do this with the following settings in your jsconfig.js file:

{
 "compilerOptions": {
  "baseUrl": "src"
 },
 "include": ["src"]
}

The vite-jsconfig-paths plugin you installed in Step 1 will use this configuration.

Now, instead of:

import from 'src/components'

You can write:

import from 'components'

4. Move The Index File

In create-react-app, the index.html file is stored in the /public folder. In Vite, you need to move this file to the root folder and add the following line before the closing </body> tag:

 <script type='module' src='/src/index.jsx'></script>

5. Rename Extensions To .JSX

If you're using .js extensions on your component or view files, you need to rename these to .jsx

6. Move Assets To The Public Folder

/public
  /assets
  /images
  /icons

Then, update any references in your stylesheets, for example:

background-image: url('/assets/icons/ico-loader.svg');

7. Change Require Statements To Import

If you have any require statements in your code, update these to import as Vite doesn't support require statements.

8. Update Package.json

Finally, update your package.json file to use the Vite scripts.

 "scripts": {
  "start": "vite & npm run watch:css",
  "build": "vite build",
  "serve": "vite preview",
  "watch:css": "postcss -w src/css/input.css -o src/css/output.css"
 }

I've also added the watch script needed to recompile the Tailwind output.css file on file changes.

Finally, run the following to get rid of React scripts:

 npm uninstall react-scripts

That's it! Now you can run: npm start to run your application.

If this sounds like too much hassle, my SaaS boilerplate comes with Vite pre-configured.