[feature] Modern workflow (esbuild, Storybook) #12
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
domq
force-pushed
the
feature/storybook
branch
6 times, most recently
from
994b1e6 to
57dcfb4
Compare
|
Still to-do: resolve the following Yarn warning. |
domq
force-pushed
the
feature/storybook
branch
from
7b16bd5 to
2c9be8c
Compare
``` yarn remove @epfl/epfl-sti-react-library ```
This is an actual dependency of our code, but previously we were getting away with not declaring it because `@epfl/epfl-sti-react-library` also used to require it.
- I don't have a `packages/` subdirectory (nor do I want one) - Apply https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
``` yarn add -D esbuild esbuild-plugin-inline-image ```
- Write a `esbuild.mjs` script to build all the things under `dist/` - Embed a reverse proxy in there, as advised [in the esbuild documentation](https://esbuild.github.io/api/#serve-proxy). Its job is to serve `public/index.html` except on select URIs (the ones we know that esbuild can handle by itself) - Support development and production builds - Trim all the create-react-app-ey bells and whistles out of `public/index.html` - Load the JS explicitly as part of a `<script defer>` in same `public/index.html` (this used to be done implicitly with `create-react-app`) - Add `/dist/` to `.gitignore`
💡 That package is dead (last release in 2021). ```bash yarn remove react-scripts ```
Before: we had to do it the `create-react-script` way as per https://create-react-app.dev/docs/adding-custom-environment-variables/ After: use [esbuild's `define:` feature](https://esbuild.github.io/api/#define). - Fold all the fallback values business into JavaScript (i.e. no `.env` files anymore) - Switch between development and production values according to `window.IS_PRODUCTION` (which won't actually be set, just substituted by esbuild at build time).
As per https://esbuild.github.io/api/#live-reload : - `.serve()` and `.watch()` both - Whitelist `/esbuild` to go through the reverse proxy - `src/index.js`: listen to the `/esbuild` event, for development builds only
``` yarn add epfl-elements ```
- Teach esbuild what it means to import CSS (i.e. add a suitable `loader`) - Do import the CSS from the JS (which causes esbuild to build the CSS as per https://esbuild.github.io/content-types/#css-from-js) - Whitelist `lhd3-frontend.css` in the reverse proxy - Call the CSS from the HTML homepage
... and eslint something-something. Despite the [hype](https://storybook.js.org/docs/builders/builder-api), Storybook doesn't [currently](storybookjs/storybook#24614) support esbuild. So we need a new build system just for it 🤷. ``` yarn add -D vite npx storybook@latest init -b vite -y ```
The idea is to be able to run both this one and the one from https://github.com/epfl-si/epfl-elements-react at once.
``` yarn remove @storybook/addon-onboarding ```
``` yarn add epfl-elements ```
``` yarn set version latest yarn ```
Problem 1: `@storybook/builder-vite@npm:7.6.3` requires `@vitejs/plugin-react": "^3.0.1`, which is [ancient](https://www.npmjs.com/package/@vitejs/plugin-react?activeTab=versions) and doesn't go with Vite 5. Problem 2: we do not want to downgrade to Vite 4. While [in may be only a matter of days or weeks](storybookjs/storybook#24953) until the situation changes, the [currently recommended workaround](storybookjs/storybook#24901) is to cheat on the version of the latter, given that according to the comment cited, it is dead code anyway as long as we have a top-level Vite configuration (which we do).
``` yarn remove @react-keycloak/web yarn add @mui/base @mui/system @popperjs/core yarn add -D @testing-library/dom ```
We shall change this when the first version of `epfl-elements-react` is released.
... As suggested by the previous commit. Since we currently don't have a released version of `epfl-elements-react`; but that on the other hand, the [LHDv3 dev kit](https://github.com/epfl-si/lhd3-dev) ensures that `../epfl-elements-react` is available; it just feels better to commit this for now (even if we might incur some commit noise due to checksums changing back and forth between workspaces of team members).
These were for React 18, while React is currently installed with version 17.
rosamaggi
force-pushed
the
feature/storybook
branch
from
4aa7f79 to
9b8005d
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
create-react-apptooling (unmaintained for 2 years); replace withesbuild