This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
In this three part tutorial series, we’ll be diving deep into the process of creating a to-do list management app in Node.js and Geddy from scratch. In this introductory article, we’ll review how to install Node.js on Windows and OS X, getting Geddy installed, and generating our first app. Ready?
What is Node?
If you’ve been developing web apps for the last couple of years, you’re likely already familiar with Node.js, but let’s go over it - just in case you’re new to the scene.
What is Geddy?
Geddy should feel very familiar to you.
Geddy is a simple and structured MVC (model, view, controller) framework for Node.js. You can use it to quickly create web apps and JSON APIs. If you’ve done any level of work with Ruby on Rails or PHP's CodeIgniter, Geddy should feel very familiar to you; it’s got a restful router, template rendering, controllers, and models.
Node.js runs on Windows, OS X, and Linux. I’ll show you how to get set up on both Windows and OS X. if you’re on Linux I’ll assume that you’ve got Node installed, know how to get it installed, or know someone that can help you with the process.
First, go to http://nodejs.org and click the download button. Find the installer link for your operating system, and download it. Follow the installation prompt to get installed. If you’re on Windows, you may need to reboot your computer to get the ‘node’ command on to your path.
You should now have both Node and npm (Node Package Manager) installed.
Installing Geddy with npm
Node has a great package manager built right in. It’s called, npm, and, as of this writing, there are nearly 8,000 packages available. Check out http://toolbox.no.de to browse through them if you’d like. For this tutorial, however, we’ll use npm to install Geddy (our framework) and Jake (the build tool that Geddy uses):
- Open up your terminal
npm install -g geddy jake
That’s it! Now that you’ve got Geddy installed, let's see about generating your first app.
Generating a Geddy App
Geddy uses a global executable to generate apps/resources, and to start up your app server. This will all take place on the command line, so open up your terminal again. Before we generate our app, let's
cd to a good location to store your app. This can be anywhere on your machine, though, I prefer to do my development in my
Next, we’ll use
geddy to generate our app structure. We’ll be creating a to-do application, so we'll call ours,
geddy app todo_app
All done. Now what did that do for us?
An Overview of Our Generated App
If you take a look within the newly created
todo_app directory, you’ll see that Geddy has generated a fair bit of code for you. Your directory structure should look a bit like this:
Let's step through these one by one:
app: Here’s where most of the magic happens. Most of your app’s logic will be located in one of the three directories contained in this one.
app/controllers: All of your app’s controllers (the part that ties your models to your views) go here. You’ll also notice that there’s already two controller files in there:
application.js (which all controllers inherit from) and
main.js (the controller that ties your
/ route to your
app/models: Here’s where you’ll be storing your models - there’s nothing in there yet, but we’ll adding one in during the next tutorial.
app/views: All of your app’s templates are stored here. For now, you’ll see that you have an
application.html.ejs file in the
layouts directory - this file is the main template for your app, all of your front-end wrapper code should go in here. You should also have an
index.html.ejs file in the
main directory. This is what get’s rendered by the main controller’s
index action when you hit the
config: The configuration files for your app goes here. You should have the
init.js files in there. The
init.js file is a file that runs just after the app gets started, before any requests come in. This can be used to add functions and properties that need to be app-wide.
The router.js file is used to create routes for your application. Routes tie URLs to controller actions. For global settings, you’ll want to edit the
environment.js file. For production and development settings, edit the corresponding config files.
lib: This is the place where you can put any file’s that you’d like to use all over your app.
log: All of your logs will be stored here. You should get an
stdout.log, and a
stderr.log after you run your app.
node_modules: This is where the modules that you install will be stored. Think of it as a lib for other people’s code.
public: Finally, here’s where all of your front end specific stuff will live. All you css files, images, and front-end js files will be in here. You’ll notice that Twitter’s bootstrap and jQuery come pre-packaged with all Geddy apps.
Starting Up Your New Geddy App
Now that we have an app generated, I'll demonstrate how to start it up. First, open the terminal again, and navigate to your app’s directory:
Once you’re there, start the app up by using the
You should see some output that looks a bit like this:
Now that we’ve started up the server, go ahead and check it out in browser. Visit
http://localhost:4000, and take a look!
Bonus: Because Geddy uses Bootstrap out of the box, with it’s responsive layout enabled, our app will immediately display nicely in a mobile browser. Resize your browser window to verify this.
The Next Step
This concludes the first part of our tutorial series on Node.js and Geddy. In the next one, I’ll demonstrate how to generate a
todo resource (which will give us a better base to build our app upon), and go into the details of building a real app with Geddy. If you have any questions, feel free to leave a comment here or open an issue on GitHub. Stay tuned!