Skip to content

Instantly share code, notes, and snippets.

@joelip
Last active August 29, 2015 14:06
Show Gist options
  • Select an option

  • Save joelip/38ffe02f7e365f41616b to your computer and use it in GitHub Desktop.

Select an option

Save joelip/38ffe02f7e365f41616b to your computer and use it in GitHub Desktop.

Revisions

  1. joelip revised this gist Sep 9, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,9 @@ Creating an account is simple. Go to [nitrous.io](https://www.nitrous.io/) and e

    ### Choosing Your Stack

    Once you've finished the account creation, you'll want to choose the Node stack, and select the region that is closest to your in the dropdown (this is so that they can find a Nitrous server closest to you, which will maximize the speed with which your app preforms).
    Once you've finished the account creation, you'll want to choose the Node stack, and select the region that is closest to your current location in the dropdown (this is so that they can find a Nitrous server closest to you, which will maximize the speed with which your app preforms).

    >The name of your app doesn't matter. It's just for reference. Also, there's no need to add your g=Github repo yet. We'll be doing that shortly.
    >The name of your app doesn't matter. It's just for reference. Also, there's no need to add your Github repo yet. We'll be doing that shortly.
    ![selecting a stack and region](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/nitrous_setup_choose_framework.gif)

    @@ -52,7 +52,7 @@ which will allow you start previewing your application in browser. Navigate to t

    ![npm start and preview](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/nitrous_npm_start_and_preview.gif)

    Viola! You have a sparkly new dev environment that you can access from any computer with the same compatibility everywhere.
    Voila! You have a sparkly new dev environment that you can access from any computer with the same compatibility everywhere.

    ### Moving Forward

  2. joelip created this gist Sep 9, 2014.
    74 changes: 74 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    ## Using Nitrous

    ![Nitrous Dashboard](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/Screenshot%202014-09-09%2013.23.34.png)

    [Nitrous](https://www.nitrous.io/) is a powerful IDE (integrated development environment) for building and previewing web applications. With a live console, text editor (with syntax highlighting), and server with preview options, it has everything you need to develop for Bloc Courses.

    ### Signing Up

    Creating an account is simple. Go to [nitrous.io](https://www.nitrous.io/) and enter in a username, password and email. You can even use your Github account to login if you're wary of creating another account for a singular purpose.

    ![creating an account with github](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/Screenshot%202014-09-09%2013.30.26.png)

    ### Choosing Your Stack

    Once you've finished the account creation, you'll want to choose the Node stack, and select the region that is closest to your in the dropdown (this is so that they can find a Nitrous server closest to you, which will maximize the speed with which your app preforms).

    >The name of your app doesn't matter. It's just for reference. Also, there's no need to add your g=Github repo yet. We'll be doing that shortly.
    ![selecting a stack and region](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/nitrous_setup_choose_framework.gif)

    ### Getting Started with Nitrous as Your Bloc Development Environment

    You may see some screens in between signing up about using Nitrous locally with your text editor like Sublime. While you can do this, we recommend sticking to the in-browser editor for simplicity's sake.

    Once you've navigated to the home screen (see the screenshot at the beginning of this resource for what it looks like), you can start following the Development Environment instructions for Mac/Linux (don't worry, we're reproducing them here so you won't need to open the checkpoint separately). __Nitrous elminates the need for Vagrant an all of it's instructions.__ We can start with the instructions on cloning Bloc Jams. Anything related to the `Terminal` or the command line will be done in the `console` section of Nitrous. the `workspace/` directory will be the equivalent of your root directory. Make this your current directory before cloning Bloc Jams.

    ```bash(NitrousConsole)
    $ cd workspace/
    $ git clone https://github.com/Bloc/bloc-jams-student-skeleton.git bloc-jams # This will create a local copy of our skeleton code in a directory called 'bloc-jams'.
    $ cd bloc-jams # Makes our current directory the bloc-jams skeleton
    ```

    ![gif of using Nitrous to clone Bloc Jams](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/nitrous_clone_bloc_jams.gif)

    #### NPM Install

    Because Nitrous runs on Linux, there won't be any need for installing your Node Packages with the `--no-bin-links` parameter. Continuing with the Linux instructions.

    ```bash(NitrousConsole)
    $ npm install
    ```

    > The Bower tracking prompt is inconsequential. You can choose yes or no and it'll have no impact on your Dev Environment.
    Once you've installed everything, you'll be able to run

    ```bash(NitrousConsole)
    $ npm start
    ```

    which will allow you start previewing your application in browser. Navigate to the `preview` link at the top of the IDE. Choose `port 3000` and you'll see your Bloc Jams app in a new browser tab.

    ![npm start and preview](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/nitrous_npm_start_and_preview.gif)

    Viola! You have a sparkly new dev environment that you can access from any computer with the same compatibility everywhere.

    ### Moving Forward

    A friendly reminder that needs to be emphasized -- __you do not need to do anything Vagrant or VirtualBox related to use Nitrous.__ Whenever the `Terminal` is referenced in the material, translate that to mean 'Nitrous'. See `Vagrant`? That means Nitrous. There shouldn't be too much confusion, but it's worth re-iterating.

    ![no vagrant yes nitrous](https://dl.dropboxusercontent.com/u/10788831/Nitrous%20resource/Screenshot%202014-09-09%2014.03.24.png)

    ### Addressing Concern about "Real World" Application of Nitrous

    Before we explain how to get started with Nitrous, one of the most common questions we get about it as a viable alternative to developing locally is "Will this translate to programming in the real world?".

    It's true that it's highly unlikely you will find yourself developing on a platform like Nitrous in a Junior Developer position or on any programming team you might find yourself. However, Nitrous does not abstract many of the most important concepts from learning to program and learning to be a programmer. Some of the most relevant concepts that we teach in Bloc courses are:

    - Learning to use the command line
    - Learning programming concepts and syntax
    - Learning how to build real world applications
    - Using git and Github, and deploying to Heroku

    None of these concepts are compromised by using Nitrous. If anything, Nitrous makes understanding the relationship between these skills more salient by keeping them all in one place. It is equivalent to working with a Virtual Machine on your own computer, without having to deal with the fuss of setting one up.