Code Monkey home page Code Monkey logo

tiffanys-project's Introduction

README for a Simple Express Server for Heroku

Introduction

This project provides an easy way to deploy a Web server on Heroku. It will serve "static" files, including HTML, CSS, JavaScript, and images.

In addition to serving static files, this server echoes any form data posted to it back to the client. This is for instructional/experimental purposes.

Everything here is free, mostly open-source. Heroku is free for modest sites where performance is not important.

Instructions

These instructions apply most directly to Linux, particularly Debian, Ubuntu, Mint, or related distributions. But you will find instructions for other operating systems at the various projects' Web sites.

Many of these steps are done at the command line (a.k.a. terminal or shell), and the command prompt is represented by "$".

  1. Install Node.js. The best way to do this depends on your OS, among other things.

    Most Linux distributions include nodejs as a package in their repositories and you can install it with a command like
    $ sudo apt-get install nodejs
    For Mac OS X and Windows, you can download installers at Node.js Downloads.

    If you find yourself using Node.js for other projects, you should consider using n or nvm. These allow you to switch between multiple versions and also to avoid permission issues that often arise when using npm.

    Test the installation at the command-line prompt with:

    • $ node -v
    • $ npm -v
  2. Install Git. On Debina/Ubuntu/Mint, just run
    $ sudo apt-get install git

    Test:
    $ git --version

    Configure Git:

    • $ git config --global user.name "_Your Name_"
    • $ git config --global user.email "_your_email@some_domain.com_"
    • You should also set your system's EDITOR environment variable to something you like. Many people choose nano or vim.
  3. Go to GitHub and create an account. You can use this account for all of your projects.

  4. Go to the repository for this project and click the Fork button at the top right. This will create a copy (fork) of the repository in your own account.

    Rename your project: Go to your copy (https://github.com/_your_account_/SimpleExpressServerForHeroku). Click the project Settings link. Type a new name (e.g., "YourProject") and click the Rename button.

  5. At the command line, go to your projects directory, e.g.:
    $ cd ~/Projects

    Clone your forked project to this directory:
    $ git clone git:github.com:_your_account_/_YourProject_.git

    This will create a new directory, ~/Projects/YourProject, and copy the project code there.

    Go to your new project directory:
    $ cd YourProject

  6. Install the node modules required for this project:
    $ npm install

  7. Test the project:

    1. Start the Node server:
      $ node web.js
    2. In your browser, go to localhost:8300. You should see a basic Web home page.
    3. At the command line, press Ctrl-C to stop the server.
  8. Go to Heroku and create an account. Choose Node.js as your development language. You can use this account for all of your projects in various languages.

    You should walk through the Getting Started tutorial at the Heroku site at some point, but these instructions should be enough for now.

  9. Install the Heroku Toolbelt. Instructions vary by platform; for Debian/Ubuntu/Mint:
    $ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

    Type
    $ heroku login

    Enter the e-mail address and password you used to create your Heroku account.

  10. Test your setup:

1.  Open a new terminal and go to your project directory.
2.  Start the local Heroku server:  
    `$ foreman start web`
    
    It should tell you which port it is using, e.g. "Listening on port 5000".
3.  In your browser, go to _localhost:5000_ (or whatever port you were given). You should see that basic Web home page.
4.  At the command line, you can press Ctrl-C to stop the server. But, even better, you can leave it running while you work on the next steps. (Run the server in one terminal while you work in another.) Refreshing the browser should show changes as you make them.
5.  You can control the port Foreman uses by creating a _.env_ file with the contents  
`PORT=<your port>`  
If you do this, be sure to add the line  
`.env`  
to your _.gitignore_ file, so it doesn't get checked into your Git repository or uploaded to Heroku.
  1. Create a Heroku repository for this project:
    $ heroku create
Heroku assigns a unique name to your project, e.g., _infinite-journey-4288_ and creates a remote Git repository on its servers for your project. If you type  
`$ git remote -v`  
you should see two pairs of remote repositories: one labeled _heroku_ at `heroku.com` and one labeled _origin_ at `github.com`. The former is what Heroku uses to run your Web site. The latter is for safekeeping of your code and sharing with others.
  1. Modify these files: * package.json: Change these fields:

    • name: Your project name
    • version: Your project version (update as appropriate)
    • description: Describe your project
    • repository url: Your GitHub repository
    • bugs url: For your GitHub repository
    • homepage: Your GitHub repository
    • keywords: Terms characterizing your site * README.md: Explain your project for GitHub users
  2. The public/ is all yours. Build your site there. Certainly change * favicon.ico. (I personally use Inkscape for most graphics work.) * index.html: the "home" page for the project. * Replace or remove any other files in public/. * Feel free to create subdirectories, CSS, JavaScript, graphics, and more.

  3. Once you have the first version of your site working and ready, check it into Git: * Get a summary of what you have changed:
    $ git status * For files you have modified, check that the changes are what you want:
    $ git diff _filename_ * Stage each file you are happy with:
    $ git add _filename_ * Check again that everything you want to commit has been staged:
    $ git status * Commit the changes:
    $ git commit

Push your latest work to GitHub:  
`$ git push origin master`

(Git has many more features and actions than are mentioned here. Read up on it when you get a chance. Also notice that `git status` explains your choices, such as how to undo things, precisely if tersely.)
  1. Push your latest work to Heroku:
    $ git push heroku master

  2. Test your Heroku Web site:
    $ heroku open

This opens your site in a browser.

You can get information about your Heroku site's activity with commands like:  
`$ heroku logs --tail` (quit with Ctrl-C)  
and  
`$ heroku ps`
  1. Continue to build your site, cycling through steps 13-15 as long as you want.

tiffanys-project's People

Contributors

tafby avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.