<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Nacho Codoñer</title>
    <description>The latest articles on Forem by Nacho Codoñer (@nachocodoner).</description>
    <link>https://forem.com/nachocodoner</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F906015%2F1cf8e534-c604-4f3f-a5f9-6aeb0c765b28.png</url>
      <title>Forem: Nacho Codoñer</title>
      <link>https://forem.com/nachocodoner</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/nachocodoner"/>
    <language>en</language>
    <item>
      <title>Meteor 3.4 is out: Rspack integration, 4x faster builds, 8x smaller bundles, and extended bundler features</title>
      <dc:creator>Nacho Codoñer</dc:creator>
      <pubDate>Fri, 30 Jan 2026 15:35:58 +0000</pubDate>
      <link>https://forem.com/meteor/meteor-34-is-out-rspack-integration-4x-faster-builds-8x-smaller-bundles-and-extended-bundler-51ia</link>
      <guid>https://forem.com/meteor/meteor-34-is-out-rspack-integration-4x-faster-builds-8x-smaller-bundles-and-extended-bundler-51ia</guid>
      <description>&lt;p&gt;Meteor 3.4 marks the final day of the &lt;strong&gt;&lt;a href="https://galaxycloud.app/galaxy-expansion" rel="noopener noreferrer"&gt;Galaxy Expansion&lt;/a&gt;&lt;/strong&gt; and celebrates a new era for the framework that started it all, bringing modern tools into the core Meteor experience.&lt;/p&gt;

&lt;p&gt;Meteor 3.4 introduces the &lt;strong&gt;Rspack bundler&lt;/strong&gt; in the core to improve the dev experience by cutting build times, reducing bundler size, and supporting standard configuration patterns and features from the wider JS ecosystem.&lt;/p&gt;

&lt;p&gt;This is a big step forward to address many long-requested improvements Meteor users have talked about, and we moved toward them across the newer Meteor 3 era.&lt;/p&gt;

&lt;p&gt;In Meteor 3.2, we started by &lt;a href="https://dev.to/meteor/unlocking-meteor-32-new-profiling-tool-to-track-bundler-performance-and-size-1jc8"&gt;adding tools to monitor our goals for the build experience&lt;/a&gt;, with &lt;code&gt;meteor profile&lt;/code&gt; introduced to measure build times and bundle size.&lt;/p&gt;

&lt;p&gt;In Meteor 3.3, we delivered the &lt;a href="https://dev.to/meteor/faster-builds-in-meteor-33-modern-build-stack-with-swc-and-bundler-optimizations-fm2"&gt;first round of optimizations for faster builds on the Meteor bundler&lt;/a&gt;, getting more from the solid and mature mechanism used for Meteor apps since the beginning. We added a new transpiler with SWC, a new watcher, and other improvements.&lt;/p&gt;

&lt;p&gt;In Meteor 3.4, to wrap up this effort on improving the bundler experience, we focused on delegating to a modern tool like Rspack, which let us meet all initial goals and allow Meteor apps to apply efficient HMR, tree shaking, full ESM support, modern plugins, and more.&lt;/p&gt;

&lt;p&gt;Our core team has already migrated to Rspack for the &lt;a href="https://galaxycloud.app/" rel="noopener noreferrer"&gt;Galaxy Cloud app&lt;/a&gt;, showing the optimizations applied to a real-world app like the one hosting your Meteor apps. This post details the changes and shows the Galaxy app’s improvement metrics as an example of what to expect with your Meteor 3.4 upgrade when adopting the Meteor Rspack integration.&lt;/p&gt;

&lt;p&gt;This release also includes community contributions for Meteor React packages by improving stability and performance of suspense hooks, integrating &lt;code&gt;collection-extensions&lt;/code&gt; package into core, considering Cordova as a modern build, and more.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;To start using Meteor 3.4.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a New App
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Create a new Meteor app using Meteor 3.4
meteor create my-app --release 3.4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;All improvements introduced in Meteor 3.3 and 3.4, including the Rspack integration, are enabled by default for new apps and applied to all skeleton examples. Check &lt;code&gt;meteor create --help&lt;/code&gt; to see the available skeletons.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Update Your App
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Update your existing Meteor app to version 3.4
meteor update --release 3.4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Add &lt;code&gt;modern&lt;/code&gt; to your &lt;code&gt;package.json&lt;/code&gt; to enable the Meteor Bundler optimizations:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"meteor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"modern"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check out &lt;a href="https://docs.meteor.com/about/modern-build-stack/meteor-bundler-optimizations.html#requirements" rel="noopener noreferrer"&gt;the requirements&lt;/a&gt; for Meteor Bundler optimizations on existing apps.&lt;/p&gt;

&lt;h4&gt;
  
  
  ☄️&lt;a href="https://docs.meteor.com/about/modern-build-stack/meteor-bundler-optimizations.html" rel="noopener noreferrer"&gt;Meteor Bundler optimizations docs&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Add &lt;code&gt;rspack&lt;/code&gt; package to enable the Rspack Bundler integration:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor add rspack
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check out &lt;a href="https://docs.meteor.com/about/modern-build-stack/rspack-bundler-integration.html#requirements" rel="noopener noreferrer"&gt;the requirements&lt;/a&gt; for Rspack Bundler integration on existing apps.&lt;/p&gt;

&lt;h4&gt;
  
  
  ⚡&lt;a href="https://docs.meteor.com/about/modern-build-stack/rspack-bundler-integration.html" rel="noopener noreferrer"&gt;Rspack Bundler integration docs&lt;/a&gt;
&lt;/h4&gt;




&lt;h2&gt;
  
  
  Highlights
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Faster Builds
&lt;/h3&gt;

&lt;p&gt;Meteor 3.4 goes further than Meteor 3.3 and the initial SWC adoption. With Rspack now compiling your app code, you get the speed of this modern tool built in Rust. The Meteor bundler still compiles Atmosphere packages and links the final app code, but that part was already optimized in Meteor 3.3, so you get the best of both.&lt;/p&gt;

&lt;p&gt;With &lt;code&gt;meteor profile&lt;/code&gt;, &lt;strong&gt;build times drop ~70% and are over ~3.5x faster&lt;/strong&gt;. Rebuild times for both client and server are now much shorter, making development far quicker.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.galaxycloud.app%2Fwp-content%2Fuploads%2F2026%2F01%2Ffaster-builds-1.png" class="article-body-image-wrapper"&gt;&lt;img alt="Image" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.galaxycloud.app%2Fwp-content%2Fuploads%2F2026%2F01%2Ffaster-builds-1.png" width="713" height="398"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These metrics were measured for the &lt;a href="https://galaxycloud.app/" rel="noopener noreferrer"&gt;Galaxy app&lt;/a&gt; Rspack migration, coming from Meteor 3.3 applied optimizations. Your app will see similar improvements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Smaller Bundles
&lt;/h3&gt;

