username

password

stripe_secret

stripe_publishable

Gain insights into Meteor.js, explore JavaScript concepts, and discover how to build full-stack applications with React integration, email support, and Stripe payment processing.

meteor-docker.tar.gz

CreateMeteorApp

CreateMeteorAppSettingsFile

CreateReactiveApp

RunAppWithAuthentication

RunAppWithInstallation

Meteor.js is a Node.js framework for developing JavaScript applications. It's used to create full-stack applications that use a single language on both the server and client sides. Meteor.js is easy to use and simplifies the development of web applications.

This course will begin by discussing the fundamental concepts of Meteor.js before moving on to refresh the learner's knowledge of some key aspects of JavaScript used in React, another JavaScript framework. Then, through hands-on experience, you will learn how to build a production-grade Meteor.js application with a React frontend. Following that, you'll learn how to set up an SMTP server to send transactional emails and how to integrate Stripe into your Meteor.js application to accept payments.

By the end of this course, you will be able to create a full-stack application from scratch using Meteor.js and feel confident working with MongoDB as well. You will also be able to integrate Stripe into any Meteor.js application you create.

Building Full Stack Applications Using Meteor.js

# Packages

A package is code authored by someone else that provides a solution to a particular problem. Plenty of packages are available for us to use in our MeteorJS applications. We normally import packages to use alongside our code. We can use two package systems in Meteor.

# Atmosphere packages
These are packages that we can search for on Atmospherejs.com. We can add an Atmosphere package to our Meteor package by typing the following command:

```
meteor add package_name
```

A package can be removed from our project using the following command:

```
meteor remove package_Name
```

For example, if we want to add Bootstrap (a popular CSS framework) to our project, we can install `useraccounts:bootstrap` by typing this on the terminal: 

```
meteor add useraccounts:bootstrap
```

Atmosphere packages maintain a naming convention in which the author’s username is `useraccounts` and the package name is `bootstrap`, like in the example above. This is necessary to identify each unique package. Atmosphere packages can only be used in a Meteor application.


# npm packages
npm packages are made available for the wider Node.js community. npm stands for Node Package Manager and is a repository of useful code written for Node.js projects.

We can search for npm packages on npmjs.com. Installation into a Meteor project is done through the terminal by typing the following:

```
meteor npm install package_name
```

npm packages can be used in any Node.js project—unlike Atmosphere packages, which are only compatible with Meteor projects.

# Installing a package
To install a package in a Meteor application, we need to navigate to the folder where the application is located and open the terminal at that location. In the task below, we’ll install Bootstrap into our project to use Bootstrap styles.

# Task
Let’s install Bootstrap into our Meteor project. Click “Run” and start the application. While the application is running, click the “**+**” symbol after the _terminal_ tab. This opens a new tab. We’ll then navigate to our project folder.
On the newly-opened terminal, type the following command to navigate to the root directory:


```js
cd meteor_react_app
```
Next, type the following:
```js
meteor npm install bootstrap
```
This installs Bootstrap into the project. After it finishes installing, click the “Run” button.

Next, proceed to the `imports/ui/App.jsx` file and, in **line 4**, add the code below. This imports Bootstrap styles into the application.

```js
import 'bootstrap/dist/css/bootstrap.min.css';
```
Open the `imports/ui/Hello.jsx` file and, on **line 12**, add a Bootstrap class to the button. Look for the button code below:

```js
<button onClick={increment}>Click Me</button>
```
Replace the button code above with the following: 

```js
<button onClick={increment} className="btn btn-danger">Click Me</button>
```

Click “Run” to see the changes in the application styling.


Learn about packages and how they’re installed in MeteorJS.

Getting Started

Meteor Framework

Introduction to MeteorJS

Working With Data

A Pop Quiz On Data Access With Meteor

A Simple Idea Vote Application

JavaScript Refresher

Pop Quiz: JavaScript Refresher for React Development

An Overview of React

Pop Quiz: React

Coding an Online Bookshop

Deployment

Appendix

Installing Packages in Meteor

Packages

Atmosphere packages