Heroku application error - cannot deploy app

Hi,

I’ve almost finished the random quote generator, and I’m now looking to host it on GitHub pages for review on this site, I will then put on my portfolio site for viewing. I am struggling though to get the API working through Github pages. My SVG image that links to the GitHub repository has also disappeared. When I host it on a live server using NPM I do not have any of these issues. Can someone help with getting this online?

I get the following error message below on GitHub pages which suggests that jQuery is not loaded, but this makes no sense to me since it works fine elsewhere.

TypeError: $.ajax is not a function[Learn More]

A codepen of my project is below if this helps at all

https://codepen.io/KUBIX90/pen/MEWvxp

Thanks

Codepen is fine for FCC peer reviews, but if you want help with your GitHub Pages, can you provide a link to your GitHub repo?

Sure! the link is below.

You’re using relative links, they won’t be pointing at anything. It’s been a while since I used GH pages, but from memory a slash at the start /assets/myfile.js might work, or ideally you need to use fully qualified direct links (something like https://username.github.io/repo/folder/filename).

Also, minor, but ideally never commit node_modules or link directly to the files in the node modules folder. Either get the actual files you want and copy paste them into a folder, or use a CDN (note latter will get rid of your issues straightaway).

2 Likes

I’ve given up using GitHub pages, Heroku looks a better fit for deploying the web app. I have changed the title to reflect this. I’m still having trouble actually deploying this though. I’m getting the below errors when running a bug test on the command line. I understand its something to do with the package JSON most likely, but cannot seem to solve it. The random-quote-machine is not even a dependency for this so I’m a bit lost.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "bugs" "random-quote-machine"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/random-quote-machine
npm ERR! 404
npm ERR! 404  'random-quote-machine' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Mark\Desktop\Coding\Projects\random-quote-machine\npm-debug.log

My package JSON looks as follows

{
  "name": "random-quote-machine",
  "version": "1.0.0",
  "scripts": {
    "start": "node your-script.js"},
  "dependencies": {
    "jquery": "^3.2.1",
    "octicons": "^6.0.1"
  }
}

As things stand, you are cargo cult programming.

Heroku is not a good fit for this: what you have is a static webpage with a few scripts. Heroku is good for Node applications; this is not a Node application.

Heroku is expecting a published package called random-quote-machine on NPM - it’s trying to download it.

In your package.json, that node your-script.js is saying run your-script.js in the root of your project. Heroku would expect your-script.js to be the entry point that starts a server you have written.

I don’t think you’re doing either of these things. Heroku is likely to be complicated overkill for the extremely simple thing you’re trying to do.

You have an HTML file, a script, a CSS file, and a few scripts as dependencies. GitHub Pages is a perfect fit because that’s what it’s designed for.

As I said in the first post, you can use a CDN to get the scripts. You don’t need to use NPM, you don’t need Node modules, they are just complicating things. node_modules isn’t there just as just a place to put front end script libraries. If you do not understand why you need something you probably do not need it. This kinda setup is much much easier:

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

        <!-- CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/octicons.min.css" rel="stylesheet" type="text/css">
	<link href="https://link/to/my/styles.css" rel="stylesheet" type="text/css">

        <!-- JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" defer></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" defer></script>
        <script src="https://link/to/my/script.js" defer></script>
	<title>Random Quote Generator</title>
</head>
<body>
  <!-- Your HTML here -->
</body>
</html>

If you want the scripts locally instead of using a CDN, literally copy the scripts into a folder in your project- myProject/js/jquery.js, myProject/js/bootstrap.js and link as described in my first post. You are overcomplicating things greatly here

1 Like

Cheers for this, I switched to a CDN last night and managed to get it working on GitHub pages

1 Like