&lt;p&gt;Meteor 3.4 introduces one of the most awaited features to keep app bundles small: &lt;strong&gt;tree shaking&lt;/strong&gt;. With the Meteor-Rspack integration, bundle size is significantly reduced through this built-in optimization, along with other Rspack strategies such as chunk splitting, dynamic imports, minification and more.&lt;/p&gt;

&lt;p&gt;After migrating and deploying the &lt;a href="https://galaxycloud.app/" rel="noopener noreferrer"&gt;Galaxy app&lt;/a&gt;, the &lt;strong&gt;main client bundle size dropped by about 88%&lt;/strong&gt; compared to previous 3.3.2 release. &lt;strong&gt;Client bundles are now thinner&lt;/strong&gt;, meaning &lt;strong&gt;less code delivered&lt;/strong&gt; and &lt;strong&gt;faster initial load times&lt;/strong&gt; for your apps.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.galaxycloud.app%2Fwp-content%2Fuploads%2F2026%2F01%2Fsmaller-bundles.png" class="article-body-image-wrapper"&gt;&lt;img alt="image" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.galaxycloud.app%2Fwp-content%2Fuploads%2F2026%2F01%2Fsmaller-bundles.png" width="684" height="227"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The gains vary by app, its dependencies, and the optimizations used. Just by applying tree shaking you will get improvements; sometimes smaller, sometimes much larger, depending on how tree-shakeable your dependencies are.&lt;/p&gt;

&lt;p&gt;Additionally, &lt;a href="https://rspack.rs/guide/optimization/code-splitting" rel="noopener noreferrer"&gt;by using code splitting and dynamic imports&lt;/a&gt; you split the main chunk, reduce the main size, and load other pieces on demand. Give it a try and play with these options in your project.&lt;/p&gt;

&lt;h4&gt;
  
  
  Atmosphere Bundle Reduction
&lt;/h4&gt;

