How to create an App using Meteor ?
Last Updated :
23 Jul, 2024
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/'
});
insertLink({
title: 'Data Structures Tutorial',
url:
'https://www.geeksforgeeks.org/data-structures/'
});
insertLink({
title: 'Algorithmic Tutorial',
url:
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/'
});
});
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.
Similar Reads
How to Create ToDo App using React Native ?
In this article, we'll see how to create a ToDo app using React Native. An ideal illustration of a basic application that can be developed with React Native is a ToDo app. This app enables users to generate, modify, and remove tasks, assisting them in maintaining organization and concentration.React
4 min read
How to Create a Desktop App Using JavaScript?
Building a JavaScript desktop application is possible using various frameworks and technologies. One popular approach is to use Electron, which is an open-source framework developed by GitHub. Electron allows you to build cross-platform desktop applications using web technologies such as HTML, CSS,
2 min read
Create Newsletter app using MailChimp and NodeJS
Nowadays, every business uses email marketing to promote their business and send regular updates to their users via email. Maybe, you are also subscribers of some websites such as GeeksforGeeks and many more. It's simple if you subscribe, you will get regular email from their side, and if you unsubs
5 min read
How to Add Express to React App using Gulp ?
When building a web application with ReactJS, you may need to include a backend server for handling server-side logic and API requests. Express is a popular choice for creating backend servers in Node.js. In this tutorial, we'll explore how to integrate Express with a React app using Gulp as the bui
3 min read
How to Create a New Next JS 13+ App?
Creating a new Next.js 13+ application is a straightforward process that sets up a modern React-based framework with built-in features like server-side rendering, static site generation, and API routes. Next JS streamlines and automates the setup of essential React tooling, handling tasks such as bu
2 min read
How to Create a Simple Server Using ExpressJS?
The server plays an important role in the development of the web application. It helps in managing API requests and communication between the client and the backend. ExpressJS is the fast and famous framework of the Node.Js which is used for creating the server.In this article, we will create a simp
3 min read
Create a Community Marketplace App using React
In this article, we will explore the process of developing a Community Marketplace application using React, that offers a seamless and user-friendly experience for users. The Community Marketplace App is a platform where users can buy and sell goods. It provides a convenient way for community member
8 min read
Create a Weather app using React and Tailwind
React JS is a very famous library for front-end development. In this article, we will walk through the process of building a weather app using React, a popular JavaScript library for building user interfaces(UI). Here we also use Tailwind CSS, a utility-first CSS framework. Here we also use a weathe
5 min read
How to create an application in ember.js ?
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are based on Model-View-Controller (MVC). Ember is designed for reducing development time and increasing productivity, it is one of the fastest-growing front-end application frameworks being
2 min read
How to Deploy React App using Azure Static Web Apps ?
Microsoft Azure is a public cloud computing platform. It provides a lot of cloud services to access, manage, and deploy applications. Where as Azure Static Web App is one of the services of Microsoft Azure. It automatically builds and deploys full-stack web apps from the code repository to azure.In
3 min read