#ViteJS
Now, if anyone would have some pointers how to easily get a WebAudio AudioWorklet going with @vite, then that example could be updated to produce realtime audio and I could listen to that for hours in the background... 🥰🎧
AFAICT support for worklets is still outstanding and so far I only managed it via pre-compiling/bundling the worklet code in a separate build step, but it's not great to work with that way during dev...
Introducing StoryLite, a lightweight alternative to #StoryBook built with #React and #Vitejs
https://blog.itsjavi.com/introducing-storylite-a-lightweight-alternative-to-storybook
All of that in one blog post:
https://wojciech.space/migrate-react-project-from-create-react-app-to-vite-js/
4. All set up!
It took me about an hour to set up Vite.js into desired configuration to allow that specific React+TypeScript project into running. I hope it will also help you to kickstart your migration CRA => Vite.
3. Vite config
95% of config was easy to set up, the only thing I had to search online was how to force Vite into using HTTPS with some sort of certificate. It was possible with vite-plugin-basic-ssl[1].
2. Add support for tests (Jest, React Testing Library)
That one was tricky, but thanks to 2 articles on Medium (I will link to privacy-friendly versions) I managed to run tests.
[1]: https://scribe.rip/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f
[2]: https://scribe.rip/how-to-setup-jest-and-react-testing-library-in-vite-project-2600f2d04bdd
1. Remove CRA & install Vite.js
This is pretty straight-forward, I followed an example for react-ts available at Vite documentation[1].
Recently I had to replace create-react-app with Vite.js in one project at work. This is a thread of what I did to make that work:
4. All set up!
It took me about an hour to set up Vite.js into desired configuration to allow that specific React+TypeScript project into running. I hope it will also help you to kickstart your migration CRA => Vite.
3. Vite config
95% of config was easy to set up, the only thing I had to search online was how to force Vite into using HTTPS with some sort of certificate. It was possible with vite-plugin-basic-ssl[1].
2. Add support for tests (Jest, React Testing Library)
That one was tricky, but thanks to 2 articles on Medium (I will link to privacy-friendly versions) I managed to run tests.
[1]: https://scribe.rip/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f
[2]: https://scribe.rip/how-to-setup-jest-and-react-testing-library-in-vite-project-2600f2d04bdd
1. Remove CRA & install Vite.js
This is pretty straight-forward, I followed an example for react-ts available at Vite documentation[1].
Recently I had to replace create-react-app with Vite.js in one project at work. This is a thread of what I did to make that work:
Three.js development in 2023 (a short blog post): https://brettkromkamp.com/posts/three-js-development-in-2023/
#threejs #vitejs #typescript #blender #b3d #react #r3f #gltf
Today, #nodejs package hell drove me crazy. #commonjs and #esm bundling with only #esbuild seems to be impossible today; at least I didn't manage to get a configuration that supports
- browser environment (when installled in an app, for example with #vitejs)
- node environment (for services in node docker containers)
- bin script support
Especiallly the generated CommonJS of esbuild seems to be strange and lead to a lot of incompatibilites.
Join me for Storybook Day tomorrow (March 14). I'll be talking about the performance improvements we've made in #storybook, how we achieved first-class #viteJS support, and what we've done to reduce the storybook install size.
See the full schedule at https://storybook.js.org/day/schedule, and join us in Discord to discuss and ask questions. https://discord.gg/storybook
While working on a #javascript module idea, I fell down a rathole of improving my development workflow to build modules. What's it do?
1. The workflow uses #Vitejs for a demo page to make working on the module easier, with the goodies Vite brings, i.e. working with #typescript, HMR, and speed.
2. The workflow publishes that demo page with #GitHubActions as your demo site in your repo to GitHub Pages.
3. GitHub Actions also use Vite to build both a Common JS and ES module version of your module and then publish to NPM when you change the version number.
I’ve posted my repo below. There are some docs, but I hope to continue to improve them.
https://github.com/johnfmorton/vite-module-builder-w-ghpages-npm-template
I always neglect to set up relative imports with modern JS tooling. It used to be hard, but apparently it's far easier now. At least with ViteJS it is. Here is how to configure an alias of '@' to allow relative imports from anywhere in your codebase #vitejs #javascript
![1 import { defineConfig } from 'vite'
2 import path from 'path'
3
4 export default defineConfig({
5
] resolve: {
Vi alias: {
] '@': path.resolve(__dirname, './src') ] b
(1
i
12 })
13
hv
15 import Example from '@/components/Example’](https://s3.eu-central-2.wasabisys.com/mastodonworld/cache/media_attachments/files/109/888/411/487/955/251/small/c1b36d89f8ab0098.png)
If you use `vite-plugin-favicon` you should update to version 1.1.5 for dramatically improved code-start times for the Vite devserver #vitejs https://github.com/khalwat/vite-plugin-favicon/releases/tag/1.1.5
32s before / 5s after in our test env
Just set up a new personal project. Trying #Vitejs for the first time, and my first upgrade to #Storybook 7. Excited to be working with both. Was up and running in 5 minutes after watching this talk from @IanVS (thank you!)
Underrated feature of #viteJS: It warns me when it starts up if there's a dependency being used that isn't installed (e.g. when switching between branches). It's much nicer than hitting a runtime error, and reminds me that I need to run an `npm install`. 😍
In #vitejs build how would one approach a custom output path for a specific file? src/file.js to go in dist/file.js.
Everything else should get the default stuff
❄️ Winter sleep is over in our community! Join us for some cozy #svelte DX session with maintainers Simon @dummdidumm of #vercel and Dominik (#vitejs & #sveltekit) https://youtu.be/CiOigf4FbNg RSVP now: https://www.meetup.com/frontend_rm/events/291177792/
📢 Vitest is the neatest! 🎉 Using the @vitest UI you can see a visual representation of the module & test dependency graph!
We just love what Vitest does for testing w/ @vite so fast & interactive! #vitest #vitejs #javascript #typescript #tdd https://vitest.dev
For anyone who is interested in a self-contained simple demo of test driven development (TDD) of code & components with Vitest: #vuejs #vitejs #vitest #tdd #typescript https://github.com/nystudio107/charcuterie-vue-vitest
I'm honored to be counted among the "2022 core team" for #Storybook from my work on the #ViteJS builder. It's been a blast working with the team, 2022 brought tons of improvements, and I'm excited to see what we can do in 2023!
Read the latest blog post for a wrap-up of the year and look-ahead at what's next: https://storybook.js.org/blog/future-of-storybook-in-2023/
Has anyone found a good way to automatically assign maintainers to #github issues based on how an issue template is filled out? I'd love to get assigned to #viteJs issues in the #storybook repo, for instance. So far this doesn't seem possible "off-the-shelf", but maybe someone has written an action to do something like this?
been experimenting with using #vite #vitejs vite-plugin-ssr and #javascript import.meta.glob as a headless CMS
it feels quite magical, but, in contrast with #nextjs, i think i understand what it’s doing :blobfoxcomfycomputer:
Storybook is having their first-ever user conference to celebrate the launch of #Storybook 7.0. I've got my ticket, and might be talking a bit about the built-in support for #ViteJS. Grab your free ticket to be a part of it as well.
The #Storybook 7.0 beta has been announced: https://storybook.js.org/blog/7-0-beta/
I and the rest of the team have been working hard to ensure that it works seamlessly with #PNPM, #ViteJS, #Svelte, and more. There's a ton to love in this release.
The holidays are a good time to experiment with new things, so give it a whirl today. And feel free to let me know if you have any trouble, I'm happy to help out.
I'm really impressed how fast vite is. Now frontend development is fun again. 🏎
Build-Tool: Vite.js 4.0 verkleinert seinen Fußabdruck
@stevefenton I also like to use https://github.com/davestewart/alias-hq so that my typescript paths are the "source of truth" for path aliases in other tools, like the bundler (#ViteJS in my case).
Hat hier jemand schon #ViteJS gearbeitet? Etwas Skeptisch macht mich ja gerade dieses "developer experience" das sehr oft fällt.
Das Konzept ist interessant, ich kann nur gerade noch nicht richtig erfassen ob das in allen Use-Cases funktionierten wird.
Ich muss da auch gerade an den Raspberry denken, der über mir hängt und als Lichtschalter dient, da könnte ich mir vorstellen das es Probleme gibt.
If you are using #vitejs, #storybook, and Chromatic snapshots (you should be!), consider adding vite-plugin-turbosnap. It will limit snapshots to only the stories that your PR might have effected.
My team has saved 130,000 snapshots this year, helping us to remain on the cheapest plan offered, just barely.
@svoisen Thanks for sharing that post. "Convivial" is a word I had heard but never grasped.
I think #ViteJS is a good example of a project that is "malleable, convivial, tractable". @patak recently talked about not wanting to grow or add features, but rather serve as a solid base for other tools to be built upon. And it's structured in a way to allow replacing the tools it uses internally.
Do you have other projects in mind that you think exemplify conviviality?
Question for the #vitejs experts out there:
How can I stop vite from processing an esm script in my root html file? For example, I want vite to treat this as external:
```html
<script type="module" src="/sb-preview/runtime.mjs"></script>
```
Setting `build.rollupOptions.external` seems to have no effect here.
JavaScript: Stabile Version von Nuxt 3.0.0 ist fertig
@keithjgrant Some great folks building cutting-edge frontend tooling:
- @patak, @Shini92: @vite
- @antfu: @vitest, #SliDev & much more
- @nmoo, @matthewp, @calebjasik, @bholmesdev: #AstroJS
- @daniel: #Nuxt
- @zachleat: #11ty
- @akryum: histoire
- @evanw: #ESBuild
- @developit: @preact
- @brandontroberts: #Angular #AnalogJS
- @lindsaykwardell: #elmLang #vueJS
- @jessicasachs: #ViteJS, #testing
Finally,
@shilman, @dannyhw, @reinhold, @chantastic and myself for #Storybook
Who did I miss?
Holy cow! Just discovered something really cool about #ViteJS: If you have one Vite server running in "npm run dev", thus taking its default port 5173, and you start up another one... it auto-detects that and steps up to port 5174 automagically! Instead of just giving you a "cannot bind to port" error like CRA or other similar tools. That's super-sweet. Kudos to the https://vitejs.dev/ developers! #WebDevelopment
#typescript & #vitejs is a very enjoyable combination. Bonus points for #vitest
I just converted a small #chess library I wrote a while ago and it was a very smooth process. Looking forward to open-source it!
@sohanlon I'm in several active discord servers for open source projects, including discord.gg/storybook for #storybook, chat.vitejs.dev for #viteJS, and astro.build/chat for #astroJS. They can be overwhelming sometimes, and I don't keep up with all channels in all servers, but it's a great way to coordinate and handle support questions with these large projects.
Webentwicklung: Build-Tool Parcel mit mehr Performance bei großen Anwendungen
My PR to tackle the final challenges when using #pnpm and #vitejs in #storybook is green in CI and has at least one approval. :its-happening:
It's https://github.com/storybookjs/storybook/pull/19689 if anyone wants to follow along and try it out once it's released in the next 7.0 alpha.
@tricia Nice to meet you as well! Do you have links to videos of any of your talks? I gave one at #viteconf recently, covering #storybook, #testing, and how it fits with #vitejs. It's at https://viteconf.org/2022/replay/storybook if you're interested.
Here's my #introduction.
I'm a firm believer in career moves, and have made several, from #aerospace engineering, to project management, and finally to #webdev, in which I found my passion. I'm enjoying #Typescript, #React, #AstroJS, #ViteJS, and #Storybook, which is most of what I post about.
Other interests include #3dPrinting, #sustainability, #DIY, #gardening, #CyberSecurity, #EBike, #ScienceFiction, #podcasts, and trying to raise two boys to be good, fun people.
@BryceWrayTX if you’re into static site generators, have you played with https://astro.build/ at all? It uses #Vitejs so it’s very fast to HMR, and it generates zero #javascript by default, while still allowing you to opt in to react, vue, svelte, etc.