&lt;p&gt;What is more, Meteor 3.4 adds an optimization for Atmosphere packages by introducing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The ability to mark packages as &lt;code&gt;devOnly&lt;/code&gt;, so they’re fully removed from production builds.&lt;/li&gt;
&lt;li&gt;A new &lt;code&gt;Npm.devDepends&lt;/code&gt; option in your package.js to define dev dependencies, ensuring only the needed node modules for development are included during dev time and excluded from production (&lt;code&gt;meteor build&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After deploying the &lt;a href="https://galaxycloud.app/" rel="noopener noreferrer"&gt;Galaxy app&lt;/a&gt;, the total bundle size stored on the host machine &lt;strong&gt;dropped by about ~42%&lt;/strong&gt;. This improvement applies to all apps, since Meteor core packages now use the new Atmosphere optimization configuration. More gains will come as you update your own Atmosphere packages or community ones to properly skip dev-only packages and dependencies in production builds, leaving your final containers on hosts noticeably smaller.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.galaxycloud.app%2Fwp-content%2Fuploads%2F2026%2F01%2Fatmosphere-optimization.png" class="article-body-image-wrapper"&gt;&lt;img alt="image" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.galaxycloud.app%2Fwp-content%2Fuploads%2F2026%2F01%2Fatmosphere-optimization.png" width="632" height="231"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Modern Setups
&lt;/h3&gt;

&lt;p&gt;Meteor 3.4 introduces Rspack so you can &lt;strong&gt;configure modern setups&lt;/strong&gt; from the community.&lt;/p&gt;

&lt;p&gt;Supported setups include React, React Compiler, Vue, Solid, Svelte and Angular, all using their latest versions. Legacy setups like Coffeescript and Blaze remain supported, keeping older projects compatible.&lt;/p&gt;

&lt;p&gt;With this update, ESM packages are fully supported. Meteor apps can now use modules that rely on ESM behavior. A clear example is the support for React Router v7, a long-standing request from the community.&lt;/p&gt;

&lt;p&gt;Rspack also opens many new options. All Rspack or Webpack features can be configured in Meteor apps, including Workbox for Service Workers and PWA, asset imports and optimizations, and controlling the bundler lifecycle for custom behaviors and improvements.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Else Is New in Meteor 3.4?
&lt;/h2&gt;

&lt;p&gt;Thanks to the commitment of many of our community contributors, we have been able to expand this release with new features and optimizations.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;react-meteor-data&lt;/code&gt; updated to &lt;code&gt;4.0.1&lt;/code&gt;, bringing improvements to suspense hooks and general optimizations. &lt;a href="https://github.com/welkinwong" rel="noopener noreferrer"&gt;@welkinwong&lt;/a&gt;, &lt;a href="https://github.com/malua" rel="noopener noreferrer"&gt;@malua&lt;/a&gt;, &lt;a href="https://github.com/evolross" rel="noopener noreferrer"&gt;@evolross&lt;/a&gt;, and &lt;a href="https://github.com/StorytellerCZ" rel="noopener noreferrer"&gt;@StorytellerCZ&lt;/a&gt; delivered these updates along with other maintenance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Integrated &lt;code&gt;collection-extensions&lt;/code&gt; into core, part of our goal to bring widely used packages across Meteor projects into core for better support and maintenance. Thanks to &lt;a href="https://github.com/harryadel" rel="noopener noreferrer"&gt;@harryadel&lt;/a&gt; for making this possible.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cordova builds are now considered modern instead of legacy when &lt;code&gt;"modern": true&lt;/code&gt; is set in your project’s package.json. &lt;a href="https://github.com/tmeyer24" rel="noopener noreferrer"&gt;@tmeyer24&lt;/a&gt; prepared this change, laying the groundwork for future native updates with CapacitorJS or similar modern tools.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;--raw-logs&lt;/code&gt; is now the default in the Meteor CLI for development. &lt;a href="https://forums.meteor.com/u/paulishca" rel="noopener noreferrer"&gt;@paulishca&lt;/a&gt; suggested &lt;a href="https://forums.meteor.com/t/meteor-development-tiny-tip-that-helped-me-a-lot/64156" rel="noopener noreferrer"&gt;this&lt;/a&gt;, with &lt;a href="https://forums.meteor.com/t/meteor-development-tiny-tip-that-helped-me-a-lot/64156/4" rel="noopener noreferrer"&gt;full consensus&lt;/a&gt; from the community, and &lt;a href="https://github.com/Grubba27" rel="noopener noreferrer"&gt;@Grubba27&lt;/a&gt; provided the update quickly.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;More improvements and fixes were introduced in Meteor 3.4, &lt;a href="https://docs.meteor.com/history.html#v3-4-0-30-01-2026" rel="noopener noreferrer"&gt;see the changelog&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;For more insights into the release, watch the release video:&lt;/p&gt;

&lt;p&gt;📹 &lt;a href="https://www.youtube.com/watch?v=qq_Fx2Y-Ec4" rel="noopener noreferrer"&gt;Meteor 3.4 and the road ahead - Galaxy Expansion Day 5&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;For more about the modern build stack, including Rspack, we joined Meteor Impact and gave a talk that explains its adoption, migration, and expected benefits.&lt;/p&gt;

&lt;p&gt;📹 &lt;a href="https://www.youtube.com/watch?v=LqU1eDbnG4I" rel="noopener noreferrer"&gt;Modern Build Stack in Meteor 3: Empower Your Meteor Apps with Faster, Feature-Rich Bundling&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Big Thanks to our contributors
&lt;/h2&gt;

&lt;p&gt;Reaching the 3.4 milestone would not have been possible without such an active and enthusiastic community. We want to highlight how important these contributions have been for this release.&lt;/p&gt;

&lt;p&gt;Thanks to our core contributors: &lt;a href="https://github.com/nachocodoner" rel="noopener noreferrer"&gt;@nachocodoner&lt;/a&gt;, &lt;a href="https://github.com/italojs" rel="noopener noreferrer"&gt;@italojs&lt;/a&gt;, &lt;a href="https://github.com/Grubba27" rel="noopener noreferrer"&gt;@Grubba27&lt;/a&gt;, &lt;a href="https://github.com/welkinwong" rel="noopener noreferrer"&gt;@welkinwong&lt;/a&gt;, &lt;a href="https://github.com/harryadel" rel="noopener noreferrer"&gt;@harryadel&lt;/a&gt;, &lt;a href="https://github.com/vparpoil" rel="noopener noreferrer"&gt;@vparpoil&lt;/a&gt;, &lt;a href="https://github.com/StorytellerCZ" rel="noopener noreferrer"&gt;@StorytellerCZ&lt;/a&gt;, &lt;a href="https://github.com/turoar23" rel="noopener noreferrer"&gt;@turoar23&lt;/a&gt;, &lt;a href="https://github.com/DipakHalkude" rel="noopener noreferrer"&gt;@DipakHalkude&lt;/a&gt;, &lt;a href="https://github.com/sanki92" rel="noopener noreferrer"&gt;@sanki92&lt;/a&gt;, &lt;a href="https://github.com/evolross" rel="noopener noreferrer"&gt;@evolross&lt;/a&gt;, &lt;a href="https://github.com/malua" rel="noopener noreferrer"&gt;@malua&lt;/a&gt;, &lt;a href="https://github.com/tmeyer24" rel="noopener noreferrer"&gt;@tmeyer24&lt;/a&gt;, &lt;a href="https://github.com/jeetburman" rel="noopener noreferrer"&gt;@jeetburman&lt;/a&gt; and &lt;a href="https://github.com/copleykj" rel="noopener noreferrer"&gt;@copleykj&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks to all community members for the testing and feedback on Meteor 3.4.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s Next for Meteor and Beyond?
&lt;/h2&gt;

&lt;p&gt;For the upcoming releases, we have the following priorities.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Stability and patches.&lt;/strong&gt; Collect feedback and fix issues. Planned &lt;em&gt;Meteor 3.4.x patches&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Change streams.&lt;/strong&gt; Unified MongoDB change notifications. Planned on &lt;em&gt;Meteor 3.5&lt;/em&gt; release./&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Node 24.&lt;/strong&gt; Align with newer Node LTS releases.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Native.&lt;/strong&gt; Move toward a modern native solution beyond Cordova.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For more details on upcoming work and priorities, see the &lt;a href="https://docs.meteor.com/about/roadmap.html" rel="noopener noreferrer"&gt;Meteor roadmap&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Join the Meteor Renaissance!
&lt;/h2&gt;

&lt;p&gt;Meteor 3.4 wraps up the significant bundler changes we had envisioned. From these changes we will keep tweaking the bundler to expand and improve the experience if needed. Still, we’ll continue updating Meteor to revitalize the framework we all love in other areas as well.&lt;/p&gt;

&lt;p&gt;We’re excited about what’s to come and can’t wait for you to join the Meteor renaissance!&lt;/p&gt;

&lt;p&gt;For feedback, questions, or support, &lt;a href="https://forums.meteor.com/" rel="noopener noreferrer"&gt;visit our forums&lt;/a&gt; or &lt;a href="https://discord.com/invite/3w7EKdpghq" rel="noopener noreferrer"&gt;join our Discord channel&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you find any issues, please report them to the &lt;a href="https://github.com/meteor/meteor/issues" rel="noopener noreferrer"&gt;Meteor issues tracker&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Follow us on &lt;a href="https://x.com/meteorjs" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and &lt;a href="https://github.com/meteor" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Stay tuned, and as always, happy coding! ☄️&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>rspack</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Faster Builds in Meteor 3.3: Modern Build Stack with SWC and Bundler Optimizations</title>
      <dc:creator>Nacho Codoñer</dc:creator>
      <pubDate>Tue, 17 Jun 2025 14:41:26 +0000</pubDate>
      <link>https://forem.com/meteor/faster-builds-in-meteor-33-modern-build-stack-with-swc-and-bundler-optimizations-fm2</link>
      <guid>https://forem.com/meteor/faster-builds-in-meteor-33-modern-build-stack-with-swc-and-bundler-optimizations-fm2</guid>
      <description>&lt;p&gt;&lt;strong&gt;Meteor 3.3 slashes build times&lt;/strong&gt; by around &lt;strong&gt;60% on average&lt;/strong&gt;, with some projects building over &lt;strong&gt;3× faster builds&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is the first major update to the Meteor bundler in years, introducing several optimizations. The main change is switching from Babel to SWC for transpiling and minifying to speed up builds. We reviewed and optimized the bundler’s components to improve the development experience.&lt;/p&gt;

&lt;p&gt;On our core team, we’ve already seen these gains after upgrading the &lt;a href="https://galaxycloud.app" rel="noopener noreferrer"&gt;Galaxy Cloud app&lt;/a&gt;, and the cloud team’s development and delivery have become significantly faster. This post details the changes and shows the Galaxy app’s improvement metrics as an example of what to expect with your Meteor 3.3 upgrade.&lt;/p&gt;

&lt;p&gt;This release also includes community contributions for Meteor React packages, improving stability and performance of common hooks and adding support for React 19.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started: A Quick Hands-On
&lt;/h2&gt;

&lt;p&gt;To start using Meteor 3.3.&lt;/p&gt;

&lt;h3&gt;
  
  
  Update Your App
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Update your existing Meteor app to version 3.3&lt;/span&gt;
meteor update &lt;span class="nt"&gt;--release&lt;/span&gt; 3.3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create a New App
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Create a new Meteor app using Meteor 3.3&lt;/span&gt;
meteor create my-app &lt;span class="nt"&gt;--release&lt;/span&gt; 3.3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Add this to your &lt;code&gt;package.json&lt;/code&gt; to enable the new modern build stack:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"meteor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"modern"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;This setting is on by default for new apps.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Highlights
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Modern Build Stack
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Meteor 3.3&lt;/strong&gt; brings a new build stack: SWC for transpiling and minifying, &lt;code&gt;@parcel/watcher&lt;/code&gt; for file watching, and smarter skips for legacy bundles.&lt;/p&gt;

&lt;p&gt;Turn on &lt;code&gt;"modern": true&lt;/code&gt; in your &lt;code&gt;package.json&lt;/code&gt; and see rebuilds and builds fly!&lt;/p&gt;

&lt;p&gt;On average, &lt;strong&gt;build and rebuild times are cut by about 60%&lt;/strong&gt;, roughly a &lt;strong&gt;3× speed-up&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;These results come from &lt;a href="https://galaxycloud.app" rel="noopener noreferrer"&gt;the Galaxy Cloud app&lt;/a&gt;. In the next sections, we break down improvements for development and production experiences. Your app’s numbers may differ, but you can expect similar gains.&lt;/p&gt;

&lt;p&gt;Curious about the gains? Run &lt;code&gt;meteor profile&lt;/code&gt; to compare Meteor 3.2 vs 3.3 on your project and share your results!&lt;/p&gt;

&lt;h4&gt;
  
  
  Development Breakdown
&lt;/h4&gt;

&lt;p&gt;When running &lt;code&gt;meteor run&lt;/code&gt;, timings from &lt;code&gt;meteor profile&lt;/code&gt; in Meteor 3.2 vs 3.3.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu4o1z3huaxbm9w7rhis4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu4o1z3huaxbm9w7rhis4.png" alt=" raw `meteor profile` endraw  in Meteor 3.2 vs 3.3" width="800" height="482"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzehghwbuv2x1u67pwb1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzehghwbuv2x1u67pwb1.png" alt="Summary  raw `meteor profile` endraw  in Meteor 3.2 vs 3.3" width="800" height="309"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On average, these runs show about a &lt;strong&gt;60% reduction in build times&lt;/strong&gt;, corresponding to roughly a 2.7× speed-up, and &lt;strong&gt;exceeding 3×&lt;/strong&gt; in many cases. &lt;/p&gt;

&lt;h4&gt;
  
  
  Production Breakdown
&lt;/h4&gt;

&lt;p&gt;When running &lt;code&gt;meteor build&lt;/code&gt;, timings from &lt;code&gt;meteor profile --build&lt;/code&gt; with and without &lt;code&gt;"modern": true&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxwts6rqw7yt6w0lg3dr5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxwts6rqw7yt6w0lg3dr5.png" alt=" raw `meteor profile - build` endraw  in Meteor modern vs legacy" width="800" height="221"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18l6r902nbu3x9k02fxi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18l6r902nbu3x9k02fxi.png" alt="Summary  raw `meteor profile - build` endraw  in Meteor modern vs legacy" width="800" height="136"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On average, these runs show about a &lt;strong&gt;60% reduction&lt;/strong&gt;, corresponding to roughly a 2.5× speed-up.&lt;/p&gt;

&lt;h4&gt;
  
  
  Build Stack Upgrade
&lt;/h4&gt;

&lt;h5&gt;
  
  
  Transpiler
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;The transpiler converts modern JS syntax in all app code to a cross-browser compatible version.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Meteor profiling showed most build time goes to Babel transpilation (&lt;code&gt;meteor run&lt;/code&gt;/&lt;code&gt;meteor build&lt;/code&gt;). To fix this, we added SWC (in Rust), which speeds up rebuilds in both development and production.&lt;/p&gt;

&lt;p&gt;There are no breaking changes for most apps. If your app uses &lt;a href="https://docs.meteor.com/about/modern-build-stack/transpiler-swc.html#nested-imports" rel="noopener noreferrer"&gt;nested imports&lt;/a&gt; (not dynamic ones), it may fall back to Babel. The same applies if you use Babel plugins that SWC does not support yet. You can find SWC equivalents or disable SWC for those files.&lt;/p&gt;

&lt;p&gt;We also added a doc page with tips for migrating and debugging the new setup.&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://docs.meteor.com/about/modern-build-stack/transpiler-swc.html#transpiler-swc" rel="noopener noreferrer"&gt;&lt;strong&gt;Modern Transpiler: SWC docs&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Minifier
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;The minifier reduces and obfuscates your app’s production bundle for security and efficiency.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Meteor profiling showed Terser spends a lot of time on production builds (&lt;code&gt;meteor build&lt;/code&gt;). To fix this, we added the SWC minifier, which speeds up builds.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/italojs" rel="noopener noreferrer"&gt;@italojs&lt;/a&gt; adapted the minifier from the &lt;a href="https://github.com/zodern" rel="noopener noreferrer"&gt;zodern&lt;/a&gt;/&lt;a href="https://github.com/zodern/minify-js-sourcemaps" rel="noopener noreferrer"&gt;minify-js-sourcemaps&lt;/a&gt; package, cherry-picked it, and integrated it into Meteor core, delivering the performance gains we wanted.&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://docs.meteor.com/about/modern-build-stack/bundler.html#minifier" rel="noopener noreferrer"&gt;&lt;strong&gt;Modern Bundler: Minifier docs&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Web archs
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;Web archs are the builds Meteor generates for modern browsers, legacy browsers, and Cordova.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Skipping &lt;code&gt;web.browser.legacy&lt;/code&gt; and &lt;code&gt;web.cordova&lt;/code&gt; speeds up builds. In development mode, Meteor skips these archs when they aren’t needed.&lt;/p&gt;

&lt;p&gt;Thanks to &lt;a href="https://github.com/9Morello" rel="noopener noreferrer"&gt;@9Morello&lt;/a&gt; for driving this forward!&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://docs.meteor.com/about/modern-build-stack/bundler.html#web-arch" rel="noopener noreferrer"&gt;&lt;strong&gt;Modern Bundler: Web Arch docs&lt;/strong&gt; &lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Watcher
&lt;/h5&gt;

&lt;blockquote&gt;
&lt;p&gt;The watcher listens for changes in your app’s code files and triggers quick recompilations.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Meteor now uses &lt;a href="https://github.com/parcel-bundler/watcher" rel="noopener noreferrer"&gt;&lt;code&gt;@parcel/watcher&lt;/code&gt;&lt;/a&gt;. This improves development mode speed and compatibility by using native, recursive file watching on all OS. It also fixes a long-standing Linux delay where file changes took 5 seconds to register.&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://docs.meteor.com/about/modern-build-stack/dev-server.html#watcher" rel="noopener noreferrer"&gt;&lt;strong&gt;Modern Dev Server: Watcher docs&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Tools: CPU profiling
&lt;/h3&gt;

&lt;p&gt;Observability is crucial for data-driven releases. In our effort to enable this, we’ve improved our profiling tools and made them available to everyone.&lt;/p&gt;

&lt;p&gt;We added environment variables to generate and inspect CPU profiles. In his guide, &lt;a href="https://github.com/italojs" rel="noopener noreferrer"&gt;@italojs&lt;/a&gt; shows &lt;a href="https://dev.to/meteor/enhancing-performance-in-meteorjs-bundler-complete-guide-to-cpu-profiling-4igo"&gt;how to run these profiles and pinpoints Babel as a bottleneck&lt;/a&gt; now replaced by SWC in 3.3.&lt;/p&gt;

&lt;p&gt;We enhanced &lt;a href="https://dev.to/meteor/unlocking-meteor-32-new-profiling-tool-to-track-bundler-performance-and-size-1jc8"&gt;the &lt;code&gt;meteor profile&lt;/code&gt; command introduced in Meteor 3.2&lt;/a&gt;. It now includes a &lt;code&gt;--build&lt;/code&gt; flag to profile the production build and highlight minifier gains. Rebuild reports now emphasize total rebuild times so you can track client and server build improvements.&lt;/p&gt;

&lt;h3&gt;
  
  
  React 19 Support
&lt;/h3&gt;

&lt;p&gt;We updated the &lt;a href="https://github.com/meteor/react-packages" rel="noopener noreferrer"&gt;&lt;code&gt;meteor/react-packages&lt;/code&gt; repo&lt;/a&gt; to restore tests/CI and ensure compatibility with Meteor 3. Contributors also improved the performance of &lt;code&gt;useFind&lt;/code&gt; and &lt;code&gt;useSubscribe&lt;/code&gt;, and added React 19 support.&lt;/p&gt;

&lt;p&gt;Try the new beta of &lt;a href="https://docs.meteor.com/packages/react-meteor-data" rel="noopener noreferrer"&gt;&lt;code&gt;react-meteor-data&lt;/code&gt;&lt;/a&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor add react-meteor-data@4.0.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Thanks to &lt;a href="https://github.com/welkinwong" rel="noopener noreferrer"&gt;@welkinwong&lt;/a&gt;, &lt;a href="https://github.com/Poyoman39" rel="noopener noreferrer"&gt;@Poyoman39&lt;/a&gt;, and &lt;a href="https://github.com/PedroMarianoAlmeida" rel="noopener noreferrer"&gt;@PedroMarianoAlmeida&lt;/a&gt; for their contributions and tests!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Be aware of a breaking change: useFind describes no deps by default &lt;a href="https://github.com/meteor/react-packages/pull/431" rel="noopener noreferrer"&gt;#431&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What Else Is New in Meteor 3.3?
&lt;/h2&gt;

&lt;p&gt;For full details on what’s included in Meteor 3.3, &lt;a href="https://v3-docs.meteor.com/history.html#v3-3-0-2025-06-11" rel="noopener noreferrer"&gt;see the changelog&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;For more insights into the release, &lt;a href="https://www.youtube.com/watch?v=cPIFrU-IBkM" rel="noopener noreferrer"&gt;watch the release video&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;We want to highlight how important community members contributions have been in delivering these changes.&lt;/p&gt;

&lt;p&gt;Thanks to our core contributors: &lt;a href="https://github.com/nachocodoner" rel="noopener noreferrer"&gt;@nachocodoner&lt;/a&gt;, &lt;a href="https://github.com/italojs" rel="noopener noreferrer"&gt;@italojs&lt;/a&gt;, &lt;a href="https://github.com/Grubba27" rel="noopener noreferrer"&gt;@Grubba27&lt;/a&gt;, &lt;a href="https://github.com/zodern" rel="noopener noreferrer"&gt;@zodern&lt;/a&gt;, &lt;a href="https://github.com/9Morello" rel="noopener noreferrer"&gt;@9Morello&lt;/a&gt;, &lt;a href="https://github.com/welkinwong" rel="noopener noreferrer"&gt;@welkinwong&lt;/a&gt;, &lt;a href="https://github.com/Poyoman39" rel="noopener noreferrer"&gt;@Poyoman39&lt;/a&gt;, &lt;a href="https://github.com/PedroMarianoAlmeida" rel="noopener noreferrer"&gt;@PedroMarianoAlmeida&lt;/a&gt;, &lt;a href="https://github.com/harryadel" rel="noopener noreferrer"&gt;@harryadel&lt;/a&gt;, &lt;a href="https://github.com/ericm546" rel="noopener noreferrer"&gt;@ericm546&lt;/a&gt;, &lt;a href="https://github.com/StorytellerCZ" rel="noopener noreferrer"&gt;@StorytellerCZ&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Thanks to community members for testing and feedback on Meteor 3.3: &lt;a href="https://github.com/zodern" rel="noopener noreferrer"&gt;@zodern&lt;/a&gt;, &lt;a href="https://forums.meteor.com/u/minhna" rel="noopener noreferrer"&gt;@minhna&lt;/a&gt;, &lt;a href="https://forums.meteor.com/u/paulishca" rel="noopener noreferrer"&gt;@paulishca&lt;/a&gt;, &lt;a href="https://forums.meteor.com/u/pmogollon" rel="noopener noreferrer"&gt;@pmogollon&lt;/a&gt;, &lt;a href="https://forums.meteor.com/u/ferjep" rel="noopener noreferrer"&gt;@ferjep&lt;/a&gt;, &lt;a href="https://forums.meteor.com/u/wreiske" rel="noopener noreferrer"&gt;@wreiske&lt;/a&gt;, &lt;a href="https://forums.meteor.com/u/schlaegerz" rel="noopener noreferrer"&gt;@schlaegerz&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s Next for Meteor and Beyond?
&lt;/h2&gt;

&lt;p&gt;For the upcoming releases, we have the following priorities.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stability and patches.&lt;/strong&gt; Collect feedback, fix missing support or issues in modern build stack, and ship pending contributions. Planned &lt;em&gt;Meteor 3.3.x patches&lt;/em&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modern bundler.&lt;/strong&gt; Integrate a bundler that meets current standards for performance, tooling, plugin support, and community growth. Planned for &lt;em&gt;Meteor 3.4&lt;/em&gt;. A demonstration is available, please share your feedback on the &lt;a href="https://forums.meteor.com/t/meteor-rspack-integration-a-modern-bundler-meets-meteor-3-4/63696" rel="noopener noreferrer"&gt;Meteor-RSPack integration&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Change streams.&lt;/strong&gt; Provide a unified API for MongoDB change notifications to improve efficiency and consistency. Research is underway, please share your feedback: &lt;a href="https://forums.meteor.com/t/mongodb-change-streams-support-in-meteor-feedback-wanted/63681" rel="noopener noreferrer"&gt;MongoDB Change Streams support in Meteor&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To learn more about upcoming work, &lt;a href="https://docs.meteor.com/about/roadmap" rel="noopener noreferrer"&gt;see the Meteor roadmap&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Join the Meteor Renaissance!
&lt;/h2&gt;

&lt;p&gt;Meteor 3.3 delivers significantly faster build times for your Meteor app development experience. These changes are just the beginning; we’ll continue updating Meteor to revitalize the framework we all love.&lt;/p&gt;

&lt;p&gt;We’re excited about what’s to come and can’t wait for you to join the Meteor renaissance!&lt;/p&gt;

&lt;p&gt;For feedback, questions, or support, &lt;a href="https://forums.meteor.com/" rel="noopener noreferrer"&gt;visit our forums&lt;/a&gt; or &lt;a href="https://discord.com/invite/3w7EKdpghq" rel="noopener noreferrer"&gt;join our Discord channel&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you find any issues, please report them to the &lt;a href="https://github.com/meteor/meteor/issues" rel="noopener noreferrer"&gt;Meteor issues tracker&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Follow us on &lt;a href="https://x.com/meteorjs" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and &lt;a href="https://github.com/meteor" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Stay tuned, and as always, happy coding! ☄️&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>javascript</category>
      <category>performance</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Unlocking Meteor 3.2: New Profiling Tool to Track Bundler Performance and Size</title>
      <dc:creator>Nacho Codoñer</dc:creator>
      <pubDate>Thu, 20 Mar 2025 16:37:38 +0000</pubDate>
      <link>https://forem.com/meteor/unlocking-meteor-32-new-profiling-tool-to-track-bundler-performance-and-size-1jc8</link>
      <guid>https://forem.com/meteor/unlocking-meteor-32-new-profiling-tool-to-track-bundler-performance-and-size-1jc8</guid>
      <description>&lt;p&gt;Meteor continues to evolve. After focusing on improving runtime performance, the latest update, Meteor 3.2, pivots toward bundler performance and optimizing the developer experience.&lt;/p&gt;

&lt;p&gt;With Meteor 3.2, we introduced profiling. We revisited the old implementation to restore functionality and added &lt;code&gt;meteor profile&lt;/code&gt; for automatic analysis of the app build process. This tool helps you track critical data like build phase timings and bundle sizes, which are key for optimizing performance and reducing build times.&lt;/p&gt;

&lt;p&gt;This marks the beginning of exciting improvements to Meteor’s bundler, as we integrate modern solutions while maintaining Meteor’s performance and developer-friendly experience. Whether you’re working on a private project or contributing to the Meteor core, the new &lt;code&gt;meteor profile&lt;/code&gt; tool is here to help you monitor and optimize the app’s build process.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started: A Quick Hands-On
&lt;/h2&gt;

&lt;p&gt;Ready to dive in? To start using the new profiling tool, ensure your app is on Meteor 3.2 (or create a new one).&lt;/p&gt;

&lt;h3&gt;
  
  
  Update Your App
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Update your existing Meteor app to version 3.2&lt;/span&gt;
meteor update &lt;span class="nt"&gt;--release&lt;/span&gt; 3.2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create a New App
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Create a new Meteor app using Meteor 3.2&lt;/span&gt;
meteor create meteorite-app &lt;span class="nt"&gt;--release&lt;/span&gt; 3.2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Profiling Your App’s Development Process
&lt;/h3&gt;

&lt;p&gt;The key to Meteor 3.2's new profiling feature is the &lt;code&gt;meteor profile&lt;/code&gt; command. Here’s how you can run it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor profile &lt;span class="o"&gt;[&lt;/span&gt;&amp;lt;meteor-run-options&amp;gt;...]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command tracks the time taken across various phases of running your Meteor app, capturing insights that will help you fine-tune performance.&lt;/p&gt;

&lt;h4&gt;
  
  
  Here’s a Breakdown of the Profiling Phases:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cold Start&lt;/strong&gt;: This is the first run of your app, when no data is cached in the &lt;code&gt;.meteor/local&lt;/code&gt; folder. (Use &lt;code&gt;meteor reset&lt;/code&gt; to simulate this phase.)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cache Start&lt;/strong&gt;: The second run, where the app leverages cached data, improving startup speed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rebuild Client&lt;/strong&gt;: When you change client-side code, this phase measures the time required to rebuild the client-side app.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rebuild Server&lt;/strong&gt;: Similar to the client rebuild, but this tracks the time to rebuild the server-side code.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With these key phases, you can easily track how your app’s performance changes as you make updates.&lt;/p&gt;

&lt;p&gt;Here’s an example output from the small-sized Meteor React example, to see what it looks like in action:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsqrtk0t6fh3l2kmfzzsj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsqrtk0t6fh3l2kmfzzsj.png" alt="profiling-dev" width="474" height="866"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A detailed log is generated during profiling, which you’ll find in the &lt;code&gt;logs&lt;/code&gt; folder. This log contains full &lt;code&gt;meteor run&lt;/code&gt; and &lt;code&gt;METEOR_PROFILE&lt;/code&gt; output for each phase. Feel free to adjust the &lt;a href="https://docs.meteor.com/cli/environment-variables#meteor-profile" rel="noopener noreferrer"&gt;&lt;code&gt;METEOR_PROFILE&lt;/code&gt; environment variable&lt;/a&gt; to suit your needs. For more options, run &lt;code&gt;meteor profile --help&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Profiling Your App’s Size
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;meteor profile&lt;/code&gt; command can also help you track bundle sizes. Run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor profile --size-only [&amp;lt;meteor-run-options&amp;gt;...]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command provides a breakdown of the package sizes across different bundlers, such as Meteor Modern, Legacy, and Cordova, helping you identify optimization opportunities. You’ll see the results in a neat table format, making it easy to spot potential issues.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9i8non3vz3w01bp11jb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9i8non3vz3w01bp11jb.png" alt="profiling-size" width="800" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to include bundle size analysis as part of a full profiling session, simply add the &lt;code&gt;--size&lt;/code&gt; option.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tip: Exclude Architectures for a Faster Dev Experience
&lt;/h2&gt;

&lt;p&gt;Here’s a quick tip to improve your development speed. If you’re not targeting legacy browsers or Cordova, you can exclude those architectures to speed up builds.&lt;/p&gt;

&lt;p&gt;For example, compare the default behavior with excluding certain architectures:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# 1) `meteor run`&lt;/span&gt;
meteor profile

&lt;span class="c"&gt;# 2) `meteor run` excluding certain archs&lt;/span&gt;
meteor profile &lt;span class="nt"&gt;--exclude-archs&lt;/span&gt; web.browser.legacy,web.cordova
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The output comparison for the small-sized Meteor React example is shown below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flic5mknfgo886ke0u6py.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flic5mknfgo886ke0u6py.png" alt="default-vs-exclude-archs" width="800" height="621"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The impact will be much greater on large, full-featured apps. By excluding legacy and Cordova builds, you can see reduction in build times, especially when restarting Meteor apps ("Build App" stage in profile). These architectures are useful for testing older browsers or building for Cordova, but they’re often unnecessary during regular development, especially if you’re targeting modern browsers or platforms.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s Next for Meteor and Beyond?
&lt;/h2&gt;

&lt;p&gt;Meteor 3.2 sets the stage for future improvements. The new &lt;code&gt;meteor profile&lt;/code&gt; command helps ensure performance gains or size reductions without regressions. Automated profiling replaces subjective assessments with data-driven releases, now available to all Meteor developers.&lt;/p&gt;

&lt;p&gt;Upcoming improvements to the Meteor bundler include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/meteor/meteor/pull/13657" rel="noopener noreferrer"&gt;&lt;strong&gt;SWC Support&lt;/strong&gt;&lt;/a&gt;: We’re working on integrating SWC for enhanced compilation and analysis capabilities.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/meteor/meteor/pull/13650" rel="noopener noreferrer"&gt;&lt;strong&gt;CPU Profiling and Memory Snapshots&lt;/strong&gt;&lt;/a&gt;: This will allow for deeper performance tuning across all phases of app building.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modern Bundler Integration&lt;/strong&gt;: Expect improved bundler features and faster speeds with the adoption of modern bundlers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Default Modern Architecture&lt;/strong&gt;: Soon, Meteor will build only for modern architecture by default, skipping legacy and Cordova builds unless you specify otherwise.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These improvements will help keep Meteor aligned with current standards on the bundler side while improving performance and developer experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Else Is New in Meteor 3.2?
&lt;/h2&gt;

&lt;p&gt;Meteor 3.2 brings more than just new profiling tools. Want to explore further?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://forums.meteor.com/t/meteor-js-v3-2-is-out/63368" rel="noopener noreferrer"&gt;Join the Conversation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=YufS7h6_joM" rel="noopener noreferrer"&gt;Watch the Discussion&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Join the Meteor Renaissance!
&lt;/h2&gt;

&lt;p&gt;Meteor 3.2 brings a new era of profiling tools, allowing developers to monitor app performance and bundle size like never before. With these updates, you’ll have the insights needed to optimize your app’s performance with data-driven decisions.&lt;/p&gt;

&lt;p&gt;We’re excited about what’s to come and can’t wait for you to join the Meteor renaissance!&lt;/p&gt;

&lt;p&gt;For feedback, questions, or support, &lt;a href="https://forums.meteor.com/" rel="noopener noreferrer"&gt;visit our forums&lt;/a&gt; or &lt;a href="https://discord.com/invite/3w7EKdpghq" rel="noopener noreferrer"&gt;join our Discord channel&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Follow us on &lt;a href="https://x.com/meteorjs" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and &lt;a href="https://github.com/meteor" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Stay tuned, and as always, happy coding! ☄️&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>javascript</category>
      <category>performance</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Getting Started with Meteor 3: First Steps to Building Your React App</title>
      <dc:creator>Nacho Codoñer</dc:creator>
      <pubDate>Tue, 06 Aug 2024 15:15:11 +0000</pubDate>
      <link>https://forem.com/nachocodoner/getting-started-with-meteor-3-first-steps-to-building-your-app-2gin</link>
      <guid>https://forem.com/nachocodoner/getting-started-with-meteor-3-first-steps-to-building-your-app-2gin</guid>
      <description>&lt;p&gt;&lt;a href="https://dev.to/meteor/meteor-3-is-officially-here-3gml"&gt;Meteor.js 3 is officially here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Meteor simplifies the development of multiplatform applications by offering a stack focused on speeding up delivery. It integrates with the modern JavaScript ecosystem and provides a robust tool for implementing realtime capabilities in your app.&lt;/p&gt;

&lt;p&gt;Recently, we &lt;a href="https://www.youtube.com/watch?v=81DyMI8p4XY" rel="noopener noreferrer"&gt;built a real-time chat from scratch using Meteor.js&lt;/a&gt; to teach to newcomers how beneficial and simple it is to start a project with Meteor.&lt;/p&gt;

&lt;p&gt;In this post, you'll learn how to set up your first project. We'll also provide over next weeks more content to help you understand this long-standing tool that has helped many developers and companies succeed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;p&gt;Meteor works with Linux, Mac, and Windows.&lt;/p&gt;

&lt;p&gt;To install Meteor, ensure you have at least Node 20 installed on your computer. Then run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx meteor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To verify the installation, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Choose your template
&lt;/h2&gt;

&lt;p&gt;Meteor offers basic templates pre-configured to work with various libraries.&lt;/p&gt;

&lt;p&gt;As a UI-agnostic tool, it allows you to select your preferred UI library and create your first app template with it. As the default example, React is used. To create a new app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor create my-app &lt;span class="nt"&gt;--react&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Explore more options with &lt;code&gt;meteor create --help&lt;/code&gt;, such as &lt;code&gt;--vue&lt;/code&gt;, &lt;code&gt;--svelte&lt;/code&gt;, &lt;code&gt;--apollo&lt;/code&gt;, &lt;code&gt;--typescript&lt;/code&gt;, &lt;code&gt;--blaze&lt;/code&gt;, &lt;code&gt;--tailwind&lt;/code&gt;, &lt;code&gt;--solid&lt;/code&gt;, and others.&lt;/p&gt;

&lt;h3&gt;
  
  
  Project structure
&lt;/h3&gt;

&lt;p&gt;Any Meteor project can be configured as you prefer. By default, the skeleton you created follows this structure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;./client&lt;/code&gt; Contains HTML, CSS, and JS entry points for your client app.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;./imports&lt;/code&gt; Contains shared modules, including client-side UI, server-side API endpoints, and shared code like collections.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;./server&lt;/code&gt; Contains the JS entry point.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;./tests&lt;/code&gt; Contains integration test definitions for your server app.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Remember, you can restructure as needed. You can also set the entry points for your client, server and test apps within your &lt;code&gt;package.json&lt;/code&gt; file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"meteor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mainModule"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"client"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"client/main.jsx"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"server"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"server/main.js"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"testModule"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tests/main.js"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Run your app
&lt;/h2&gt;

&lt;p&gt;To run your app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;my-app
meteor run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Congrats! Your app will be running at &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Explore more options with &lt;code&gt;meteor run --help&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Data management
&lt;/h2&gt;

&lt;p&gt;To manage your application data, Meteor uses its own protocol called DDP, which also enables its standout real-time capabilities.&lt;/p&gt;

&lt;h3&gt;
  
  
  Query data
&lt;/h3&gt;

&lt;p&gt;In Meteor, a publication is a server-side function that defines which data to send to the client, managing what data clients can access and subscribe to, and enabling real-time updates.&lt;/p&gt;

&lt;p&gt;The skeleton example can be expanded by adding a new publication that filters the links data, displaying only those within the &lt;code&gt;meteor.com&lt;/code&gt; domain.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// imports/api/linksPublish.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Meteor&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;meteor/meteor&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;LinksCollection&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./links&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;Meteor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;publish&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;links.meteor&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;LinksCollection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;$regex&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/meteor.com/&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To import this publication to the app server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// server/main.js&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/imports/api/linksPublish&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To access the new subscription, update the code in &lt;code&gt;./imports/ui/Info.jsx&lt;/code&gt; to reflect your new publication.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//imports/ui/Info.jsx&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isLoading&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useSubscribe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;links.meteor&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Mutate data
&lt;/h3&gt;

&lt;p&gt;In Meteor, a method is a function that you define to be called from both the client and server. It handles tasks like database updates and ensures consistent code execution across both environments. Additionally, it can be used to publish data.&lt;/p&gt;

&lt;p&gt;To expand the app functionality and enable users to add and remove links, define methods.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// imports/api/linksMethods.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Meteor&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;meteor/meteor&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;check&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;meteor/check&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;LinksCollection&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./links&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;Meteor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;methods&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;links.insert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;check&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;LinksCollection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;insertAsync&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;createdAt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;

  &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;links.remove&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;linkId&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;check&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;linkId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;LinksCollection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;removeAsync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;linkId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To enable these methods in the app, import them to the app server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// server/main.js&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/imports/api/linksMethods&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Import it into the client endpoint to enable Optimistic UI. This will display data directly in the client app without waiting for the server's response and will revert if needed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// client/main.js&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/imports/api/linksMethods&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To add this new functionality to your skeleton React app, modify &lt;code&gt;imports/ui/Info.jsx&lt;/code&gt; to integrate the new management options into the Info component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//imports/ui/Info.jsx&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Info&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setUrl&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleAddLink&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="nx"&gt;Meteor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;links.insert&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
              &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;reason&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
              &lt;span class="nf"&gt;setUrl&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
          &lt;span class="p"&gt;});&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleRemoveLink&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;linkId&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;Meteor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;links.remove&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;linkId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;reason&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
          &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Learn&lt;/span&gt; &lt;span class="nx"&gt;Meteor&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h2&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="nx"&gt;onSubmit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleAddLink&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;
            &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
            &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setUrl&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
            &lt;span class="nx"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Enter link URL&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Add&lt;/span&gt; &lt;span class="nx"&gt;Link&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/form&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ul&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;links&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;li&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;_id&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;_blank&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;rel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;noopener noreferrer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
              &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;              &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;handleRemoveLink&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;_id&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Remove&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/li&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="p"&gt;))}&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ul&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Realtime experience
