Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bhbs/viject
A tool for migrating your React app from react-scripts (Create React App) to Vite
https://github.com/bhbs/viject
create-react-app react vite
Last synced: 3 months ago
JSON representation
A tool for migrating your React app from react-scripts (Create React App) to Vite
- Host: GitHub
- URL: https://github.com/bhbs/viject
- Owner: bhbs
- License: mit
- Created: 2022-09-20T14:41:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T00:44:08.000Z (7 months ago)
- Last Synced: 2024-08-01T19:46:19.748Z (6 months ago)
- Topics: create-react-app, react, vite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/viject
- Size: 2.12 MB
- Stars: 112
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - Viject - One-shot migration tool from Create React App. (Migrations / React)
- awesome-vite - Viject - One-shot migration tool from Create React App. (Migrations / React)
README
# Viject ⚡
> A tool for migrating your React app from react-scripts (Create React App) to Vite
## Usage
```sh
cd
npx viject
```
## Concept
Enables one-shot migration from CRA to Vite. Differences are absorbed in vite.config, allowing for a gradual migration with minimal changes.
See more details in [doc](/docs/release.md)
## How it works
1. Rewrite npm scripts
2. Add dependencies
3. Rewrite `react-app-env.d.ts`
4. Move `index.html`
5. Transform `.js` files including JSX into `.jsx`
6. Add `vite.config.(js|ts)` includes plugins for CRA compatibility
## Supported features
- 🟢 Using HTTPS in Development
### Styles and Assets
- 🟢 Adding a Stylesheet
- 🟢 Adding a CSS Modules Stylesheet
- 🟢 Adding a Sass Stylesheet
- 🟡 Adding a CSS Reset (https://create-react-app.dev/docs/adding-css-reset)
- 🟢 Post-Processing CSS
- 🟢 Adding Images, Fonts, and Files
- 🟡 Loading .graphql Files (https://create-react-app.dev/docs/loading-graphql-files)
- 🟢 Using the Public Folder
- 🟢 Code Splitting
### Build
- 🟢 Adding Bootstrap
- 🟡 Adding Flow (https://create-react-app.dev/docs/adding-flow)
- 🟢 Adding TypeScript
- 🟡 Adding Relay (https://create-react-app.dev/docs/adding-relay)
- 🟢 Adding a Router
- 🟢 Adding Custom Environment Variables
- 🟡 Making a Progressive Web App
- 🟢 Measuring Performance
- 🟢 Creating a Production Build (https://create-react-app.dev/docs/production-build)
### Testing
https://vitest.dev/guide/migration.html
### Back-End Integration
- 🟢 Proxying API Requests in Development (https://create-react-app.dev/docs/proxying-api-requests-in-development)
- 🟢 Fetching Data with AJAX Requests
### Advanced Configuration
https://create-react-app.dev/docs/advanced-configuration
- 🟢 BROWSER
- 🟡 BROWSER_ARGS
- 🟢 HOST
- 🟢 PORT
- 🟢 HTTPS
- 🚫 WDS_SOCKET_HOST
- 🚫 WDS_SOCKET_PATH
- 🚫 WDS_SOCKET_PORT
- 🟢 PUBLIC_URL
- 🟢 BUILD_PATH
- 🚫 CI
- 🚫 REACT_EDITOR
- 🚫 CHOKIDAR_USEPOLLING
- 🟢 GENERATE_SOURCEMAP
- 🟡 INLINE_RUNTIME_CHUNK
- 🟡 IMAGE_INLINE_SIZE_LIMIT
- 🟢 FAST_REFRESH
- 🟡 TSC_COMPILE_ON_ERROR
- 🟡 ESLINT_NO_DEV_ERRORS
- 🟡 DISABLE_ESLINT_PLUGIN
- 🚫 DISABLE_NEW_JSX_TRANSFORM
## Contribution
See [Contributing Guide](https://github.com/bhbs/viject/blob/main/CONTRIBUTING.md)
## License
MIT