NaN.

Project: Employee Directory with Meteor and React: Part 1

For this project, we'll assume you have already installed Meteor on your system. If not, you should follow the instructions here: Creating your first Meteor app

Using React and Meteor together

React and Meteor are two different JavaScript libraries but when used together, they work really well. Since this course is about Meteor with React, let’s talk about the purpose of each in the applications. Meteor keeps track of data in our application while React takes data and produces HTML and handles user events. For example, assuming Twitter as a Meteor application, Meteor keeps track of all the tweets and profiles while the purpose of React is to display this data using appropriate HTML.

To install React as a dependency in any project, you can simply type npm install –-save react if you have npm installed.

In case you don’t have Node or npm installed, don’t worry, you can run the command meteor npm install –-save react inside the project directory since Meteor comes bundled with Node’s packaging system npm required for running it.

Note: We suggest you to have at least the theoretical understanding of the fundamentals of React.js such as components, props, etc. This will lead to faster understanding of the frontend parts of the web application since we are going to focus primarily on the Meteor part of the application in this course. If you need to learn React, we recommend you go through the first two sections of this course: Learn React and Firebase

Project Goals

We will cover all the fundamentals of Meteor applications including No-SQL database model, publication, subscription, React components, auto-update React interface, templates, styling, etc.

Project Overview

We are going to create Employee Directory app which lists down all the employees of an organization or company. The webpage will show details of each employee in a card. For better performance, the webpage will load only a small number of employees from the server database and data will be dynamically fetched from the database if the user wishes to see more data. This is what the final product will look like:

Let’s point out the challenges we need to overcome for this project.

We need a database to store our data
We need to generate the data
We should send only a small subset of data to the client(frontend) at any time
We need to find the logic to load more data when “Load more” button is clicked

Let’s get started.

Create Project

Fire up your terminal or command prompt and navigate to the directory where you want to create the project. We are going to use Meteor command line tools to generate the project. Run the command:

$ meteor create employees_diary

That’s it. Meteor will automatically generate a project named employees_diary. You will also get simple instructions on how to run this project on the command line. Let’s start the app by following those instructions. Run these two command to navigate inside the project directory and run the app:

$ cd employees_diary
$ meteor

This will start the application server with default Meteor boilerplate application which can be viewed at http://localhost:3000/ in your browser. You can also change the default port 3000 by adding --port flag. For eg,

    $ meteor --port 8080

This will start the development server at http://localhost:8080/

Congratulations! You have just run your Meteor app on a web server.

Note: It may take a few minutes for Meteor to generate and start the project for the first time because it downloads some default packages and sets up some configuration.

Understanding the Meteor File Structure

Before proceeding, it is important to understand the flow and directory structure of Meteor application. Choose a text editor you are comfortable with (like Sublime Text 3, Atom, or VSCode) and open the employees_diary folder. You will see this directory structure and files created by Meteor in your project:

employee_diary
└───.meteor
  ...
└───node_modules
  ...
└───tests
  ...
└───client
  ├───main.html
  ├───main.js
  ├───main.css
└───server
  ├───main.js
├───.gitignore
├───package.json
├───package-lock.json

Let’s strip down the purpose of each directory. The client folder stores the client side application code which runs only in client. The server folder also has the same functionality except that the files will be loaded only on the server side. The default entry point for client is client/main.js and for server is server/main.js

To understand it more clearly, try these simple exercises:

Open the server/main.js file. Delete everything from the file and type: server/main.js

console.log("Log from server/main.js");

Save the file and you see that the server restarted automatically on the terminal/cmd and you get that Log message as shown in following figure.

Similarly, open the client/main.js file. Delete everything from this file and write:

client/main.js

console.log("Log from client/main.js");

Save the file and Meteor will automatically detect the changes to update the webpage. Since the code is written in client folder, we will see the log message only on the web browser. Open your browser and press shortcut Ctrl/Command+Shift+I or go to Menu -> More tools -> Developer tools to open the Developer tool. Navigate to console tab to view the console output as shown in figure.

To conclude, code in the client directory will be private to the client while code in the server directory will be private to the server.

The file package.json holds the information about the npm packages used in the project. The file package-lock.json generally describes the tree in which the modules were generated so that this project can be installed in exactly the same way on all the machines. These files are maintained by Node and we don’t need to worry about them.

Also, the folder node_modules contains all the module files installed as a dependency of the project while .meteor has all the project configuration and module version related stuffs.

The tests folder is added in Meteor to write test files for the project.

Meteor recommends not to add any files in client and server folder. It is recommended to write all our code in imports directory and then import them into server and client entry files manually as per the requirement. This is also called lazy loading and it is supported by default in Meteor 1.7 in contrast to eager loading in which all files are loaded automatically as the server starts. Eager loading can be initiated in the project by simply removing the entry points definition from package.json file.

To see full folder structure and learn more about the concept of eager loading and lazy loading in Meteor, check out https://guide.meteor.com/structure.html

We hope you understood the Meteor workflow and directory structure. Let’s dive into actual coding now.

Create our React boilerplate

