Meteor is a full-stack JavaScript framework for web and mobile applications. It has been around since 2011 and has gained a strong reputation among Meteor developers for being an ideal, easy-to-use solution for rapid prototyping.

However, lately, developers have realized Meteor isn’t just for prototyping anymore: it’s ready to be used for commercial development.

With the arsenal of packages that it provides, the solid mongoDB/node.js foundation that it relies on, and the coding flexibility that it offers; Meteor makes it easy to build robust, secure real-time web applications, handling everything from the browser app to the server or database.

This Meteor tutorial will walk you through making a basic web application in Meteor – a simple catalog that lets the users login and manage a list of books.

Meteor Versions

1.0: This was the first stable release of Meteor, which came out in 2014. It included a package system, real-time updates, and built-in support for MongoDB.

1.2: Released in 2015, this version introduced ES2015 support, faster build times, and improvements to the package system.

1.3: This version, released in 2016, added support for Angular and React, as well as improvements to the build system and package management.

1.4: Released in 2016, this version focused on stability and bug fixes, as well as adding support for Node.js 4.

1.5: This version, released in 2017, introduced support for MongoDB 3.4 and Node.js 8, as well as improvements to the Cordova integration for mobile apps.

1.6: Released in 2017, this version added support for Node.js 8.4 and introduced dynamic imports for better code splitting.

1.7: This version, released in 2018, included improvements to the package system, as well as better error reporting and support for TypeScript.

1.8: Released in 2019, this version added support for Node.js 8.12 and introduced the ability to import npm packages directly.

1.9: This version, released in 2020, added support for Node.js 12, improved the build system, and added new features for package authors.

1.10: Released in 2020, this version added support for Node.js 14 and included improvements to the build system, package management, and testing.

Meteor Tutorial

Sure, here’s a tutorial on building a simple Meteor app from scratch:

1. Install Meteor: First, make sure you have Meteor installed on your system. You can install it by visiting the official website and following the instructions for your operating system.

2. Create a new Meteor project: Open up your terminal or command prompt, navigate to the directory where you want to create your project, and enter the following command:

meteor create myapp

This will create a new Meteor project in a directory called “myapp”.

3. Start the Meteor app: Navigate into your project directory and enter the following command to start your Meteor app:

cd myapp
meteor

4. Create a new template: In Meteor, templates are used to define the structure and layout of the app’s user interface. To create a new template, create a new file in the client directory called main.html, and add the following code:


Hello, world!


This will create a template called “main” that simply displays a heading.

5. Render the template: To display the “main” template in the app, create a new file in the client directory called main.js, and add the following code:

import { Template } from 'meteor/templating';
import './main.html';

Template.main.onRendered(function() {
console.log('Template rendered!');
});

This code imports the Template object from the meteor/templating package, imports the main.html template, and defines a rendered callback that logs a message to the console when the “main” template is rendered.

6. Add a stylesheet: To style the “main” template, create a new file in the client directory called main.css, and add the following code:

body {
background-color: #eee;
}

h1 {
color: #333;
font-size: 4em;
margin-top: 100px;
text-align: center;
}

This code defines some simple styles for the body and h1 elements.

7. Load the stylesheet: To load the main.css stylesheet, add the following line to the main.html file, just below the <template> tag:

<head>

<link rel=”stylesheet” href=”main.css”>

</head>

This code adds a link tag to the head of the document, which references the main.css stylesheet.

8. Display the template: Finally, update the main.html file to display the “main” template by adding the following code


{{> main}}


This code inserts the “main” template into the body of the document using the {{> main}} handlebars expression.

9. View the app: Save all the files and refresh the page at http://localhost:3000/. You should see a heading that says “Hello, world!” displayed on a gray background. Congratulations, you’ve created your first Meteor app!

Of course, this is just a very basic example of what you can do with Meteor. As you continue to explore the framework, you’ll discover many more features and techniques for building powerful, real-time web applications.