# Sketch tool: linking js files from another server

**URL:** <https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582>\
**Category:** Libraries\
**Created:** [August 11, 2023, 4:36pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582 "2023-08-11T16:36:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [August 11, 2023, 4:36pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/1 "2023-08-11T16:36:41Z")

</div>

This question is about using the p5.js Editor tool.  
In the index.html file there are statements in the head section to link to p5.js e.g.  
`<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>`

Now I want to link to a js file on my website like this  
`<script src="http://lagers.org.uk/libs/_files/math/complex.js"></script>`  
but it doesn’t work. The editor doesn’t give any error/warning message about the file it simply states

```auto
[poly.js, line 229] "Complex" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).

```

The Complex class is defined in this file.

This is the [sketch](https://editor.p5js.org/quark-js/sketches/T_EwBLx5w). I have tried it in Firefox and Safari with the same result.

Any help / thoughts welcome 😁

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 11, 2023, 5:07pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/2 "2023-08-11T17:07:38Z")

</div>

> [@quark](#):
>
> `<script src="http://lagers.org.uk/libs/_files/math/complex.js"></script>`

I’ve removed the `http:` part and then it loaded successfully: ✂  
`<script src=//lagers.org.uk/libs/_files/math/complex.js></script>`  
We shouldn’t load files using protocol `http:` while our page is `https:`! ⚠

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [August 11, 2023, 5:20pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/3 "2023-08-11T17:20:24Z")

</div>

> [@GoToLoop](#):
>
> `<script src=//lagers.org.uk/libs/_files/math/complex.js></script>`

I tried this with `""` around the source file also with and without the // and unfortunately this didn’t solve my problem. The error message is `"Complex is not defined"`

It could still be that a protocol / security issue but I would expect the editor to report it as a problem

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 11, 2023, 6:35pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/4 "2023-08-11T18:35:49Z")

</div>

Hi @quark,

~~Imo you need to make your class available in the current/global context when loading from remote.~~

 

~~Put that to the bottom of your remote complex.js  
 `window.Complex = Complex;`  
and try again …~~

Ok! In principle it should work like it is as the code is a simple JS code which should automatically assigned to the global context. Maybe open web developer console and look what that say …  
Unfortunately I can’t test now on my mobile. Will have a look tomorrow if the issue is persistent…

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 11, 2023, 7:01pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/5 "2023-08-11T19:01:55Z")

</div>

When I 1st edited out `http:` from “Complex.js” link it just worked for me.  
But strangely I can’t get it working again!

Anyways, I don’t like [https://editor.p5js.org](https://editor.p5js.org) at all; and don’t even have an account there.  
It’s always seemed to me it does too many things behind-the-scene!

Could you re-host it at [My Sketch - OpenProcessing](https://openprocessing.org/sketch/create) using Mode “HTML/CSS/JS”?

[https://Glitch.com](https://Glitch.com) would be even better.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 11, 2023, 7:33pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/6 "2023-08-11T19:33:41Z")

</div>

> [@GoToLoop](#):
>
> Anyways, I don’t like [https://editor.p5js.org](https://editor.p5js.org) at all

It’s a mess especially when you try to do anything on a mobile device … But that’s with nearly all web based code editors 😂

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [August 11, 2023, 9:05pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/7 "2023-08-11T21:05:14Z")

</div>

I don’t use the p5.js editor or any web editor for development, that includes OpenPprocessing. I use Visual Studio Code with TypeScript for anything Javascript and Eclipse for anything Java.

I have used OpenProcessing since 2009 to share my efforts with others. In the beginning I posted Java Applets but now I post p5.js and/or Javascript sketches. I am considering using the p5.js Editor as a secondary outlet for my work.

p5.js editor _seems_ to parse the index.html file and processes all the script tags in `fileReducer.js` and I suspect that it is ignoring request script requests that are not local. 🙁

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 11, 2023, 9:14pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/8 "2023-08-11T21:14:33Z")

</div>

> [@quark](#):
>
> I don’t use the p5.js editor or any web editor for development, that includes OpenProcessing.

OpenProcessing, Glitch and many others are meant to host ready-to-deploy code.  
While [editor.p5js.org](http://editor.p5js.org) is meant for creating code online besides hosting them.

> [@quark](#):
>
> I am considering using the p5.js Editor as a secondary outlet for my work.

IMO, that’s not the best usage for it. Other sites are much better for sharing.  
Try out [Glitch.com](http://Glitch.com) or [GitHub.com](http://GitHub.com).

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 12, 2023, 9:03am UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/9 "2023-08-12T09:03:10Z")

</div>

Hi @quark

quick check about … and several things to do …

**First you need to make your server secure (valid https accessible) to fix that. You can use LetsEncrypt:**

> Mixed Content: The page at ‘[p5.js Web Editor](https://editor.p5js.org/mnse_forum/sketches/-bZbdy0r_)’ was loaded over HTTPS, **but requested an insecure script ‘[https://lagers.org.uk/libs/\_files/math/complex.js](https://lagers.org.uk/libs/_files/math/complex.js)’. This request has been blocked; the content must be served over HTTPS.**

**Second is most probably to also allow cross origin access.**

Access to script at ‘[https://xxx/complex.js](https://xxx/complex.js)’ from origin ‘[https://preview.p5js.org](https://preview.p5js.org)’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

if you use apache server check if headers module are enabled

```auto
apachectl -M | grep headers_module

```

if not install and restart

```auto
sudo a2enmod headers

```

Afterwards make a `.htaccess` in the directory of your script. should be not on root (do ie js/complex.js) and set it in the js directory with content.

```auto
<FilesMatch "\.(js)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

```

and restart apache

```auto
sudo systemctl restart apache2

```

**Afterwards it should work!** Tested it from my server and it runs in the p5js webeditor successfully …🙂

**Ahh! One thing more. load the scripts in the correct order in the head section of the html…**

```auto
<head>
    <script src="https://yourserver/js/complex.js"></script> 
    <script src="poly.js"></script>        
    <script src="ellipse.js"></script>
...
</head>

```

Hope that helps …

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [August 12, 2023, 10:50am UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/10 "2023-08-12T10:50:01Z")

</div>

Hi @mnse

Thanks for your time investigating this issue, unfortunately I am unable to test your fix but since you have got it to work I will mark it as a solution 😁

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 13, 2023, 12:42pm UTC](https://discourse.processing.org/t/sketch-tool-linking-js-files-from-another-server/42582/11 "2023-08-13T12:42:44Z")

</div>

@quark, a much better way to distribute your “complex.js” library would be to host it on [GitHub.com](http://GitHub.com).

This way, most CDN links would automatically work. As an example, we can get p5.sound like this:  
[https://cdn.JsDelivr.net/gh/processing/p5.js/lib/addons/p5.sound.js](https://cdn.JsDelivr.net/gh/processing/p5.js/lib/addons/p5.sound.js)

Besides GitHub, [NPMjs.com](http://NPMjs.com) is another excellent deployment option:  
[About the public npm registry | npm Docs](https://docs.npmjs.com/about-the-public-npm-registry)

Let’s say you have a scope name “@lagers” (or maybe “@quark”?):

> **[About scopes | npm Docs](https://docs.npmjs.com/about-scopes/)**
>
> Documentation for the npm registry, website, and command-line interface

Then the package name for your library would be “@lagers/complex” (or “@quark/complex”?).

Also always create a “main: path\_to\_library\_filename” field entry inside your “package.json”.

Doing so allows much shorter CDN bare links that default to the main file of your library:

- [https://cdn.JsDelivr.net/npm/@lagers/complex](https://cdn.JsDelivr.net/npm/@lagers/complex)
- [https://Unpkg.com/@lagers/complex](https://Unpkg.com/@lagers/complex)

P.S.: Those 2 links above don’t exist yet. 🔗 Package “@lagers/complex” needs to be published 1st! 📦