How to create an App using Meteor ? - GeeksforGeeks

07 Oct, 2021
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. 
JavaScript-Questions
Meteor
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to filter object array based on attributes?
How to get selected value in dropdown list using JavaScript ?
How to remove duplicate elements from JavaScript Array ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?