Meteor.js 3 is officially here!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 real-time capabilities in your app.Recently, we built a real-time chat from scratch using Meteor.js to teach newcomers how beneficial and simple it is to start a project with Meteor.This post teaches you how to set up your first project. Over the following weeks, we'll provide more content to help you understand this long-standing tool that has helped many developers and companies succeed.InstallationMeteor works with Linux, Mac, and Windows.To install Meteor, ensure you have at least Node 20 installed on your computer. Then run:npx meteorTo verify the installation, use:meteor --versionChoose your templateMeteor offers basic templates that are pre-configured to work with various libraries.As a UI-agnostic tool, you can select your preferred UI library and create your first app template. As the default example, React is used. To create a new app:meteor create my-app --reactExplore more options with meteor create — help, such as — vue, --svelte, — apollo, — typescript, — blaze, — tailwind, — solid, and others.Project structureAny Meteor project can be configured as you prefer. By default, the skeleton you created follows this structure:
- ./client Contains HTML, CSS, and JS entry points for your client app.
- ./imports Contains shared modules, including client-side UI, server-side API endpoints, and shared code like collections.
- ./server Contains the JS entry point.
- ./tests Contains integration test definitions for your server app.
Remember, you can restructure as needed. Within your package.json file, you can also set the entry points for your client, server, and test apps."meteor": { "mainModule": { "client": "client/main.jsx", "server": "server/main.js" }, "testModule": "tests/main.js"}Run your appTo run your app:cd my-appmeteor runCongrats! Your app will be running at http://localhost:3000.Explore more options with meteor run -help.Data managementMeteor uses its own protocol, DDP, to manage application data, which also enables its outstanding real-time capabilities.Query dataIn Meteor, a publication is a server-side function that defines which data to send to the client, manages what data clients can access and subscribe to, and enables real-time updates.The skeleton example can be expanded by adding a new publication that filters the links data, displaying only those within the `meteor.com` domain.// imports/api/linksPublish.jsimport { Meteor } from 'meteor/meteor';import { LinksCollection } from './links';Meteor.publish('links.meteor', function() { return LinksCollection.find({ url: { $regex: /meteor.com/ } });});```To import this publication to the app server:``` javascript// server/main.js// ...import '/imports/api/linksPublish';// ...To import this publication to the app server:// server/main.js// ...import '/imports/api/linksPublish';// ...To access the new subscription, update the code in `./imports/ui/Info.jsx` to reflect your latest publication.//imports/ui/Info.jsx// ...const isLoading = useSubscribe('links.meteor');// ...Mutate dataIn Meteor, a method is a function 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.Define methods to expand the app functionality and enable users to add and remove links.// imports/api/linksMethods.jsimport { Meteor } from 'meteor/meteor';import { check } from 'meteor/check';import { LinksCollection } from './links';Meteor.methods({ async 'links.insert'(url) { check(url, String); await LinksCollection.insertAsync({ url, createdAt: new Date(), }); }, async 'links.remove'(linkId) { check(linkId, String); await LinksCollection.removeAsync(linkId); },});To enable these methods in the app, import them to the app server:// server/main.js// ...import '/imports/api/linksMethods';// ...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 revert if needed.// client/main.js// ...import '/imports/api/linksMethods';// ...To add this new functionality to your skeleton React app, modify imports/ui/Info.jsx to integrate the new management options into the Info component.//imports/ui/Info.jsxexport const Info = () => { // ... const [url, setUrl] = useState(''); const handleAddLink = (event) => { event.preventDefault(); if (url) { Meteor.call('links.insert', url, (error) => { if (error) { alert(error.reason); } else { setUrl(''); } }); } }; const handleRemoveLink = (linkId) => { Meteor.call('links.remove', linkId, (error) => { if (error) { alert(error.reason); } }); }; // ... return ( Learn Meteor! type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="Enter link URL" /> Add Link
- {links.map(link => (
- {link.url} handleRemoveLink(link._id)}>Remove
))}
);}Realtime experienceThis 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 handy for apps that require real-time interactions.The gif below shows that the newly configured publication will display only meteor.com domains:Package managementMeteor lets you easily add your favorite packages to your project, providing flexibility to enhance your app with essential tools and libraries from Meteor’s ecosystem and npm.To add your favorite npm packages, install them using npm or, preferably, meteor npm to ensure compatibility with Meteor’s expected version.meteor npm install lodashMeteor offers extensive opportunities within the node ecosystem.Deploy your appGalaxy 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.To deploy your app for free.meteor deploy myapp.meteorapp.com — freeConclusionI hope this guide helped you get started with Meteor! This is just the beginning of our content creation efforts. There is much to cover in the following months, and the framework offers many possibilities.Among these possibilities are:
- Easy import of packages, user role management, and social authentication login
- Express for defining REST endpoints with HTTP
- Native apps based on your existing web implementation
- GraphQL for extended data management options
- Atmosphere and third-party packages that add essential features to your app
More resources- Meteor 3 docs- Building a real-time chat from scratch with Meteor.js 3Join our communityJoin our community to ask questions about Meteor 3, report issues, share suggestions, and contribute to this popular open-source project.- Meteor Forums- Meteor Lounge — Our Discord Channel- Meteor GitHubGetting Started with Meteor 3: First Steps to Building Your React App was originally published in Meteor Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.