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 realtime capabilities in your app.
Recently, we built a real-time chat from scratch using Meteor.js to teach to newcomers how beneficial and simple it is to start a project with Meteor.
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.
Installation
Meteor works with Linux, Mac, and Windows.
To install Meteor, ensure you have at least Node 20 installed on your computer. Then run:
npx meteor
To verify the installation, use:
meteor --version
Choose your template
Meteor offers basic templates pre-configured to work with various libraries.
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:
meteor create my-app --react
Explore more options with meteor create --help, such as --vue, --svelte, --apollo, --typescript, --blaze, --tailwind, --solid, and others.
Project structure
Any Meteor project can be configured as you prefer. By default, the skeleton you created follows this structure:
-
./clientContains HTML, CSS, and JS entry points for your client app. -
./importsContains shared modules, including client-side UI, server-side API endpoints, and shared code like collections. -
./serverContains the JS entry point. -
./testsContains integration test definitions for your server app.
Remember, you can restructure as needed. You can also set the entry points for your client, server and test apps within your package.json file.
"meteor": {
"mainModule": {
"client": "client/main.jsx",
"server": "server/main.js"
},
"testModule": "tests/main.js"
}
Run your app
To run your app:
cd my-app
meteor run
Congrats! Your app will be running at http://localhost:3000.
Explore more options with meteor run --help
Data management
To manage your application data, Meteor uses its own protocol called DDP, which also enables its standout real-time capabilities.
Query data
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.
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.js
import { 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:
// server/main.js
// ...
import '/imports/api/linksPublish';
// ...
To access the new subscription, update the code in ./imports/ui/Info.jsx to reflect your new publication.
//imports/ui/Info.jsx
// ...
const isLoading = useSubscribe('links.meteor');
// ...
Mutate data
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.
To expand the app functionality and enable users to add and remove links, define methods.
// imports/api/linksMethods.js
import { 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 will 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.jsx
export 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 (
<div>
<h2>Learn Meteor!</h2>
<form onSubmit={handleAddLink}>
<input
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="Enter link URL"
/>
<button type="submit">Add Link</button>
</form>
<ul>
{links.map(link => (
<li key={link._id}>
<a href={link.url} target="_blank" rel="noopener noreferrer">
{link.url}
</a>
<button onClick={() => handleRemoveLink(link._id)}>Remove</button>
</li>
))}
</ul>
</div>
);
}
Realtime experience
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.
The next picture shows that the newly configured publication will display only meteor.com domains.
Package management
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.
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 lodash
Meteor offers the extensive opportunities available within the Node ecosystem.
Deploy your app
Galaxy 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 --free
Conclusion
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.
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
- and more
More resources
Join our community
Join our community to ask questions about Meteor 3, report issues, share suggestions, and contribute to this popular open-source project.
Top comments (0)