Working on the E-commerce Site for Class

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 (opens in a new tab).

[caption id="attachment_1324" align="aligncenter" width="391"] iPhone lenses, for the discerning individual[/caption]

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 Gwartney (opens in a new tab)on 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 (opens in a new tab) 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.

https://gist.github.com/twhite96/398ad15d7139c42391048176c7131b82 (opens in a new tab)

https://gist.github.com/twhite96/1304641fa177eca3befce67a1dee9f11 (opens in a new tab)

https://gist.github.com/twhite96/a7eff91fda64dd80a20d6ac454b80718 (opens in a new tab)

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 (opens in a new tab).

[caption id="attachment_1324" align="aligncenter" width="391"] iPhone lenses, for the discerning individual[/caption]

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 Gwartney (opens in a new tab)on 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 (opens in a new tab) 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.

https://gist.github.com/twhite96/398ad15d7139c42391048176c7131b82 (opens in a new tab)

https://gist.github.com/twhite96/1304641fa177eca3befce67a1dee9f11 (opens in a new tab)

https://gist.github.com/twhite96/a7eff91fda64dd80a20d6ac454b80718 (opens in a new tab)

My site is The Lens Cap (opens in a new tab) which is just a text file for now.