{"id":15013296,"url":"https://github.com/jorgenvatle/meteor-vite","last_synced_at":"2025-12-30T23:22:26.274Z","repository":{"id":67902488,"uuid":"602924158","full_name":"JorgenVatle/meteor-vite","owner":"JorgenVatle","description":"⚡ Replace Meteor's bundler with Vite for blazing fast build-times","archived":false,"fork":true,"pushed_at":"2025-08-16T18:08:11.000Z","size":8794,"stargazers_count":39,"open_issues_count":18,"forks_count":14,"subscribers_count":4,"default_branch":"release","last_synced_at":"2025-09-26T01:57:26.039Z","etag":null,"topics":["meteor","react","solidjs","svelte","vite","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Akryum/meteor-vite","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JorgenVatle.png","metadata":{"files":{"readme":"README.md","changelog":"changeset-status.json","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-17T08:33:01.000Z","updated_at":"2025-08-16T18:06:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"dd34827b-2e15-47d8-a55a-ced368b7c300","html_url":"https://github.com/JorgenVatle/meteor-vite","commit_stats":null,"previous_names":[],"tags_count":182,"template":false,"template_full_name":null,"purl":"pkg:github/JorgenVatle/meteor-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgenVatle%2Fmeteor-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgenVatle%2Fmeteor-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgenVatle%2Fmeteor-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgenVatle%2Fmeteor-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JorgenVatle","download_url":"https://codeload.github.com/JorgenVatle/meteor-vite/tar.gz/refs/heads/release","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgenVatle%2Fmeteor-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277573534,"owners_count":25841458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["meteor","react","solidjs","svelte","vite","vue"],"created_at":"2024-09-24T19:44:02.952Z","updated_at":"2025-09-29T19:30:33.460Z","avatar_url":"https://github.com/JorgenVatle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# meteor-vite\n\nUse [Vite](https://vitejs.dev) in your Meteor app! ⚡️\n\n## Key features\n\u003e ⚡**Significantly speeds up Meteor's client-side build process. Uses the Vite dev server under-the-hood, leading to blazing fast hot-module-replacement during development.**\n\n- Minimal migration steps for existing Meteor projects\n- Handles lazy-loaded Meteor packages \u0026 automatic code splitting for dynamic imports\n- Bring in all your favourite Vite plugins and use them together with your Meteor project.\n- Simplifies a lot of the setup for things like CSS preprocessors and UI frameworks.\n\n## Starter templates\n  - [**Vue 3**](https://vuejs.org/)\n    - [Example Project](/examples/vue) \n    - [Preview](https://meteor-vite-preview.wcaserver.com/release/vue) \n  - [**Svelte**](https://svelte.dev/)\n    - [Example Project](/examples/svelte)\n    - [Preview](https://meteor-vite-preview.wcaserver.com/release/svelte)\n  - [**React**](https://react.dev/)\n    - [Example Project](/examples/react)\n    - [Preview](https://meteor-vite-preview.wcaserver.com/release/react)\n  - [**Solid.js**](https://www.solidjs.com/)\n    - [Example Project](/examples/solid)\n    - [Preview](https://meteor-vite-preview.wcaserver.com/release/solid)\n  - [**Vue + `zodern:relay`**](https://github.com/zodern/meteor-relay)\n    - [Example Project](/examples/vue-zodern-relay)\n    - [Preview](https://meteor-vite-preview.wcaserver.com/release/vue-zodern-relay)\n  - [**Vue 3 + SSR**](https://vuejs.org/)\n    - [Example Project](/examples/vue-ssr)\n    - [Preview](https://meteor-vite-preview.wcaserver.com/release/vue-ssr)\n\n\n## Installation\n\n### Meteor v3\n```sh\n# Install Meteor-Vite and Vite with npm\nmeteor npm i meteor-vite\nmeteor npm i -D vite \n\n# Install the Meteor build plugin\nmeteor add jorgenvatle:vite\n```\n\n### Meteor v2\nIf you are using Meteor v2 you need to make sure you install Vite v4 and `jorgenvatle:vite-bundler` instead.\n\n```sh\nmeteor npm i -D vite@4\nmeteor npm i meteor-vite@2\nmeteor add jorgenvatle:vite-bundler\n```\n- [Release branch](https://github.com/JorgenVatle/meteor-vite/tree/meteor-v2) (Documentation for Meteor-Vite with Meteor v2)\n\n#### Application structure\nYou can structure your app just like you would with a typical Meteor application. The key difference is the addition of \na Vite entry file for your Meteor client and server. These will become the primary entrypoints for your app.\n\nIf you're installing Meteor-Vite for an existing project, just rename your current client/server entry modules to `entry-vite.ts`.\nThen create a new empty `entry-meteor.js` file for your Meteor client and server.\n\n```text\n- client/\n  - entry-vite.ts    # Write your Meteor client code from here.\n  - entry-meteor.js  # Leave empty, Vite will write to this file to load missing dependencies at runtime.\n  - index.html\n- server/\n  - entry-vite.ts     # Write your Meteor server code from here.\n  - entry-meteor.js   # If you enable server builds with Vite: Leave empty. Vite will write to this file to load your finished server bundle.\n- package.json\n- vite.config.ts\n```\n\n#### Package.json\nNow, make sure you have `mainModule` entry in your `package.json` for each of the new `meteor-entry.js` files.\n\n```json5\n{\n  \"name\": \"my-app\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"meteor run\",\n    \"build\": \"meteor build ../output/vue --directory\"\n  },\n  \"dependencies\": {\n    // ...\n  },\n  \"meteor\": {\n    \"mainModule\": {\n      \"client\": \"client/entry-meteor.js\",\n      \"server\": \"server/entry-meteor.js\"\n    },\n  }\n}\n```\n\nYou can leave your `meteor-entry.js` files empty, or write to them if you'd like. Do keep in mind that Vite may write to \nthem during development and production bundling. What you add to your `meteor-entry.js` files will be ignored by Vite.\nSo you should generally avoid adding anything to these modules unless you have a very specific use case that cannot \nbe handled by Vite.\n\n#### Vite config\nCreate a Vite configuration file (`vite.config.ts`) in your project root. And load in the `meteor-vite` plugin.\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { meteor } from 'meteor-vite/plugin';\n\nexport default defineConfig({\n    plugins: [\n        meteor({\n          clientEntry: 'client/entry-vite.ts',\n            \n          // Optionally specify a server entrypoint to build the Meteor server with Vite.\n          serverEntry: 'server/entry-vite.ts',\n          enableExperimentalFeatures: true, // Required to enable server bundling.\n        }),\n        \n        // ... Other Vite plugins here. E.g. React or Vue (See examples below)\n    ],\n})\n```\n\n#### ⚡️ Final steps\n\nWrite your code from your `entry-vite.ts` files. Install any Vite plugins you prefer to power your Meteor app. \nSee below for examples with popular UI frameworks.\n\nIf you have any existing Meteor build plugins like `typescript`, etc. you can safely remove them. \nVite comes with out-of-the-box support most of these. For the rest, it's usually as simple as just adding a plugin to\n`vite.config.ts`.\n\n- [Official Vite plugins](https://vite.dev/plugins/)\n- [Vite plugin documentation](https://vite.dev/guide/using-plugins.html)\n\n\nStart your app and enjoy blazingly fast HMR and builds, all powered by Vite! ⚡️\n```sh\nmeteor run\n```\n\n## Example with Vue 3\n```js\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { meteor } from 'meteor-vite/plugin';\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n    plugins: [\n        meteor({\n          clientEntry: 'client/entry-vite.ts',\n        }),\n        vue(),\n    ],\n    // Other vite options here...\n})\n```\n\n## Example with Vue 2.7\n```js\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { meteor } from 'meteor-vite/plugin';\nimport vue from '@vitejs/plugin-vue2'\n\nexport default defineConfig({\n    plugins: [\n        meteor({\n          clientEntry: 'client/entry-vite.ts',\n        }),\n        vue(),\n    ],\n    // Other vite options here...\n})\n```\n\n## Example with React\n```js\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { meteor } from 'meteor-vite/plugin';\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n    plugins: [\n        meteor({\n          clientEntry: 'client/entry-vite.ts',\n        }),\n        react({\n            jsxRuntime: 'classic',\n        }),\n    ],\n    optimizeDeps: {\n        exclude: ['@meteor-vite/react-meteor-data'], \n    }\n})\n```\n\nIf your project depends on [`meteor/react-meteor-data`](https://github.com/meteor/react-packages) it might be worthwhile to \nreplace it with our npm-published fork [`@meteor-vite/react-meteor-data`](https://github.com/JorgenVatle/meteor-vite/tree/release/npm-packages/%40meteor-vite/react-packages).\n\nThe fork simply publishes the package over npm instead of Atmosphere. This has a few benefits. Primarily, Meteor \nwon't try to bundle React for you, instead leaving it to Vite. This gives you more flexibility in configuring your React\nenvironment through Vite. And a good boost in build times.\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    Using the official `react-meteor-data` package without npm (advanced)\n  \u003c/summary\u003e\n  \n### React with Atmosphere's `react-meteor-data` package\n\u003e This approach is generally not the recommended as it introduces a lot of complexity in dependency tracking for code that depends on React.\n\nIf you need to use the official `react-meteor-data` package or you still want to stick with the Atmosphere version you will need to instruct Vite to externalize React, so it\nisn't included twice in your client bundle.\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { meteor } from 'meteor-vite/plugin';\n\nexport default defineConfig({\n    plugins: [\n        react(),\n        meteor({\n            clientEntry: \"client/entry-vite.tsx\",\n            // This instructs Vite to not bundle react and react-dom as they will be bundled by Meteor instead.\n            externalizeNpmPackages: ['react', 'react-dom'], \n            stubValidation: {\n                warnOnly: true,\n                // React uses conditional exports for production and development environments\n                // Meteor-Vite ignores these when preparing a stub file for externalized dependencies\n                // This prevents warning messages from flooding the console when running your app.\n                ignoreDuplicateExportsInPackages: ['react', 'react-dom'],\n            },\n            meteorStubs: {\n                debug: false\n            },\n        })\n    ],\n});\n```\n\nThen in your Meteor client's `mainModule`, we need to explicitly import React to prevent the Meteor bundler from\nomitting unused React components from your bundle.\n\n```ts\n// ./client/entry-meteor.js\nimport 'react';\nimport 'react-dom';\nimport 'react-dom/client';\nimport 'react/jsx-dev-runtime';\nimport 'react-refresh';\n\nimport 'meteor/react-meteor-data';\n```\n\n\u003c/details\u003e\n\n\n\nAnd that should be it. Write your app from your `vite.tsx` entrypoint and enjoy lightning fast HMR ⚡\n\n## Configuration\nThe only required config field is your Vite `clientEntry` field. The rest is optional and usually doesn't require\ntinkering with.\n```ts\n// vite.config.ts\nimport { meteor } from 'meteor-vite/plugin';\n\nexport default defineConfig({\n  plugins: [\n    meteor({\n      /**\n       * Path to the client entrypoint for your app.\n       * This becomes your new Vite-powered mainModule for Meteor.\n       * @required\n       */\n      clientEntry: 'client/entry-vite.ts',\n        \n      /**\n       * Enter your Meteor server's entrypoint here to prebuild your Meteor server modules using Vite.\n       * This will not compile your Atmosphere packages, but will build all your app's server modules into\n       * a single file, greatly aiding Meteor in server reload performance during development.\n       *\n       * Not only does this come with improved performance, but also the flexibility of Vite's build system.\n       * The Meteor server is built using Vite SSR mode. To configure just the server builds see\n       * {@link https://vite.dev/config/#conditional-config Conditional Configuration docs}\n       * @optional\n       */\n      serverEntry: 'server/entry-vite.ts',\n        \n      /**\n       * Failsafe opt-in to prevent experimental features and configuration from taking effect.\n       * Required if {@link serverEntry} is specified.\n       */\n      enableExperimentalFeatures: true,\n      \n      /**\n       * Skips bundling the provided npm packages if they are already provided by Meteor.\n       * This assumes you have a Meteor package that depends on the provided npm packages.\n       * @default []\n       */\n      externalizeNpmPackages: ['react', 'react-dom'],\n        \n      /**\n       * Whether imports for your Vite production assets in your app's index.html file should be generated statically\n       * (once during build) or dynamically with every incoming request. Enable if you need to change the base URL of\n       * your Vite assets after building your application.\n       * Set METEOR_VITE_BASE_URL=\u003cyour cdn url here\u003e in production to override the base URL for your Vite assets.\n       * @note Only affects web.browser and web.browser.legacy architectures. Cordova can only have assets generated\n       * statically.\n       * @warning If your CDN URL does not need to change after building your app, just define the URL using \n       * {@link https://vite.dev/config/shared-options.html#base `config.base`} instead. Using this option will result\n       * in additional resource consumption in production and somewhat slower response times unless caching is set up\n       * accordingly.\n       * @default true\n       */\n      dynamicAssetBoilerplate: false,\n      \n      /**\n       * Configures runtime validation of Meteor package stubs generated by Vite.\n       * See Features section in readme for more info\n       * @optional\n       */\n      stubValidation: {\n        /**\n         * list of packages to ignore export validation for.\n         * @default []\n         */\n        ignorePackages: ['ostrio:cookies'],\n        \n        /**\n         * Suppress warning messages when we resolve a module that has conflicting export keys.\n         * This is generally only an issue for React where as we ignore conditional exports when creating an\n         * ESM stub. These are only ESM export stubs that point to your Meteor bundle, so it's generally safe\n         * to ignore.\n         * @default []\n         */\n        ignoreDuplicateExportsInPackages: ['react', 'react-dom'],\n        \n        /**\n         * Will only emit warnings in the console instead of throwing an exception that may\n         * prevent the client app from loading.\n         * @default false\n         */\n        warnOnly: true,\n        \n        /**\n         * Set to true to completely disable stub validation. Any of the above options will be ignored.\n         * This is discuraged as `warnOnly` should give you an important heads up if something might be wrong\n         * with Meteor-Vite\n         * @default false\n         */\n        disabled: false,\n      },\n    }),\n  ],\n});\n```\n\n### Meteor plugin settings\nThere are a couple extra advanced settings you can change through your `package.json` file under `meteor.vite`.\nIn most cases, you won't need to add anything here.\n```json5\n// package.json\n{\n  \"name\": \"my-app\",\n  // ...\n  \n  \"meteor\": {\n    \"mainModule\": { /* ... */ },\n    \n    // Additional configuration for Meteor-Vite (optional)\n    \"vite\": {\n      // If your Vite config file lives in another directory (e.g. private/vite.config.ts), specify its path here\n      \"configFile\": \"\",\n      \n      // Replace or remove Meteor packages when bundling Vite for production.\n      // This may be useful for a small subset of compiler-plugin packages that interfere with Vite's build process.\n      //\n      // This is only used during the Vite bundling step. The packages included in your final production \n      // bundle remains unaffected.\n      \"replacePackages\": [\n        // Removes standard-minifier packages while building with Vite. (default)\n        { \"startsWith\": \"standard-minifier\", \"replaceWith\": \"\" },\n\n        // Replace refapp:meteor-typescript with the official typescript package. (default)\n        { \"startsWith\": \"refapp:meteor-typescript\", replaceWith: \"typescript\" },\n      ]\n    }\n  }\n}\n```\n\n## Features in-depth\n\n### Lazy Loaded Meteor Packages\nMeteor-Vite will automatically detect lazy loaded Meteor packages and import them into your Meteor client's entrypoint.\nThis is necessary to ensure that the Vite bundler has access to your Meteor packages.\n\nThe imported files can safely be committed to your project repository. If you remove the associated package in the\nfuture, simply remove the import statement.\n\nOur detection for these packages is fairly primitive, so it's best to keep the imports in the Meteor client\nentrypoint as specified in the `meteor.mainModule.client` field of your `package.json` file.\n```json5\n{\n  \"meteor\": {\n    \"mainModule\": {\n      \"client\": \"client/entry-meteor.js\", // Lazy loaded packages checked for and added to this file.\n      \"server\": \"server/entry-meteor.js\"\n    }\n  }\n}\n```\n\n### Stub validation\nRuntime validation at the client is performed for Meteor packages that are compiled by Vite. This is done to avoid a\nsituation where Meteor-Vite incorrectly exports undefined values from a Meteor Package. Which can lead to silently\nbroken Meteor packages.\n\nThe validation is done simply through verifying that package exports do not have a `typeof` value of `undefined`.\nIf you do have a package that intentionally has `undefined` exports, you can disable the warning message for this\npackage by excluding it in your Meteor settings.json file.\n\nPackages that register global exports only for testing may result in false-positives. `ObserveMultiplexer` in \n`meteor/mongo` on the server is a good example of this.\n\n```ts\n// vite.config.ts\nexport default defineConfig({\n  plugins: [\n      meteor({\n        stubValidation: {\n            ignorePackages: ['ostrio:cookies', 'meteor/mongo'],\n            \n            /**\n             * This will prevent the validator from throwing errors\n             * when a missing export is detected.\n             */\n            warnOnly: true,\n            \n            /**\n             * If you want no warnings, you can simply disable the validation outright.\n             */\n            disabled: false,\n        }\n      })\n  ]\n})\n```\n\n## Avoid imports in Meteor's client `mainModule`\nCode written to or imported by your Meteor client's [`mainModule.client`](https://docs.meteor.com/packages/modules.html#Modular-application-structure) \nwill not be processed by Vite, however, it will still by loaded by the Meteor client. So if you have a use case where \nyou have some code that you don't want Vite to process, but still want in your client bundle, this would be the place \nto put that.\n\nBut do be careful with this - any code that's imported by both your Vite config's [`clientEntry`](#example-with-vue)\nand your Meteor `mainModule.client` may lead to the code being included twice in your final production bundle.\n\nTo avoid any confusion between the two, we recommend that you name your entry modules in a way that makes it clear\nwhich part is imported where. See [Application Structure](#application-structure) for a recommended naming scheme.\n\n## Meteor build plugins\nMeteor-Vite is more or less a replacement for Meteor's entire build system. Standard minifier packages and other \nMeteor-ecosystem build plugins are no longer necessary, you can now lean on the much larger and widely adopted Vite\necosystem for configuring your app's build process.\n\nIf there is functionality provided by a Meteor build plugin that you can't find a Vite-equivalent plugin for, please do\nopen an issue, and we might be able to port it over for you if there is no other good alternative.\n\n### Compatability with [`zodern:relay`](https://github.com/zodern/meteor-relay#readme)\nSince `zodern:relay` depends on a Babel plugin for processing your publication and methods on the client, we need some\nextra configuration to make that work with Vite.\n\nWe have a separate Vite plugin that should take care of this for you:\n- [`@meteor-vite/plugin-zodern-relay`](/npm-packages/@meteor-vite/plugin-zodern-relay#readme)\n  - [View documentation](/npm-packages/@meteor-vite/plugin-zodern-relay#readme)\n  - [View on npm](https://npmjs.com/@meteor-vite/plugin-zodern-relay)\n\n\n## Package Details\nThe Vite integration comes with two dependencies that work together to enable compatibility between Meteor and Vite.\n\n- [`meteor-vite`](/npm-packages/meteor-vite/) - Internal Vite plugin and server worker parsing and formatting Meteor packages for Vite.\n    - [View changelog](/npm-packages/meteor-vite/CHANGELOG.md)\n    - [View on npm](https://www.npmjs.com/package/meteor-vite)\n\n- [`jorgenvatle:vite`](/packages/vite/) - Meteor build plugin for launching Vite workers and compiling production bundles from Vite and Meteor.\n    - [View changelog](/packages/vite/CHANGELOG.md)\n    - [View on Atmosphere](https://atmospherejs.com/jorgenvatle/vite)\n    - [View on Packosphere](https://packosphere.com/jorgenvatle/vite)\n\n\n## Roadmap\n- [x] SSR (See [Vue-SSR example app](/examples/vue-ssr))\n- [x] Meteor v3 support\n    - [x] Migrate bundler from Fibers to Async/Await\n    - [x] Update Meteor bundle parser to support new format introduced in v3.\n- [x] Code-splitting/Dynamic imports\n- [x] Automatically detect and inject React preamble into app markup.\n- [x] Add support for Vite v5\n- [x] Serve Vite bundle directly from Meteor, bypassing Meteor's build process.\n  - [x] Inject Vite module preload polyfill into the Vite client entrypoint.\n  - [ ] Server-side multi-page/multi-entrypoint support.\n  - [ ] Handle parsing bundle manifest when using the `--production` flag.\n- [ ] Use Vite error overlay when stub validation fails client-side.\n- [ ] Validate that `meteor-vite` and `jorgenvatle:vite` both have matching compatible versions. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgenvatle%2Fmeteor-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorgenvatle%2Fmeteor-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorgenvatle%2Fmeteor-vite/lists"}