Today I will be explaining how to get ready for web-application development, First of all, I work on Linux (Ubuntu), to follow my posts I recommend dual-booting your computer. The Ubuntu homepage can explain how to do it.
You can find all source code used in this blog here.
For any application we will need to have a server. Yes you can also type some HTML & Javascript and open the file in your browser, but this will not work for all applications and it is not ideal for testing cross-device.
So how do you get access to a free server?
Work on a local server, so you can access the application on all devices within the LAN
Set up a Google App Engine application, so you can put it on the internet
Both are free solutions to get a place to experiment on. Today we will be working locally, together with NodeJS.
First, install NodeJS, you can download it from the website, or use a package manager and type:
sudo apt-get install nodejs
into Terminal (remember: Ctrl-Shift-V to paste into Terminal). Now we will need to install NPM, in order to easily install node modules. So let's go to Terminal again and type:
sudo curl http://npmjs.org/install.sh | sudo sh
Now we have Node & NPM, that means we are ready to get ourselves some awesome modules.
There are two ways of installing a module through NPM. You can install it locally within the directory you work in, or you can install it globally. When you install it locally, NPM creates the directory "node_modules" and each module gets its own directory within it. When you install it globally, it will install it in "usr/lib/node_modules". For now, let's just install all modules globally, I will later explain how to access those modules. You can install a module typing:
sudo npm install module_name -g
So, try it out! Let's install the Express module so we can easily set up our server:
sudo npm install express -g
Now that we got our module, we are ready to make a directory for our first project. I actually put all my projects in my Dropbox folder, so they automatically sync to all my other devices, and I am assured I don't lose any work. But you can just create this directory anywhere.
Then create a file called "server.js", and put this code into it:
var express = require('express'), app = module.exports = express.createServer(); app.configure(function(){ app.use(express.bodyParser()); app.use(express.cookieParser()); app.set('view engine', 'html'); app.use(express.methodOverride()); app.use(express.static(__dirname + '/static')); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); app.get('/', function(req, res) { res.redirect('/index.html'); }); app.listen(80); // port 80 = default port browsers look for // you will need root access (sudo node server.js) to run this code
But there is one problem, when you install a module globally, it is only accessible through node, within your terminal, you can not use "require('express')" like we did, unless you use "npm link". And that is what I prefer. I like to install all my modules globally, and when I start a new project, I pick the modules I need and link them up with my working directory.
So first, go to Terminal, and go to your working directory using
cd path/to/your/directory
./node_modules/express -> /usr/lib/node_modules/express
in the Terminal window. Now we can type:
and your server is up and running! However, we don't have the "index.html" file yet, so go to your working directory and make a map called "static", in it, you can place your index file. To view the file, simply go to http://localhost and that's it. Now you can start building apps.
Next post I will be explaining how to:
make your app update when changing a file
access your application within your LAN
other fun stuff I come up with