How to create an App using Meteor ?

It is a full-stack javascript platform for developing web and mobile applications. The meteor uses a set of technologies to achieve our goal along with Node.js and JavaScript. It expects the least development efforts and provides the best performance. In this article, we are going to see how we can initiate a project on the meteor.

Below is a step-by-step implementation.

Step 1: Installation

• Linux and OS: The cURL command is used to interact with the server by specifying its location and here we are receiving our code to install meteor from the resource provided by the meteor and the sh command is installing that.

curl https://install.meteor.com/ | sh

• Windows: In windows, we will need the node package manager to install meteor.

npm install -g meteor 

Step 2:  Creating a project with the meteor is so simple, just write the meteor create command in your terminal along with some configurations.

meteor create app-name --option

• Configurations:
  app-name – This will be our application name.
  option – The name of the JavaScript library/framework which is supported by meteor i.e. Vue, Svelte, React, Blaze, and Angular. Also, meteor provides few more options.

For example, here we are creating a react based application with  `meteor create hello-world –react`

Project Structure: On successful initialization, this would be our folder structure. 

Step 3: Run Application. Write the command below to run your meteor app, after the run meteor keeps all changes of files in sync.

meteor run 

Something like this will be shown on your terminal.

Output: When we open http://localhost:3000 to view our application in the browser, something like the screenshot given below will appear. This is the default frontend view of a meteor application.

With this our meteor project is ready and we can start writing our database models, server logic, and the frontend design inside it.

Example 1: In this example, we are going to replace the default frontend content of the meteor. Inside the imports/ui directory there exists an App.jsx file and we can write our react code inside that.

Filename: App.jsx

Javascript

import React from 'react';

export const App = () => (
  <div>
    <h1>Hello, GFG Learner!</h1>
   </div>
);

Output:

Example 2: This is the sample of how to fetch data from the database and render it on the frontend with the help of Meteor. First of all, we have to create the mongo collection, here we have created a collection named gfglinks and exported it so that it can be used in other files.

Filename: links.js

Javascript

import { Mongo } from 'meteor/mongo';

export const LinksCollection = new Mongo.Collection('gfglinks');

Explanation: After the collection being created we can insert data into it. At the backend, we are inserting some data into the collection. Meteor.startup executes some given functionality when the server starts. Notice we are importing LinksCollection which we have exported from the links.js file. The insert method inserts the give data into the database.

Filename: main.js

Javascript

import { Meteor } from 'meteor/meteor';
import { LinksCollection } from '/imports/api/links';

function insertLink({ title, url }) {
  LinksCollection.insert({title, url});
}

Meteor.startup(() => {
    insertLink({
      title: 'Competitive Programming Guide',
      url:
'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm'
    });

    insertLink({
      title: 'Data Structures Tutorial',
      url:
'https://www.geeksforgeeks.org/data-structures/?ref=shm'
    });

    insertLink({
      title: 'Algorithmic Tutorial',
      url:
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm'
    });
});

Explanation: When data is in our database, we can fetch it to the frontend. Here we are rendering all data that is inserted into the database in the last step. The useTracker is a hook in meteor which takes care of all reactivity of components. LinkCollection is that one which we have exported from the link.js file, the find method finds all data inside it.

Later we are simply rendering some li tags with the help of the map function.

Filename: App.jsx

Javascript

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { LinksCollection } from '../api/links';

const App = () => {
  const links = useTracker(() => {
    return LinksCollection.find().fetch();
  });

  return (
    <div>
      <h1>Hello, GeeksforGeeks Learner</h1>H
      <h2>Explore the Articles provided by GFG</h2>
      <ul>{links.map(
        link => <li key={link._id}>
          {link.title} <a href={link.url}
            target="_blank"> Click Here!
           </a>
        </li>
      )}</ul>
    </div>
  );
};
export default App;

Output: After all this process our application is ready to run, with meteor run something like the GIF given below will be shown up.