&lt;/h3&gt;

&lt;p&gt;This example illustrates how Meteor excels with the DDP protocol and MongoDB. When a new domain with meteor.com is added, it automatically publishes only these links to you and all connected users of your app. This feature is particularly useful for apps that require real-time interactions.&lt;/p&gt;

&lt;p&gt;The next picture shows that the newly configured publication will display only meteor.com domains.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6kk154ghj42rt710w9m.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6kk154ghj42rt710w9m.gif" alt="Only links to meteor.com domain" width="480" height="308"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Package management
&lt;/h2&gt;

&lt;p&gt;Meteor lets you easily add your favorite packages to your project, providing flexibility to enhance your app with essential tools and libraries from both Meteor’s ecosystem and npm.&lt;/p&gt;

&lt;p&gt;To add your favorite npm packages, install them using npm or, preferably, &lt;code&gt;meteor npm&lt;/code&gt; to ensure compatibility with Meteor's expected version.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor npm install lodash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Meteor offers the extensive opportunities available within the Node ecosystem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploy your app
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.meteor.com/cloud" rel="noopener noreferrer"&gt;Galaxy&lt;/a&gt; is the best place to host your Meteor apps. It offers scalable, secure, and managed hosting with built-in features like automatic updates, monitoring, and performance optimization. It includes a free tier for getting started.&lt;/p&gt;

