22

I am currently struggling to use skewer-mode in Emacs.

I downloaded and installed skewer-mode via MELPA, so all the dependencies should be inplace.

For testing purposes I even downloaded the boidsjs demo.

I'll open up boids.js, then type M-xrun-skewer (opens up the browser with URL http://127.0.0.1:8080/skewer/demo) and then finally run M-xskewer-mode (-> skewer-mode enabled).

But in the browser nothing happens.

What am I doing wrong?

caisah
  • 4,056
  • 1
  • 23
  • 43
JacksGT
  • 393
  • 2
  • 9
  • As I understand it, skewer provides an interface for evaluation of javascript... Do you actually *evaluate* the content of the `boids.js` buffer? – T. Verron Oct 20 '14 at 18:33
  • I'm loading the current buffer with C-x C-k ("boid.js loaded") and the trying to evaluate with C-x C-e. But it gives me an error that it could not parse the "$"-sign. That is because it did not load the jQuery from the corresponding HTML file (example.html) – JacksGT Oct 20 '14 at 18:44
  • 2
    You need to eval the html file in skewer-html-mode. – Jordon Biondo Oct 20 '14 at 18:45
  • How? `C-x C-k` does not work in `skewer-html-mode` – JacksGT Oct 20 '14 at 18:50

3 Answers3

20

TLDR; You have to start the http server (simple-http) and load your HTML files through it.

For example, let's say you have a HTML file named hello.html and a JS script file named script.js in /home/user/Documents/javascript folder.

hello.html:

<!doctype html>
<html>
<head>
    <!-- Include skewer.js as a script -->
    <script src="http://localhost:8080/skewer"></script>
    <!-- Include my script.js file -->
    <script src="script.js"></script>
</head>
<body>
    <p>Hello world</p>
</body>
</html>

script.js:

alert('hey!');

init.el (or .emacs):

(require 'simple-httpd)
;; set root folder for httpd server
(setq httpd-root "/home/user/Documents/javascript")

It's time to start the server: M-x httpd-start, and open the index.html file in the browser, by visiting http://localhost:8080/hello.html. You should get the alert in the browser and now call skwer-repl.

You can further interact with the browser through the repl. So, everything you evaluate in the repl will be transmitted to the browser. For example if you type console.log('hey!') in the repl, you will get this message in the browser's console.

If you want to interactively modify HTML (e.g. live update HTML tags from emacs), add to your init.el (or .emacs):

(add-hook 'html-mode-hook 'skewer-html-mode)

Now when you are in your .html file you can evaluate tags with C-M-x (skewer-html-eval-tag), and these will be immediately updated in your browser.

Keep in mind that conversely, this also applies to CSS and CSS files.

caisah
  • 4,056
  • 1
  • 23
  • 43
  • 3
    This is really great answer, thanks for posting it. Probably also worth nothing that if you don't want to hardcode the `httpd-root` in your config, you can run `M-x eval-expression` `(setq httpd-root "/path/to/files")` from within emacs at any time. – Cody Reichert Dec 15 '14 at 15:42
  • useless '\' in example html `\ ` (can't edit - edits must be >=6 characters) – kai-dj Sep 18 '18 at 13:36
12

Instead of running the demo, just perform these minimal steps to ensure that everything is working correctly.

  1. Open a new buffer with the name myskewer.js
  2. Enable JS2-mode (a dependency of skewer)
  3. Enable skewer-mode
  4. M-xrun-skewer (a browser opens, go back to myskewer.js)
  5. Type alert("hello"); and hit C-xC-e at the end of that line
  6. Go back to the browser.

You should see an alert box on the page.

Gambo
  • 929
  • 5
  • 14
  • Thank you for your answer! Unfortunately, I'm prompted the error "No collapsable element found at point" – JacksGT Oct 20 '14 at 19:02
  • Sorry, My mistake. `C-x C-e` is the actual keys to push. will edit my answer – Gambo Oct 20 '14 at 19:10
  • That worked! However: How do I tell Skewer to load the HTML, too? (As shown in the demo) – JacksGT Oct 20 '14 at 19:27
  • 1
    @JacksGT Place your downloaded files into `~/public_html` then follow the instructions for "Manual version" at [this](https://github.com/skeeto/skewer-mode#manual-version) link. Once that is done visit http://localhost:8080 in your browser. – Gambo Oct 20 '14 at 19:52
2

In case port 8080 is already in use:

you can configure skewer/simple-httpd to use another port by customizing the httpd-port variable. (M-x customize-variable<ret>httpd-port)

serv-inc
  • 816
  • 6
  • 26