Tiffany R. White Blog

Your friend Tiffany's tiny little weblog.

Working on the E-commerce Site for Class

2016-09-18 Tiffany WhiteSemester Updates

1

I am going to be making a mock ecommerce site for my Web Development class final project.

It consists of two parts:

  1. The foundation with HTML and CSS, CSS animations, Bootstrap, etc., and
  2. The final project, with some meatier stuff, like JavaScript and jQuery.

I started a mockup of a Bootstrap site, which is inspired by w3layouts.

Finding a Place to Serve and Host Static Files

When I got the assignment, I decided on using Heroku, much like our instructor did, to serve our static class website. I searched all over and found that you would need to have a php file, index.php with some very basic code that would point to your home.html file in order to serve up your site.

This worked and would have served me well. But I was talking to my pal Alex Gwartneyon Skype and I mentioned what I was working on and how I served up assets over Heroku with PHP. He told me you could do the same thing with an Express server and Node.

So we set off to get it set up. It was not easy.

Getting the Site Set Up

Alex and I spent two whole hours troubleshooting this. I knew from previous experience that you needed to have a Procfile and some npm dependencies. Alex helped me get a package.json file up by using npm init which I may have used once or twice but totally forgot about.

I installed Express into that directory, etc. I did not include a Procfile immediately, though I should have.

We worked on it for a while. He had trouble getting the Express server up on his end to show me what it could do. He got his end set up, then we worked on getting my site up on Heroku.

Two Hours Later…

Everything came up roses. There were certain things in the Procfile that needed to be added. Opening ports in the Express server for Heroku to look for was a pain, but all in all, it was successful.

Just in case you’re wondering how, here are a few gists. Edit them for what you need.

{
"name": "cs0134-ecommerce-site",
"version": "1.0.0",
"description": "site for cs0134",
"main": "server.js",
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Tiffany White",
"license": "ISC",
"devDependencies": {
"express": "^4.14.0"
}
}
view raw package.json hosted with ❤ by GitHub

web: node server.js
view raw Procfile hosted with ❤ by GitHub

var express = require('express');
var app = express();
app.use(express.static('public'));
var port = process.env.PORT || 8080;
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(port, function () {
console.log('Example app listening on port 3000!');
});
view raw server.js hosted with ❤ by GitHub

Update 2018-12-21: The finished site, which is not on Heroku: The Lens Cap