Creating a Basic Site With node.js and ExpresS
来源:互联网 发布:起名字的软件 编辑:程序博客网 时间:2024/05/03 00:11
What we are going to do
This walkthrough will go over setting up a basic site using node.js and Express. The walkthrough is aimed at beginners exploring node.js as I’ve had many questions from friends and colleagues about creating and deploying node apps. If you are not a beginner the article probably won’t be of much use to you. We are going to use express, an excellent web framework for node created by TJ Holowaychuk who seems to be pumping out node.js libraries like he was ten men.
Here is the site we are going to create. You might also want to grab the source code.
Setup
First we need to setup our development environment. If you are on OSX I’ve covered how to setup node.js and npm on OSX in a previous article. If you haven’t got everything installed follow that article.
If you are on Linux there are plenty of articles on Google.
For Windows users there are also resources on Google but it is a bit more tricky.
Prerequisites
If everything has installed ok you should now have node.js and npm running on your machine. At the terminal type node -v
and npm -v
and you should see something like:
You’ll see I’m using the RC of version 1 of npm. I encourage you to install this as this will soon become the default.
Create an Express site
Still with me? We’ve covered a lot already! Now let’s create an Express site.
First let’s create a folder for our project and install Express.
This installs Express into the directory we created. Now we can create the skeleton site. We are going to use jade and stylus for templating and css. More on those later.
You’ll see that we need to install a couple of dependencies for stylus and jade support so let’s do that.
Boot the app
That’s all the setup you need. Phew. Now you can boot the app:
You should see Express server listening on port 3000
and if you open http://0.0.0.0:3000 you’ll see the default Express page.
Using Git
Git is a version control system that is used heavily in the node.js ecosystem, particulary with Github. If you aren’t familiar with Git Scott Chacon is your go-to man. He’s written extensively and eloquently on Git for beginners and experts. Checkout Gitcasts for if you are a beginner and ProGitfor more advanced stuff. We are going to use git to version our site and publish it so let’s set up our repo now. If your Express server is still running hit CTRL + C to stop it.
Developing node.js sites
Normally when you develop a node.js site you’ll need ot restart your application each time you make a change. Thankfully our home-grown British JavaScript genius Remy Sharp has solved this problem with nodemon. Nodemon will reload your application each time it changes so you don’t need to restart it. If you have used Shotgun for Ruby with Sinatra it is similar to that. To install run
Then you can start your app with
Using nodemon means you don’t have to restart your app each time you make a change. For more infomation on nodemon see the README
HTML in Express
Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate but for this article I’m going to use jade. If you’ve used haml it is similar to that. In the example we use jade to setup a layout template.
This is a common template we can reuse. The line section#wrapper!= body
pulls in content from the page it is used on. Express also supports variables that you pass through to the template. In this case we pass the title variable. If you are coming from Sinatra this will all be familiar to you. If you are not I recommend consulting the Express documentation.
CSS in Express
Again Express is agnostic to what you use to generate your CSS - you can use vanilla CSS but for this example I’m using Stylus. This is very similar to Sass and supports variables, mixins, functions and more. I really like it! Here’s an example from our stylesheet
You’ll see that stylus is very terse - you don’t need brackets or commas.
Routing in Express
Routing is similar to Sinatra, allowing you to set up RESTful routes.
In this example we setup three routes in app.js
See the Express documentation for more.
Publishing your site
We’ve now developed a basic node.js site using express and we want to host it somewhere.
There are a number of hosting options for node. It isn’t so difficult to host it yourself but for me the easiest and best is Nodester. If you have used Heroku the deployment process is very similar. You’ll need to request an invite for Nodester (it won’t come through immediately though).
Chris Matthieu has created a handy video going over how to deploy to Nodester so go and watch that if you don’t fancy reading the documentation.
Let’s create the site on nodester
Now we can get the information on the site
To publish the site we need to add the git repo as a remote our git repo
And finally we can publish the site by pushing
Nodester will let you know about the deploy - if the deploy was successful you can see your app at http://[your_app_name].nodester.com/. In this example you can see the site at http://express_example.nodester.com
Some other node.js hosting providers include nodejitsu, Joyent, Cloud Foundry and Duostack.
Conclusion
This article has showed how to create a very basic site using node.js and Express. It has introduced a number of things from the node.js ecosystem and showed you how to deploy your app to Nodester.
The strengths of node.js as a technology are not so much in building static websites like this. I encourage you to explore some of the node.js libraries to see what it can do. Particularly for real-time applications node.js is extremely exciting and I think we’ll see some great apps built on node.js. Try starting with socket.io for a taste of what to expect.
If you find any inaccuracies in the post send me an email and I’ll update the post.
Further reading
- node.js
- express - node web framework
- npm - node package manager
- jade - node.js templating language
- stylus - node.js css framework
- Setting up node.js and npm on Mac OSX
- Nodester - Open Source Hosting for node.js
- Source code for this article
- Creating a Basic Site With node.js and ExpresS
- Creating a basic site with Node.js and Express
- Creating Web Applications in JavaScript with Express.js and ejs
- Node.js and Express
- Build a basic responsive site with CSS
- Basic RPCs in Node.js with a Java Backend
- Creating a Windows DLL with Visual Basic
- Node.js:Express and Waterline
- Creating a Web Site with Flash: Visual QuickProject Guide
- GETTING UP AND RUNNING WITH NODE.JS, EXPRESS, JADE, AND MONGODB
- Creating and Managing a Database with DBCA
- Creating a Basic Debugger
- Building a Recipe Search Site with Angular and Elasticsearch
- Beginning SQL Server 2005 Express Database Applications with Visual Basic Express and Visual Web Dev
- Displaying an image with EJS in node.js/express
- Dynamically creating a pie chart with ASP.NET and GDI+
- Creating a Child Process with Redirected Input and Output
- Creating a real-time search engine with IndexTank and Heroku
- Android Camera架构浅析
- 处理 Case
- 关于对Fast and Parallel Webpage Layout 这篇论文的总结
- S3C6410 电路板设计(二)
- ajax+dom+php+mysql实现多级联动效果
- Creating a Basic Site With node.js and ExpresS
- 文件
- 学习AJAX+JQUERY必看(JavaScript基础对象篇)
- 蛇形填数问题
- http://acm.nyist.net/JudgeOnline/problem.php?pid=148&&矩阵求fibonacci数列
- 处理 GroupBy 和 Having
- 网页特效
- android开发的学习路线
- 加强Script的学习以创建DRY和Automation的工具