Setup Your Dev Environment
Project: Going React
Project: Going React
Setting up Meteor is fairly straightforward.
On a Mac, open your terminal and type the following:
curl https://install.meteor.com/ | sh
Press enter and watch it install.
If you are on another OS, go to https://www.meteor.com/install and follow their instructions.
Let's set up a new project. Meteor tells us how to do this after we've installed it, so let's follow their instructions.
Create a repo for your assignment using this link. Clone that repo to your computer. Create a new project in that repo, navigate to it and use the meteor command to start the server.
Don't type the $! This just indicates a command that needs to be exceuted in the terminal. The first command will create a Meteor application in the current directory. The second command will start up the new Meteor server.
$ meteor create .
It should say:
=> Started proxy. => Started MongoDB. => Started your app. => App running at: http://localhost:3000/
You can now go to http://localhost:3000/ to see your brandnew web application running. Every time you make a change, Meteor will reload the page automatically! How neat is that?
Now, that we have our new project, navigate to it in Finder. You will note that three files were automatically generated. Get rid of them. We are going to make use of some third party libraries for certain functionality, so let's add them now.
For many projects, we would have to download the libraries and add it to our project manually. We don't need to do this with Meteor though as we can add the libraries using Meteors package manager directly in the command line.
Add the libraries using the following command:
meteor add react
Now do the same for the other libraries we need:
We will use Twitter Bootstrap and the FontAwesome library for styling purposes.
The first is the official React package bundled by the Meteor Development Group. The second is the official D3.js package for Meteor. We are doing some date manipulation, so MomentJS is a good choice. Fourth and fifth are Bootstrap and FontAwesome, just for styling purposes.
If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.
We have placed cookies on your device to ensure that we give you the best experience on our website.