Skip to content

Commit

Permalink
chore: Migrate from Create React App to Vite (#231)
Browse files Browse the repository at this point in the history
* chore(vite): use vite

* fix(vite): alias lib directory

* chore(vite): set type: module

* chore: update vite and MUI

* fix(vite): make MUI components load

* fix: use node path resolution

* chore(vite): add svg support

* fix(vite): polyfill global

* fix(vite): use import.meta

* fix(vite): use correct svg module resolution

* chore(vite): migrate to vitest

* fix(vite): remove PUBLIC_URL

* fix(tests): mock audio service

* chore(deps): upgrade to react test library 14

* refactor(tests): simplify room test setup

* refactor(tests): make Date.now() mockable

* refactor(vite): remove bootstrap shim

* chore(deps): drop react-scripts

* chore(deps): remove source-map-explorer

Source maps do not currently work with MUI and Vite:
vitejs/vite#15012

Because of this, source map utilities are currently removed.

* refactor(vite): use TypeScript for Vite config

* chore(actions): update actions config for new paths

* fix(service-worker): use VITE_HOMEPAGE for service worker resolution

* fix(vercel): use quotes for build command

* fix(vite): use import.meta.env.MODE

* fix(service-worker): use correct definition for publicUrl

* feat(vite): use vite-plugin-pwa

* fix(pwa): make update prompt work

* fix(types): use vite/client types

* docs(readme): update building instructions

* refactor(vite): simplify theme loading workaround

* refactor(vite): use manifest object

* docs(readme): update tool references

* chore(deps): run `npm audit fix`

* fix(vite): make syntax highlighter work consistently

See: react-syntax-highlighter/react-syntax-highlighter#513

* fix(pwa): remove manifest.json references

* refactor(deps): remove jest references

* refactor(types): remove react-scripts reference

* chore(deps): use TypeScript 5

* refactor(tests): improve persisted storage mocking
  • Loading branch information
jeremyckahn committed Mar 13, 2024
1 parent 72bc66a commit ea34058
Show file tree
Hide file tree
Showing 40 changed files with 24,830 additions and 16,866 deletions.
3 changes: 1 addition & 2 deletions .env
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
REACT_APP_NAME=$npm_package_name
REACT_APP_GITHUB_REPO="https://github.com/jeremyckahn/chitchatter"
VITE_GITHUB_REPO="https://github.com/jeremyckahn/chitchatter"
3 changes: 1 addition & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ on:
push:
branches:
- '**'
# - '!main'

jobs:
test_and_build:
Expand All @@ -23,4 +22,4 @@ jobs:
- uses: actions/upload-artifact@v3
with:
name: build-output
path: build
path: dist
3 changes: 1 addition & 2 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,10 @@ jobs:
run: |
npm ci
npm run build
npm run analyze -- --html build/bundle-info.html
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.DEPLOY_KEY }}
publish_dir: ./build
publish_dir: ./dist
force_orphan: true
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
/coverage

# production
/build
/dist
/dev-dist

# misc
.DS_Store
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Chitchatter is a free (as in both price and freedom) communication tool. Designe
- Embeddable
- [Self-hostable](#self-hosting)

Chitchatter uses the [Create React App](https://github.com/facebook/create-react-app) toolchain. The secure networking and streaming magic would not be possible without [Trystero](https://github.com/dmotz/trystero). File transfer functionality is powered by [`secure-file-transfer`](https://github.com/jeremyckahn/secure-file-transfer).
Chitchatter uses [Vite](https://vitejs.dev/). The secure networking and streaming magic would not be possible without [Trystero](https://github.com/dmotz/trystero). File transfer functionality is powered by [`secure-file-transfer`](https://github.com/jeremyckahn/secure-file-transfer).

## Status

Expand Down Expand Up @@ -173,11 +173,11 @@ The page will reload when you make changes. You may also see any lint errors in

### `npm test`

Launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
Launches the test runner in the interactive watch mode.

### `npm run build`

Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
Builds the app for production to the `dist` folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Expand All @@ -204,7 +204,7 @@ When hosted on GitHub Pages and the configuration above has been done, the Produ

##### On non-GitHub hosts

Build the app with `PUBLIC_URL="https://your-domain-here.com" npm run build`, and then serve the `build` directory. Any static file serving solution should work provided it is using a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
Build the app with `npm pkg set homepage="https://your-domain-here.com" && npm run build` (with `https://your-domain-here.com` substituted for the root URL that Chitchatter will be served from), and then serve the `dist` directory. Any static file serving solution should work provided it is using a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).

#### Runtime configuration

Expand Down
File renamed without changes.
File renamed without changes.
14 changes: 5 additions & 9 deletions public/index.html → index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,20 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="A peer-to-peer chat app that is serverless, decentralized, and ephemeral"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
Expand Down Expand Up @@ -69,5 +64,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
91 changes: 91 additions & 0 deletions manifest.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { ManifestOptions } from 'vite-plugin-pwa'

export const manifest: Partial<ManifestOptions> = {
short_name: 'Chitchatter',
name: 'Chitchatter',
description:
'This is a communication tool that is free, open source, and designed for simplicity and security. All communication between you and your online peers is encrypted. There is no trace of your conversation once you leave.',
icons: [
{
src: 'favicon.ico',
sizes: '64x64 32x32 24x24 16x16',
type: 'image/x-icon',
},
{
src: 'logo192.png',
type: 'image/png',
sizes: '192x192',
},
{
src: 'logo512.png',
type: 'image/png',
sizes: '512x512',
},
],
start_url: './',
display: 'fullscreen',
theme_color: '#000000',
background_color: '#222222',
screenshots: [
{
src: 'screenshots/home-desktop.png',
sizes: '2160x1620',
type: 'image/png',
},
{
src: 'screenshots/public-room-desktop.png',
sizes: '2160x1620',
type: 'image/png',
},
{
src: 'screenshots/public-room-desktop-with-video.png',
sizes: '2160x1620',
type: 'image/png',
},
{
src: 'screenshots/home-mobile-dark.png',
sizes: '750x1334',
type: 'image/png',
form_factor: 'narrow',
},
{
src: 'screenshots/home-mobile-light.png',
sizes: '750x1334',
type: 'image/png',
form_factor: 'narrow',
},
{
src: 'screenshots/public-room-mobile.png',
sizes: '750x1334',
type: 'image/png',
form_factor: 'narrow',
},
],

shortcuts: [
{
name: 'About',
url: './about',
icons: [
{
src: 'logo512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any',
},
],
},
{
name: 'Disclaimer',
url: './disclaimer',
icons: [
{
src: 'logo512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any',
},
],
},
],
}

0 comments on commit ea34058

Please sign in to comment.