Skip to content

Commit

Permalink
chore: document how to import components from local repo
Browse files Browse the repository at this point in the history
  • Loading branch information
vursen authored Nov 14, 2024
2 parents 92072b9 + e8009de commit 03199f6
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,41 @@
# Vaadin React components

React wrappers for Vaadin components.

## Using Local React Components in a Vaadin Project

When developing React components locally, you may want to test your changes in a Vaadin application. To configure an application to import React components from a local repository, add this Vite plugin to the app's `vite.config.ts`:

```ts
function useLocalReactComponents(nodeModules: string): PluginOption {
return {
name: 'use-local-react-components',
enforce: 'pre',
config(config) {
config.server ??= {};
config.server.fs ??= {};
config.server.fs.allow ??= [];
config.server.fs.allow.push(nodeModules);
config.server.watch ??= {};
config.server.watch.ignored = [`!${nodeModules}/**`];
config.optimizeDeps ??= {};
config.optimizeDeps.exclude = [
...(config.optimizeDeps.exclude ?? []),
'@vaadin/react-components',
'@vaadin/react-components-pro',
];
},
resolveId(id) {
if (/^(@vaadin|@polymer)/.test(id)) {
return this.resolve(path.join(nodeModules, id));
}
},
};
}

const customConfig: UserConfigFn = (env) => ({
plugins: [useLocalReactComponents('/path/to/react-components/node_modules')],
});

export default overrideVaadinConfig(customConfig);
```

0 comments on commit 03199f6

Please sign in to comment.