vite instead of creat-react-app
There are a few differences you need to be aware of using Vite in place of CRA after scaffolding out your Vite React app
Setting up the proxy
Using CRA we have a "proxy" setting in our frontend/package.json to avoid breaking the browser Same Origin Policy in development. In Vite we have to set up our proxy in our vite.config.js.
`import { defineConfig } from ‘vite’; import react from ‘@vitejs/plugin-react’;
export default defineConfig({ plugins: [react()], server: { // proxy requests prefixed ‘/api’ and ‘/uploads’ proxy: { ‘/api’: ‘http://localhost:5000‘, ‘/uploads’: ‘http://localhost:5000‘, }, }, });`
Setting up linting
By default CRA outputs linting from eslint to your terminal and browser console. To get Vite to ouput linting to the terminal you need to add a plugin as a development dependency…
npm i -D vite-plugin-eslint
Then add the plugin to your vite.config.js
`import { defineConfig } from ‘vite’; import react from ‘@vitejs/plugin-react’; // import the plugin import eslintPlugin from ‘vite-plugin-eslint’;
export default defineConfig({ plugins: [ react(), eslintPlugin({ // setup the plugin cache: false, include: [‘./src//*.js’, ‘./src//*.jsx’], exclude: [], }), ], server: { proxy: { ‘/api’: ‘http://localhost:5000‘, ‘/uploads’: ‘http://localhost:5000‘, }, }, });`
By default the eslint config that comes with a Vite React project treats some rules from React as errors which will break your app if you are following Brad exactly. You can change those rules to give a warning instead of an error by modifying the eslintrc.cjs that came with your Vite project.
module.exports = { env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, settings: { react: { version: '18.2' } }, plugins: ['react-refresh'], rules: { // turn this one off 'react/prop-types': 'off', // change these errors to warnings 'react-refresh/only-export-components': 'warn', 'no-unused-vars': 'warn', }, };
Vite outputs the build to /dist
Create React App by default ouputs the build to a /build directory and this is what we serve from our backend in production.
Vite by default outputs the build to to a /dist directory so we need to make some adjustments to our backend/server.js Change…
app.use(express.static(path.join(__dirname, '/frontend/build')));
to…
app.use(express.static(path.join(__dirname, '/frontend/dist')));
Vite has a different script to run the dev server
In a CRA project you run npm start to run the development server, in Vite you start the development server with npm run dev
If you are using the dev script in your root pacakge.json to run the project using concurrently, then you will also need to change your root package.json scripts from…
<code>`"client": "npm start --prefix frontend",` </code>
to…
<code>`"client": "npm run dev --prefix frontend",` </code>
Or you can if you wish change the frontend/package.json scripts to use npm start…
<code>`"start": "vite",` </code>
A final note:
Vite requires you to name React component files using the .jsx file type, so you won’t be able to use .js for your components. The entry point to your app will be in main.jsx instead of index.js
And that’s it! You should be good to go with the course using Vite.