web dev environment setup

Question

I wish to setup a web dev environment with emacs, I search it and some post looks like a little bit old. I do not want it very professional but basic web dev is enough such as edit javascript and update output to browser, and see debug console from browser etc.

Any simple setup for basic web dev?

Have you tried anything from the old posts you mentioned? What is not working? — Dan, Sep 30 '21 at 23:22
Simply use lsp. I am not sure how much work it is to install and configure on vanilla emacs, but if you want to get going quickly, in an amazing configuration, then use Spacemacs and simply install the javascript and lsp layers (if you prefer Emacs keybindings than simply configure it). After that you will be good to go, just look up what is your major-mode leader key. — dalanicolai, Oct 02 '21 at 07:54
You could also check out other starter configurations like Doom or Prelude, but I do not have much experience with those. — dalanicolai, Oct 02 '21 at 07:55
I try js2-mode, but it has been marked "Available Obsolete from melpa" in melpa. — lucky1928, Oct 09 '21 at 22:28

score 2 · Answer 1 · edited Jun 29 '23 at 12:19

Install skewer-mode and js2-mode, then following below work flow:

Add below config into init.el:

    (add-hook 'js2-mode-hook 'skewer-mode)
    (add-hook 'css-mode-hook 'skewer-css-mode)
    (add-hook 'html-mode-hook 'skewer-html-mode)
    (require 'simple-httpd)
    ;; set root folder for httpd server
    (setq httpd-root default-directory)

Start Emacs from one directory, say /home/user/demo.
Create index.html and script.js. index.html must include below line to communicate with Chrome: <script src="/skewer"></script>
Open Emacs with script.js, then run M-x httpd-start to start HTTP server
Open Chrome with URL http://localhost:8080/index.html, then open debug console.
In Emacs Javascript, press C-c C-k to send current buffer to Chrome browser.

web dev environment setup

1 Answers1