Microbundle VS wouter

To begin, you need to prepare your environment. A few ways to build a React package include tools like Bit, Storybook, Lerna, and TSDX. However, for this tutorial, you will use a zero-configuration bundler for tiny modules called Microbundle.

I discovered microbundle lately, and I would like to share with you a mini template with the bare essentials and comfort to develop your packages with TypeScript.

For package authoring - microbundle is a handy boilerplate (I would avoid tsdx personally - it’s basically been abandoned for turborepo but that’s not apparent at first glance).

My tech stack was React + Typescript, Storybook for docs, vite.js for build instead of webpack, microbundle for bundling (basically a no-config rollup wrapper), and Google's release please bot for handling release/deployment.

Setting up a modern Typescript or Javascript development stack is a daunting task, there are a lot of moving parts, and sometimes the whole process seems like magic, so I switched to Microbundle. While microbundle handles the compilation, there are a lot of other moving parts that need to be set up to start developing with Nodejs/Typescript (CI, tests, linting, etc). So I've created an opinionated template repository with Typescript, Microbundle, Jest, eslint, husky, prettier, github actions, pnpm, and a bunch of other scripts. It enables me to start developing a library immediately by using the repository as a starter template. Let me know what you think and if some processes could be improved, or some valuable tools that could be added. Pull requests and suggestions are welcomed.

I would recommend starting by using https://github.com/developit/microbundle , as it has pretty good default behavior for generating library output.

Check out microbundle, which is what TSDX started as a typescript alternative to.

I’m quite happy with Microbundle

We're using wouter with great success. It's simple and effective for what we need from a router

If you feel like React Router is a bit too over-engineered and you just need simple routing, you can have a look at https://github.com/molefrog/wouter

I changed over to using wouter instead of react-router, and I love it!

Just to add alternatives. I'm a fan of Wouter its 1/10th in size compared with react-router.

Other options than react-router are also available, like wouter, if you can't use react-router for some specific reason.

Single page just means one index.html is served and then JavaScript takes over to display content. You can use a client side router to simulate pages. There are some to choose from, I can recommend wouter. https://github.com/molefrog/wouter

Routing: At this point you should understand how routing in React works. You can use react-router to enhance it. There is a small library called wouter which you might want to have a look at.