How to deploy websites that include npm-downloaded packages to surge / gh-pages?

Question

I'm quite new to the deployment part of websites with npm packages in it. and I'm trying to temporarily host my website to surge.sh in order to share & test it. It's a simple html website with paper.js scripts in it. By just launching the index.html in chrome it works. When deploying to surge I get this error:

Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)

Is there an extra action that I have to go through when deploying sites with node packages in it (in my case paper.js)? E.g. building the site first, like for react apps? Or is it a problem with how I'm using paper.js in the script?

Here's a bit of my code:

// package.json
{
  "name": "leaf_generator",
  "version": "1.0.0",
  "description": "testing paperjs",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mark tension",
  "license": "ISC",
  "dependencies": {
    "focus-visible": "^4.1.5",
    "mathjs": "^6.0.2",
    "p5": "^0.8.0",
    "paper": "^0.12.1",
    "underscore": "^1.9.1"
  },
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

From index.html I import paper.js and my paper.js script like this:

  <script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
  <script type="text/javascript" src="js/leaf_generator.js"></script>

And these are the first lines of the .js paper script from where the error is thrown:

$(document).ready(function() {
  paper.setup("myCanvas");
  with (paper) {
  """"""""" paper.js code """"""""""""
}

Thanks!

Answer 1

The quick answer is that Surge.sh ignores the node_modules directory by default. If node_modules is in your .gitignore file (as it probably should be), they will also not be available on GitHub Pages. You’re right that as typically a build tool or static site generator will take all your dependencies and bundle them into build files.

Building on the comments, a couple of options of how you could fix your problem quickly:

Option 1: Use the unpkg service for your npm dependencies for now

One option is to use something like Unpackage, which will give you a pre-built and hosted version of your dependencies, directly from npm:

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/paper-full.js"></script>

I prefer to link to a specific version, but you do also have the option of always using the latest version from npm by linking to https://unpkg.com/paper

Option 2: Un-ignore the node_modules folder on Surge

Alternatively, you can decide to publish your node_modules folder to Surge by adding a Surge ignore file and restoring that folder: https://surge.sh/help/ignoring-files-and-directories

Inside the folder you are deploying, create a fill called .surgeignore, and add:

!node_modules/

Option 3: Set up a build tool

As mentioned in the comments, you can set up Webpack or a similar tool to package Paper.js and your other JavaScript together, but that might be more than you need to bother with depending on where you’re at with your project.