Getting Started With Node.js and Geddy

Discussion in 'Design & Development' started by Samuel, Mar 20, 2012.

  1. Samuel

    Samuel
    Expand Collapse
    Admin

    Joined:
    Dec 20, 2011
    Messages:
    5,576
    Likes Received:
    71
    [​IMG]
    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.
    Node.js is a platform built on Chrome’s JavaScript runtime for easily building applications in JavaScript that run on the server. Node.js uses an event-driven, non-blocking I/O model, which makes it perfect for building real time apps.​
    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.
    Installing Node.js

    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):
    Jake is a JavaScript build program for Node.js.​
    • Open up your terminal
    • type 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 ~/dev/ directory.
    cd path/to/the/place/you/code
    Next, we’ll use geddy to generate our app structure. We’ll be creating a to-do application, so we’ll call ours, todo_app
    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:
    • app/
      • controllers/
      • models/
      • views/
    • config/
    • lib/
    • log/
    • node_modules/
    • public/
    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/views/main/index.html.ejs template).
    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 / route.
    config: The configuration files for your app goes here. You should have the development.js, production.js, environment.js, router.js and 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 access.log, a 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:
    cd ~/path/to/code/todo_app
    Once you’re there, start the app up by using the geddy command:
    geddy
    You should see some output that looks a bit like this:
    [​IMG]
    Now that we’ve started up the server, go ahead and check it out in browser. Visit http://localhost:4000, and take a look!
    [​IMG]
    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.​
    [​IMG]
    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!
    [​IMG]

    [​IMG]
    [​IMG]
    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    Continue reading...
     

Share This Page