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?

Improve this question
4
  • 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
    Commented Oct 20, 2014 at 18:33
  • I'm loading the current buffer with <kbd>C-x C-k</kbd> ("boid.js loaded") and the trying to evaluate with <kbd>C-x C-e</kbd>. 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
    Commented Oct 20, 2014 at 18:44
  • 2
    You need to eval the html file in skewer-html-mode.
    – Jordon Biondo
    Commented Oct 20, 2014 at 18:45
  • How? C-x C-k does not work in skewer-html-mode
    – JacksGT
    Commented Oct 20, 2014 at 18:50

3 Answers 3

Reset to default
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.

Improve this answer
2
  • 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
    Commented Dec 15, 2014 at 15:42
  • useless '\' in example html <script src="http://localhost:8080/skewer"></script>\ (can't edit - edits must be >=6 characters)
    – kai-dj
    Commented Sep 18, 2018 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.

Improve this answer
4
  • Thank you for your answer! Unfortunately, I'm prompted the error "No collapsable element found at point"
    – JacksGT
    Commented Oct 20, 2014 at 19:02
  • Sorry, My mistake. C-x C-e is the actual keys to push. will edit my answer
    – Gambo
    Commented Oct 20, 2014 at 19:10
  • That worked! However: How do I tell Skewer to load the HTML, too? (As shown in the demo)
    – JacksGT
    Commented Oct 20, 2014 at 19:27
  • 1
    @JacksGT Place your downloaded files into ~/public_html then follow the instructions for "Manual version" at this link. Once that is done visit localhost:8080 in your browser.
    – Gambo
    Commented Oct 20, 2014 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)

Improve this answer
1
  • This tip should be added to the other answers, but really is useful
    – anquegi
    Commented Sep 14, 2021 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.