Working on the E-commerce Site for Class | Tiffany R. White Blog

Working on the E-commerce Site for Class

Reading time: 4 mins

commerce-min

 

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.

[caption id=”attachment_1324” align=”aligncenter” width=”391”]iPhone lenses, for the discerning individual 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 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.

https://gist.github.com/twhite96/398ad15d7139c42391048176c7131b82

 

https://gist.github.com/twhite96/1304641fa177eca3befce67a1dee9f11

https://gist.github.com/twhite96/a7eff91fda64dd80a20d6ac454b80718

commerce-min

 

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.

[caption id=”attachment_1324” align=”aligncenter” width=”391”]iPhone lenses, for the discerning individual 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 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.

https://gist.github.com/twhite96/398ad15d7139c42391048176c7131b82

 

https://gist.github.com/twhite96/1304641fa177eca3befce67a1dee9f11

https://gist.github.com/twhite96/a7eff91fda64dd80a20d6ac454b80718

My site is The Lens Cap which is just a text file for now.


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter