Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Angular.js, setting up a server for Drabbble

Hi,

I am using a windows and would like to setup WAMP to run the angular.js app you are making called Dribbble in the Treehouse Workshops video.

If you could quickly walkthrough how to setup the server and host it on my localhost that would be great. I tried going through it but am getting a few error messages and the API calls aren't working.

8 Answers

Taylor,

Interestingly, the choice of a server for this project isn't very important since all files are served as static files. You just need something, anything that can serve static files. For quick static servers for testing and development, I tend to use node.js and http-server. But there's also python's SimpleHTTPServer which is what I believe Jim used in the video.

Of course WAMP will also work if you want to continue with the installation. My suggestion would be to choose a WAMP package that has good documentation and a good community behind it. Any issues encountered in installation may already have been covered in their documentation or could be quickly addressed by their community.

Thanks!

Chris

Ok great, that is what I thought. I tried setting up the node server and I think I got it work but I am still seeing this error message in my console? Any thoughts....I am about 18:35 into the video.

Denying load of chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/jquery-2.0.2.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. localhost/:1 Denying load of chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/backbone-min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. localhost/:1 GET chrome-extension://invalid/ chrome-extension://invalid/:1 GET chrome-extension://invalid/ chrome-extension://invalid/:1

Taylor Pechacek,

The error seems to be related to a chrome extension. Hootsuite perhaps? You could try the Opening the site in an incognito window so that chrome extensions are disabled. Or just disable Hootsuite since it's likely causing this issue on every site you go to.

Oh wow, very cool. Thank you so much for all your help. Just curious though, I am not seeing any JSON data or feedback from my API call to Dribble inside the console like it shows in the video around 18:35. That was what I thought the error was causing but now that it is clean and clear I am still not seeing it.

Promise this is my last question before I move on :).

Thanks in advance!

What is the URL that you are using to load Dabbble? If it's a file:// URL then Chrome won't make any ajax requests.

Yeah, so I am mapping it to users/taylor/applications/dabbble where my http server is setup (per the github) and am running i on localhost:8080.

I am getting this back from the network when making the API call to dribble but nothing on the console.

Request URL:http://api.dribbble.com/shots/popular?callback=angular.callbacks._0
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:__utma=110447696.161053881.1380061517.1380061517.1380061517.1; __utmc=110447696;       __utmz=110447696.1380061517.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:api.dribbble.com
If-None-Match:"f936a6cf3553705f7a0f51ed823b6fcc"
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76     Safari/537.36
Query String Parametersview sourceview URL encoded
callback:angular.callbacks._0
Response Headersview source
Cache-Control:must-revalidate, private, max-age=0
Content-Type:application/javascript; charset=utf-8
Date:Wed, 25 Sep 2013 18:03:26 GMT
ETag:"b6f426eae8b230275dee93243c57a69c"
Server:nginx
Status:200 OK
Transfer-Encoding:chunked
X-Rack-Cache:miss
X-Request-Id:39d7dfadb5483e01746c74d7d4ec3718
X-Runtime:0.101117
X-UA-Compatible:IE=Edge,chrome=1

Taylor,

Can you try downloading the project files and running the completed project? If it works then it's likely something wrong in your code. If it doesn't then it might be something wrong in your setup.

Wow, yeah it does work when doing the completed project. At least this gives me hope :). I am going to dive back into this and see what I did wrong, although I checked my code numerous times I know I have missed something.

Thanks for all your help. You are awesome! Have a great hump day.

Thanks Taylor. Good luck!