Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from CRA to Vite #2

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
/coverage

# production
/build
/dist

# misc
.DS_Store
Expand Down
19 changes: 10 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
# Webnative React TodoMVC

[![Built by FISSION](https://img.shields.io/badge/⌘-Built_by_FISSION-purple.svg)](https://fission.codes)
[![Built by FISSION](https://img.shields.io/badge/webnative-v0.26.2-purple.svg )](https://github.com/fission-suite/webnative)
[![Built by FISSION](https://img.shields.io/badge/webnative-v0.36.1-purple.svg )](https://github.com/fission-suite/webnative)
[![Discord](https://img.shields.io/discord/478735028319158273.svg)](https://discord.gg/zAQBDEq)
[![Discourse](https://img.shields.io/discourse/https/talk.fission.codes/topics)](https://talk.fission.codes)

The repository implements TodoMVC with React and [webnative](https://github.com/fission-suite/webnative). The repository includes branches that demonstrate the same app configured with Create React App, Vite, and Parcel:
The repository implements TodoMVC with React and [webnative](https://github.com/fission-suite/webnative). The repository includes branches that demonstrate the same app configured with Create React App, Vite, and Webpack:

- [Create React App build](https://github.com/fission-suite/react-todomvc)
- [Vite build](https://github.com/fission-suite/react-todomvc/tree/vite)
- [Parcel build](https://github.com/fission-suite/react-todomvc/tree/parcel)
- [Webpack build](https://github.com/fission-suite/react-todomvc/tree/webpack)

**Note:** We currently recommend the Vite configuration for the latest webnative builds.
## Migration to Vite or Webpack

## Migration to Vite or Parcel

The app was initialized with Create React App and migrated to Vite and Parcel. See the [Migrate from CRA to Vite](https://github.com/fission-suite/react-todomvc/pull/2) and [Migrate from CRA to parcel](https://github.com/fission-suite/react-todomvc/pull/1) pull requests for guides and diffs to help you migrate from Create React App.
The app was initialized with Create React App and migrated to Vite and Webpack 5. See the [Migrate from CRA to Vite](https://github.com/fission-suite/react-todomvc/pull/2), and [Migrate from CRA to Webpack](https://github.com/fission-suite/react-todomvc/pull/3) pull requests for guides and diffs to help you migrate from Create React App.

⚠️ Parcel 2 also has a branch but is not currently supported. Please see our build tool and bundler support tracking issue for the latest support notes: https://github.com/fission-codes/webnative/issues/293
## Try it

The app is live at: https://young-turquoise-metalic-fairy.fission.app/
Expand All @@ -37,7 +36,9 @@ To work on the application locally:
npm start
```

Navigate to `localhost:3000` in your web browser or `localhost:1234` for Parcel.
Open the app in your web browser:
- Create React App and Vite: `localhost:3000`
- Webpack: `localhost:8080`

## Build

Expand All @@ -47,7 +48,7 @@ Build the application.
npm run build
```

The build will be in `build` from Create React app and `dist` for Vite and Parel.
The build will be in `build` for Create React app, `dist` for Vite and `public` for Webpack.

## Publish

Expand Down
2 changes: 1 addition & 1 deletion fission.yaml
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
ignore: []
url: young-turquoise-metalic-fairy.fission.app
build: ./build
build: ./dist
29 changes: 29 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="A TodoMVC implementation written with React and Fission's webnative library."
/>
<meta property="og:title" content="Webnative React TodoMVC">
<meta property="og:site_name" content="Young Turquoise Metalic Fairy">
<meta property="og:url" content="https://young-turquoise-metalic-fairy.fission.app/">
<meta property="og:description"
content="A TodoMVC implementation written with React and Fission's webnative library.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://young-turquoise-metalic-fairy.fission.app/fairy.png">
<title>Webnative React TodoMVC - Young Turquoise Metalic Fairy</title>
<link rel="apple-touch-icon" href="/logo-192.png" />
<link rel="manifest" href="/manifest.json" />
<title>Webnative React TodoMVC</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="./src/index.jsx"></script>
</body>
</html>
Loading