1. Set up a new Vite project​

Start a new project:

npm create vite@latest

Choose React & TypeScript + SWC

Here are 4 things I recommend you to do right after installing Vite:

1. Early first commit Committing regularly is a very good habit. And there is one point in time where it is especially helpful, right after you created a new project and BEFORE you type the first character in your project.

2. Install node's types If working with TypeScript I also install the types package for node. Sooner or later you will need this.

   pnpm add -D @types/node
   

2. Create a lib/main.ts file​

Create a folder next to src and name it lib. Inside, create the file which will act as the main entry point of your library, and name it main.ts. When installing the library you can import everything that is exported from this file.

 📂 my-component-library
┣ 📂 lib
┃ ┗ 📜 main.ts
  ┣ 📂 public
  ┣ 📂 src
  …

3. Activate Vite's Library Mode​

By default, when running vite build, Vite will transpile the code inside src to the dist folder. What we want instead, is to transpile and ship the code inside of lib.

To activate vite's library mode, inside of our vite.config.ts file, we will need to use the build.lib option.

Like so (do not copy code yet!):

import { resolve } from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es']
    }
  }
})

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

• 2019-05-30-welcome.md
• 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Blog posts support Docusaurus Markdown features, such as MDX.

<button onClick={() => alert('button clicked!')}>Click me!</button>

Congratulations, you have made your first post!

Feel free to play around and edit this post as much you like.

This is the summary of a very long blog post,

Use a <!-- truncate --> comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet