DEV Community

Cover image for Try React 18 with Vite, Typescript and Vercel
Duc Ng
Duc Ng

Posted on • Updated on

Try React 18 with Vite, Typescript and Vercel

What's New In React 18?

Please visit https://nnote.io/s/x4od5/react-18-with-vite-and-vercel for the latest updates for this article.

The new version of React - React 18 alpha has just come out. From ReactJS.org:

  • There are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release"

New Improvements:

This tutorial will demonstrate a step-by-step guide to create your project using React 18 alpha, Typescript, Vite and deploy it to Vercel (freemium).

Create a Vite project

Required tools:

  • NodeJS
  • Yarn (npm install yarn -g)

Run this command to create your new project:
(Vite is a code generator similar to CRA but it takes < 1s to launch dev mode versus > 45s using CRA)

yarn create @vitejs/app my-project --template react-ts
cd my-project
Enter fullscreen mode Exit fullscreen mode

Install the latest React 18 alpha version:

yarn add react@alpha react-dom@alpha
Enter fullscreen mode Exit fullscreen mode

As @types/react doesn't understand the new React 18's APIs or types yet, we need to update "tsconfig.json" file: after "jsx": "react" add:

"types": ["react/next", "react-dom/next"]
Enter fullscreen mode Exit fullscreen mode

Then run the new project:

yarn dev

vite v2.3.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 174ms.
Enter fullscreen mode Exit fullscreen mode

And that's it! We have React 18 up and running with Typescript! Ready to rock.

Deploy to Vercel

First, we need to build this project:

yarn build
Enter fullscreen mode Exit fullscreen mode

Then deploy the build (dist) directory to Vercel:

cd dist
npx vercel .

...
✅  Deployed to: https://react-18-ts-vite-app.vercel.app [copied to clipboard] [11s]
Enter fullscreen mode Exit fullscreen mode

Now, visit the link https://react-18-ts-vite-app.vercel.app, we should have the app up and running there:

Links

Top comments (2)

Collapse
 
the_yamiteru profile image
Yamiteru

Doesn't work when the app changes URL and you refresh..

Collapse
 
ngduc profile image
Duc Ng

You need to set your ui routes in the vite config file to index.html then it will work.