Before starting with the app, delete all the default code from client folder as well as server folder. We are going to write each line of code ourselves to understand their purpose clearly.

Let’s open client/main.html, remove everything from it and write this skeleton code:

client/main.html

<head> 
  <title>Employees Diary</title>
</head>
<body>
  <div class="container"></div>
</body>

Here, container is the render-target point for our code that will be generated from React application. Also note that we don’t need to define the DOCTYPE and HTML tag. Meteor does it for us. We just need to focus on the important stuff.

Next, we will move to client/main.js file. Remember, this is the entry point of the web browser i.e., the execution starts from here. Write the file as:

client/main.js

//Code executes only at the client side
//Any JavaScript code here will automatically run for us
//Importing React libraries
import { Meteor } from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import './main.html';           //Importing the html file
 
//After App loads into the browser, render my app to the DOM
Meteor.startup(() => {
 
});

Here we have just imported React library and defined an empty Meteor startup function which gets triggered on the client side(browser) only after all the client side files have loaded.

Since we haven’t installed the React library yet, you may see a message on the console to install the library. Let’s install them by pressing ctrl/command + C to stop the server and then run:

$ meteor npm install --save react react-dom

Start the server again using the command meteor

Now, let’s create our first React component named App as:

client/main.js

//Code executes only at the client side
//Any JavaScript code here will automatically run for us
//Importing React libraries
import { Meteor } from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import './main.html';           //Importing the html file
 
//Creating a React component
const App = () =>{
  return(
    <div> Hello there! </div>
  );
};
 
//After App loads into the browser, render my app to the DOM
Meteor.startup(() => {
  //Next line renders App component to container class of html page
  ReactDOM.render(<App/>, document.querySelector('.container'));
});

Navigate to http://localhost:3000/ on your browser to see the message Hello there! on the screen. Also see the title has changed to Employees Diary.

Hurray! It worked. We are ready with a skeleton/boilerplate which will be required in almost every project.

Note that we are using ES6 syntax for creating the arrow functions.

Working with database: Meteor + MongoDB

We have got enough code in the frontend to start with. Let’s recall the challenges we listed down earlier for this project. The first one was that we need a database to store the data.

The following diagram is of a full-stack Meteor application.

As we can see in the figure above, ReactJS takes some data and produces the HTML. This data is handed to React by Meteor application for which we will specifically write the code in the application.

When the question about the storage point comes up, that’s where MongoDB comes into play. MongoDB stores the data for us. MongoDB is a NoSQL database which uses collection to store the data. A collection can be assumed as a giant bucket where we can simply keep on adding more and more data. Every MongoDB database has collections and each of them can store an array of objects (also referred as Documents). To get an in-depth overview of MongoDB, you can read the following article: https://www.mongodb.com/what-is-mongodb

Also, if you know about SQL database, the following figure shows the difference in structure of MongoDB and SQL databases.

Meteor comes integrated with MongoDB out of the box. Once the data is added to MongoDB database, it is on Meteor to fetch the data from it and send it to the React application. Also, there is a very important low level concept of Minimongo: Meteor makes a duplicate copy of user authorised data on the web browser client known as “Minimongo”. For faster access, Meteor on the browser client loads the data directly from Minimongo instead of requesting it from MongoDB from the backend.

Creating a MongoDB collection

We previously learned that MongoDB stores data in a data structure called Collection. We will now create a collection which can hold an array of objects where each object represents an employee. Each object will contain details of an employee such as name, number, address, etc.

Firstly, we need to find the best spot to declare our collections. Since the collection needs to be accessed in the client as well as the server, we should keep it in the imports folder and then import it wherever required. We create another folder level api/ for better folder structure and code modulation. So, create imports/api/ inside the root directory and a file within it with the name employees.js:

imports/api/employees.js

//Declare our collection
import {Mongo} from 'meteor/mongo';
 
export const Employees = new Mongo.Collection('employees');

That’s it. Just these two lines are needed to create a collection. Here, we have created a collection ‘employees’ which can be accessed by the variable Employees.

Make sure to use the keyword export in the beginning so that the Employees collection can be imported and accessed by other files in the codebase for making queries on the database.

Generating Data with faker

Now that we have created the employee collection, let’s insert some data in it. We need to have some data to pre-populate our app with, so that we can display it in our app.

Now, since we need thousands of lines of data, we should not do it manually. We need to somehow automate the process of “fake data” creation. You will also learn how to include a library in a Meteor project while learning this. There is a library called faker that can help us out here.

As you already know, Npmjs.com is a listing of all the modules that we can download and use in our Node.js projects. Navigate to https://www.npmjs.com/ on your browser and search for the library faker in the search box. You will find this one (https://www.npmjs.com/package/faker) on the top. Visit this page and have a look at the documentation and the list of things we can generate using faker.

Before using it, we need to include it in our project. To do so, open another terminal/command prompt or stop the existing server if you wish to use the existing one and type:

$ meteor npm install --save faker

You can omit the keyword Meteor from the command if you have node installed because npm already comes installed with node.

We are going to generate data on the server side because generation of data has nothing to do with client/frontend for this project. Also, it doesn’t make sense to generate around 5000 records and save it all in the database from the browser. We will just read and display this data on the browser.

