From e8f00cb7afc3666f240eb5f2c15df6a890358d03 Mon Sep 17 00:00:00 2001 From: Mike MacCana Date: Tue, 23 Aug 2022 16:51:22 +0100 Subject: [PATCH] Minor tweaks - Highlight this works with any Vite supported framework - Clarify we're adding packages for the browser for node.js features (instead of saying we're adding npm packages that are not available in the browser, which was confusing) - Flag a couple of places where the instructions differ per framework. --- getting-started-vite/README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/getting-started-vite/README.md b/getting-started-vite/README.md index 97d4d655..8242bff9 100644 --- a/getting-started-vite/README.md +++ b/getting-started-vite/README.md @@ -1,8 +1,6 @@ # Getting Started with Metaplex and Vite -This example sets up a new React app with Metaplex using Vite. - -However, note that the same steps can be followed to create a web app using other frameworks such as VueJS or Svelte. +This example makes an app with Metaplex with Vite, using React, VueJS, Svelte or any other framework supported by Vite. This example has been generated using the following steps: @@ -26,7 +24,7 @@ This example has been generated using the following steps:
Why? - Some dependencies of the Metaplex SDK are still relying on NPM packages that are not available in the browser. To make sure that the Metaplex SDK works in the browser, we need to install some polyfills. Note that we are installing some polyfills via rollup plugins since Vite uses rollup under the hood the bundle for production. + Some dependencies of the Metaplex SDK are still relying on node.js features that are not available in the browser by default. To make sure that the Metaplex SDK works in the browser, we need to install some polyfills. Note that we are installing some polyfills via rollup plugins since Vite uses rollup under the hood the bundle for production.
```sh @@ -41,18 +39,21 @@ This example has been generated using the following steps:
Why? - The main goal of all these changes is to polyfill NPM packages that are not available in the browser. The configuration updates look slightly confusing because we have to polyfill differently for development and production. That's because Vite uses rollup under the hood to bundle the application for production but does not bundle your application at all in development. + The main goal of all these changes is to polyfill node.js features that are not available by default in the browser. The configuration updates look slightly confusing because we have to polyfill differently for development and production. That's because Vite uses rollup under the hood to bundle the application for production but does not bundle your application at all in development.
```js import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; + // Or for other frameworks: + // import { svelte } from "@sveltejs/vite-plugin-svelte"; + // etc. import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill"; import nodePolyfills from "rollup-plugin-node-polyfills"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react()], // Or svelte(), etc. resolve: { alias: { stream: "rollup-plugin-node-polyfills/polyfills/stream",