Migrate from Create React App (CRA) to Vite with One

One makes a great replacement for Create React App. With a few simple steps, you can move over to One and enjoy the power of the Vite ecosystem.

Migrating from Create React App (CRA) to One is easy. In this guide we'll use the default CRA output and show how you can move over to One.

One is a React framework for web, iOS, and Android, built on the power of Vite - it's actually just a single Vite plugin. One saves you a lot of complexity when moving from CRA, it offers faster build times, built-in TypeScript support, SPA or server rendering, file system routes, and seamless cross-platform development capabilities.

Let's walk through the migration process step by step.

First, let's add One and its dependencies to your project:

yarn
npm
bun
pnpm
npm install one

One uses a file-based routing system, which means we need to adjust our project structure slightly. Here's what we'll do:

Create a new vite.config.ts file in your project root with the following content:

import type { UserConfig } from 'vite'
import { one } from 'one/vite'

export default {
  plugins: [
    one({
      web: {
        defaultRenderMode: 'spa'
      }
    }),
  ],
} satisfies UserConfig

This minimal configuration sets up One with Vite, enabling all the goodness that comes with it. Note that we're setting defaultRenderMode to 'spa' (Single Page App) for compatibility with Create React App. This ensures that your app behaves similarly to how it did with CRA, rendering entirely on the client side.

The 'spa' mode is the simplest strategy, where your app is not rendered on the server at all. Instead, only the JavaScript to render your page is served to the user's browser. This avoids some of the complexity associated with server-side rendering, making it a good starting point for migrating from CRA.

If you want to explore other rendering modes later, such as Static Site Generation (SSG) or Server-Side Rendering (SSR), you can change this setting. Each mode has its own trade-offs in terms of performance, SEO, and complexity. For more information on the available render modes and their implications, refer to the One configuration documentation.

Let's update our package.json scripts to use One's commands:

{
  "scripts": {
    "start": "one dev",
    "build": "one build",
    "test": "vitest run"
  }
}

These new scripts replace the CRA equivalents, giving you access to One's optimized development and build processes.

Now, let's update our main component. We'll move src/App.js to app/index.tsx and make a few adjustments:

import '~/src/App.css'
import logo from '~/src/logo.svg'

export default function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>app/index.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

Notice how we've updated the import paths using the ~ alias. One supports tsconfig by default, and will also add a tsconfig.json file if you don't have one already, with the ~ path alias configured. Of course, you can change this to suit your needs.

You can now safely remove the following files:

• public/index.html
• src/index.js
• src/reportWebVitals.js
• src/setupTests.js

One handles app rendering and provides its own optimized setup for these functionalities.

You're all set! Now you can start your newly migrated One app:

yarn
npm
bun
pnpm
npm run start

Visit http://localhost:8081 to see your app in action. Use the --port flag if you need to change the port.

Next Steps

Congratulations! You've successfully migrated from Create React App to One. Here are some next steps to consider:

1. Explore One's features: Check out the One documentation to learn about its powerful features like SSR, file-based routing, and more.

2. Optimize for production: One provides excellent production optimizations out of the box. Run yarn build to create an optimized production build.

3. Add Tamagui: For a powerful, fully type-safe UI kit that works seamlessly with One, consider adding Tamagui. It provides SSR-safe styling, animations, and themes.

4. Implement dark mode: One makes it easy to add SSR-safe dark mode. Check out our Dark Mode guide for a quick setup.