This lab will help you generate pages in your app based on user input (and teach how to use JSON). Assignment 6 includes these tasks!
Learn about partials and use them to implement the project thumbnail and jumbotron HTML in index.handlebars and project.handlebars
$ bash lab4/check-setup.sh
I got the error
$'\r': command not found issue
Windows tends to add extra 'return' (\r) characters at the end of each line in scripts/code. You can try doing this:
sed -i 's/\r//' lab4/check-setup.sh
I got the error
bash: lab4/check-setup.sh: No such file or directory
Make sure you're in your 'introHCI' directory and that you've cloned lab4 here.
$ bash lab4/check-setup.sh
If you see a message like below, your vagrant is set up correctly: Running on Vagrant guest PASS: Vagrant is correctly set up.
What's the vagrant password?
vagrant
$ node app.js
Express server listening on port 3000
module.js:340
throw err;
^
Error: Cannot find module '/home/vagrant/app.js'
Are you in lab5 directory?
When I try to run node app.js
I get a bunch of error messages, including the line
Error: listen EADDRINUSE
This probably happened because Node crashed. For instance, Vagrant might have disconnected you all of a sudden.
To fix this problem, tell your browser to refresh http://localhost:3000 until you get "No data received" or a similar message. Now try starting Node again. Everything should be fine.
Explanation: The message EADDRINUSE
means that Node can't start listening on port 3000 because it's already in use. The problem is that the last instance of Node failed to properly release port 3000 when it crashed. By refreshing the webpage, we're getting the OS to realize 'Oh, the Node server isn't using port 3000 anymore' and consequently release it.
I get a blank page!
Make sure node is running (see previous slide).
<div class="project" id="{{id}}">
<a href="project" class="thumbnail">
<img src="images/{{image}}" class="img">
<p>{{name}}</p>
</a>
</div>
exports.view = function(req, res){
res.render('index', {
'name': 'Waiting in Line',
'image': 'lorempixel.people.1.jpeg',
'id': 'project1'
});
};
Error: listen EADDRINUSE
Explained in slide#28 Debug section :-)
My images didn't load!
Restart node, see slide 31.
res.render('index', {
'projects': [
{ 'name': 'Waiting in Line',
'image': 'lorempixel.people.1.jpeg',
'id': 'project1'
},
{ 'name': 'Needfinding',
'image': 'lorempixel.city.1.jpeg',
'id': 'project2'
},
{ 'name': 'Prototyping',
'image': 'lorempixel.technics.1.jpeg',
'id': 'project3'
},
{ 'name': 'Heuristic Evaluation',
'image': 'lorempixel.abstract.1.jpeg',
'id': 'project4'
},
{ 'name': 'Visualization',
'image': 'lorempixel.abstract.8.jpeg',
'id': 'project5'
},
{ 'name': 'Social design',
'image': 'lorempixel.people.2.jpeg',
'id': 'project6'
},
{ 'name': 'Gestural interaction',
'image': 'lorempixel.technics.2.jpeg',
'id': 'project7'
},
{ 'name': 'Design tools',
'image': 'lorempixel.city.2.jpeg',
'id': 'project8'
}
]
});
{{#each projects}}
<div class="project" id="{{id}}">
<a href="project" class="thumbnail">
<img src="images/{{image}}" ... />
<p>{{name}}</p>
</a>
</div>
{{/each}}
These changes should be made in index.handlebars. You should know why!
My page didn't change!
Restart node, see slide 31.
<ol>
{{#each projects}}
<li><a href="#{{id}}">{{name}}</a></li>
{{/each}}
</ol>
The list doesn't appear on top of page!
Scroll down to bottom of the page. Adjust code accordingly.
The list doesn't appear at all.
Restart node, see slide 31.
...
var index = require('./routes/index');
var project = require('./routes/project');
// Example route
...
...
// Add routes here
app.get('/', index.view);
app.get('/project', project.viewProject);
// Example route
...
exports.viewProject = function(req, res) {
// controller code goes here
};
res.render('project');
“Error: .get() requires callback functions but got a [object Undefined]”
It couldn’t find the right controller function. The route is wrong or project.js is named incorrectly.
When I click on the project, my browser responds 'Cannot GET /project.html'
Notice that we added the route '/project' not '/project.html'. Your views/index.handlebars file probably has <a href="project.html" ... >
. Just change it to <a href="project" ... >
.
Reminder: You need to explicitly refresh localhost:3000 in order to see the change.
app.get('/project/:name', project.viewProject);
var name = req.params.name;
console.log("The project name is: " + name);
When I click on the project, I just get 'Cannot GET /project' again!
yes, again the problem is that we haven't fixed views/index.handlebars yet. However, you can type localhost:3000/project/foo directly into your address bar to test the route we just added.
res.render('project', {
'projectName': name
});
<div class="jumbotron">
<h1>{{projectName}}</h1>
<p>one-sentence description of project</p>
</div>
{{#each projects}}
<div class="project" id="{{id}}">
<a href="project/{{name}}" class="thumbnail">
<img src="images/{{image}}" ... />
<p>{{name}}</p>
</a>
</div>
{{/each}}
git status
git add ...
git commit -m "node.js lab"
git push
heroku create newapplicationname
git push heroku master