Nacho Codoñer

Posted on Aug 6

Getting Started with Meteor 3: First Steps to Building Your React App

#meteor #javascript #webapp #beginners

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:

./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. 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.

DEV Community