&lt;p&gt;To deploy your app for free.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor deploy myapp.meteorapp.com &lt;span class="nt"&gt;--free&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Start with Meteor 3 is easy by following the steps provided. Experiment with the basics as well. Note that Meteor encompasses more than covered here. Content is being prepared to explore all possibilities Meteor 3 offers for your projects, specifically with the new renewed Meteor 3.0.&lt;/p&gt;

&lt;p&gt;Among these possibilities are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Easy import of packages, user role management, and social authentication login&lt;/li&gt;
&lt;li&gt;Express for defining REST endpoints with HTTP&lt;/li&gt;
&lt;li&gt;Native apps based on your existing web implementation&lt;/li&gt;
&lt;li&gt;GraphQL for extended data management options&lt;/li&gt;
&lt;li&gt;Atmosphere and third-party packages that add essential features to your app&lt;/li&gt;
&lt;li&gt;and more&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  More resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://v3-docs.meteor.com" rel="noopener noreferrer"&gt;Meteor 3 docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=81DyMI8p4XY" rel="noopener noreferrer"&gt;Building a real-time chat from scratch with Meteor.js 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Join our community
&lt;/h2&gt;

&lt;p&gt;Join our community to ask questions about Meteor 3, report issues, share suggestions, and contribute to this popular open-source project.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://forums.meteor.com/" rel="noopener noreferrer"&gt;Meteor Forums&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://discord.gg/hZkTCaVjmT" rel="noopener noreferrer"&gt;Meteor Lounge - Our Discord Channel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/meteor/meteor" rel="noopener noreferrer"&gt;Meteor GitHub&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>meteor</category>
      <category>javascript</category>
      <category>webapp</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