Open the server/main.js file which should be empty till now and copy the following code:

server/main.js

//only executed on the server
import { Meteor } from 'meteor/meteor';
import { Employees } from '../imports/api/employees'
 
Meteor.startup(() => {
  //Great place to generate data
});

Same as on client side, Meteor provides a startup function for the server side too which executes only after all the files on the server side are loaded. We will generate data inside this startup function so that it should be generated after the database files and other dependent packages are loaded. It will avoid any conflicts or errors due to improper or incomplete loading of files.

Also, since the server/main.js file runs every time the server starts, it will generate data every time. To avoid this, we will provide a condition before data generation that data should be generated only if the count of data in database is 0. After writing the condition, the file looks as follows:

server/main.js

//only executed on the server
import { Meteor } from 'meteor/meteor';
import { Employees } from '../imports/api/employees'
 
Meteor.startup(() => {
  //check if data already exists
  //count the number of records in database
  const numberRecords = Employees.find({}).count();
 
  if(!numberRecords){
    //Great place to generate data
  }
});

Here, find() returns all the data in the collection and count() counts it. We will generate the data only if number of records is 0.

Now since we need to generate thousands of records of employee data, we need some way to loop through specified number of times. We will install a popular package lodash for this purpose. We use lodash instead of for-loop or other approaches to keep our code cleaner.

Similar to faker, you can install it by typing this command in the terminal/command prompt:

$ meteor npm install --save lodash

Once lodash is installed, add the code to generate 5000 data as follows:

server/main.js

//only executed on the server
import _ from 'lodash';
import { Meteor } from 'meteor/meteor';
import { Employees } from '../imports/api/employees'
import {image, helpers} from 'faker';
 
Meteor.startup(() => {
  //check if data already exists
  //count the number of records in database
  const numberRecords = Employees.find({}).count();
 
  if(!numberRecords){
    //generate the records using faker
      _.times(5000, ()=>{
        const name = helpers.createCard().name;
        const email = helpers.createCard().email;
        const phone = helpers.createCard().phone;
 
        Employees.insert({
          name: name, 
          email: email, 
          phone: phone,
          avatar: image.avatar()
        }); 
      });
 
  }
});

Let’s understand what we have done. The ‘_’ variable provided by lodash is used to generate 5000 data using its function times() which accepts parameters as number of times and the function to be executed given number of times. Inside the function, we generated name, email and phone using faker module and then inserted them into database along with an image url to be used as avatar. Note how we passed a JavaScript object inside the insert function which gets added in the database.

Since we are using JavaScript ES6 syntax, why not make use of it to simplify the code. After refactoring, the same code looks as follows:

server/main.js

//only executed on the server
import _ from 'lodash';
import { Meteor } from 'meteor/meteor';
import { Employees } from '../imports/api/employees'
import {image, helpers} from 'faker';
 
Meteor.startup(() => {
  //check if data already exists
  //count the number of records in database
  const numberRecords = Employees.find({}).count();
 
  if(!numberRecords){
    //generate the records using faker
      _.times(5000, ()=>{
        const {name, email, phone} = helpers.createCard();
 
        Employees.insert({
          name, email, phone,
          avatar: image.avatar()
        }); //name, email,... is equivalent to name:name, ...
      });
  }
});

You can verify if the data is created or not by writing a console message just below the constant numberRecords as:

console.log(numberRecords);

You should see the output as 5000 reflecting in your terminal or command prompt.

Congratulations! You have now successfully generated a lot of fake data using faker that we will next display on our Employee interface

Boilerplate for Employee Interface

Now that we have generated the data, let’s move to the React side of things. Remember, the purpose of our React application is solely to display information on the screen.

Let’s create a React component to display the list of employees. Following the standard convention, create a new folder named ui/ inside imports and then components/ inside ui directory. We will keep all the React components here. Create a new file as employees_list.js and add the following boilerplate.

imports/ui/components/employees_list.js

import React from 'react';
 
const EmployeeList = () => {
  return(
    <div>
      <div className="employee-list">
        Employee List
      </div>
    </div>
  );
};
export default EmployeeList;

Now import this component into client/main.js and update the file with React code as below:

client/main.js

//Code executes only at the client side
//Any JavaScript code here will automatically run for us
import { Meteor } from 'meteor/meteor';
//Importing React libraries
import React from 'react';
import ReactDOM from 'react-dom';
 
import EmployeeList from '../imports/ui/components/employees_list';
//Importing the html file
import './main.html';
 
//Creating a React component
const App = () =>{
  return(
    <div> 
      <EmployeeList /> 
    </div>
  );
};
 
//After App loads into the browser, render my app to the DOM
Meteor.startup(() => {
  //Next lines says App component to be rendered at class container in main.html
  ReactDOM.render(<App/>, document.querySelector('.container'));
});

So, we have imported and used the component inside the div tag. Go to http://localhost:3000/ to see the text Employee List on the screen.

Now, the next step is to figure out how to fetch data from the database collection and display it in the React component. But before that, we will learn a little more about two Meteor concepts.

Category: Web Development