0

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!

SumakuTension
  • 542
  • 1
  • 9
  • 26
  • 1
    Are you compiling the paper.js into a single bundled script that you can serve via surge.sh? If not, you'll need to deploy node_modules (and the contents) as well. From your package.json - it doesn't looks like you compile your assets. – steadweb Jul 02 '19 at 13:21
  • @steadweb You're right, I haven't done that. Didn't know it was necessary. What's a good tool to build with? e.i. what's a good resource to show me, or can you tell me what line I should put in my package.json scripts: {"build": } , and what files do I additionally include in the project/build folder? I can't find much documentation on this for some reason. Thanks! – SumakuTension Jul 02 '19 at 13:41
  • There's a bunch of tools to aid with this :) take a look at webpack https://webpack.js.org/ - I'd be happy to submit an answer around a basic webpack config if that would help? – steadweb Jul 02 '19 at 13:53
  • @steadweb that'd be very helpful yes! I can generalize my question a little to fit your answer a bit better? Might be useful to others as well – SumakuTension Jul 02 '19 at 15:07

1 Answers1

2

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/paper@0.12.3/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.

kennethormandy
  • 2,080
  • 14
  • 16