Environment: Tablet (Android 11, 4GB RAM, 8 cores + keyboard with touchpad),
IDE VS Code (code-server 4.7+Volar+Vetur Extended, displayed by Chrome 104) running inside Termux

Steps to get the web browser based IDE VS Code with code-server up and running:

  • Install Termux from F-Droid (terminal emulator and Linux environment app)
    • due to permission issues since android 10 the Termux app on Google Play Store is outdated (reference)
    • security settings on Android: allow installation of apk
    • open Termux console and run shell command pkg update to update all components of termux
  • Install NodeJS inside Termux:
    • pkg install nodejs-lts
      • in my case I got EACCESS errors in /data/data/com.termux […] cacache/tmp which were resolved by temporarily switching from nodejs-lts to nodejs and back again:
        pkg uninstall nodejs-lts
        pkg install nodejs
        • a true solution would be to chown files in tmp dir of npm to the current user:
          • npm get tmp shows the tmp directory of npm
          • id shows user and group id of current user (uid, gid)
          • chown -R 12345:12345 PATH_TO_TMP/tmp/
            chown -R 12345:12345 tmp/
        • but Termux runs as restricted user and cannot change ownership
      • code-server, currently (2022-09), requires nodejs-lts
  • Install dependencies to be able to build code-server
  • Use npm to install on global scope code-server
    • npm install -g code-server –unsafe-permissions (reference)
    • if code-server got installed but does not run because of missing modules (minimist, yauzl, yazl) then cd into /data/data/com.termux/files/usr/lib/node_modules/code-server/lib/vscode and run npm install –legacy-peer-deps (reference)
  • Run code-server
    • code-server
      • either edit $HOME/.config/code-server/config.yaml and set your password
      • or run code-server –auth none (reference)
    • open http://localhost:8080 with your web browser
    • install extensions Volar and Vetur extended from code-server web interface
  • Create a NuxtJS example app (reference)
    • use second session in Termux
      • open a second terminal inside Termux (keyboard shortcuts)ctrl+alt+c creates a new session
        • ctrl+alt+p or ctrl+alt+down arrow goes to previous session
        • ctrl+alt+n or ctrl+alt+up arrow goes to next session
        • ctrl+alt+right arrow opens session menu
        • (left arrow closes it; up/down switches sessions)
    • run yarn create nuxt-app hello-nuxt
      • this command does automatically install required packages
      • when asked:
        use java-script/packager yarn/no UI framework/no modules/no linting/no testing
        render universal (SSR / SSG)/deploy static/jamstack/no version control
      • cd into project directory hello-nuxt and run yarn dev
      • (later use yarn build and yarn start for production version;
        these commands are defined in the scripts section of file package.json.)
    • open http://localhost:3000
    • open project directory $HOME/hello-nuxt with explorer of code-server
      • edit pages/index.vue and save the changes
    • these changes, when saved, are immediately shown at http://localhost:3000
    • use copy and paste to replace index.vue by code of the NuxtJS hello world example code
    • open left pane of code sandbox at hello world example code and copy code of about.vue
    • create file about.vue inside explorer of code-server, paste code and save file

simple-code-editor is another example

  • goto home directory and generate the nuxt framework with command
    yarn create nuxt-app nuxt-example2
    • accept defaults when asked, just press enter, except Deployment target: use Static and no Version control
  • cd into this directory, cd nuxt-example2
  • run npm install simple-code-editor
  • with VS Code
    • hamburger menu on top left corner: File / Open Folder
      use folder nuxt-example2
    • open nuxt.config.js and add the line
      inside the square brackets of modules: section
    • save nuxt.config.js
    • open pages/index.vue and edit the template section:
      • replace <Tutorial/> by
        <CodeEditor value=”console.log(13)” width=”95%”
        :language_selector=”true” :languages=”[[‘cpp’,’C++’], [‘c’, ‘C’]]”></CodeEditor>
      • save this file
      • use right click to delete Components/Tutorial.vue
  • go back to Termux console and run yarn dev
  • watch result with web browser, http://localhost:3000
  • to compile the final version run
    • yarn build
    • yarn generate
  • to show the content of folder dist/ at http://localhost:3000 run
    • yarn start
  • to Download the contents of the dist folder use VS Code
    • click on refresh in explorer “…”
    • right click on dist folder and select Download (only available with desktop browser; see ssh port forwarding below)
    • choose the target folder and confirm
  • to copy the dist folder to Android Documents folder (reference)
    • run termux-setup-storage
    • cp -R dist /sdcard/Documents/
    • mv /sdcard/Documents/dist/ /sdcard/Documents/code-editor2
  • this folder may be delivered by almost any simple webserver, e.g. Simple HTTP Server app on Android

Sometimes it is more comfortable to use a desktop web browser, which is possible by port forwarding with ssh.

  • open Termux console and install ssh by running pkg install openssh
  • edit /data/data/com.termux/files/usr/etc/ssh/sshd_config, e.g. with editor nano
    • add the line
      AllowTcpForwarding yes
  • use command whoami to display the linux user name used by android, e.g. u0_a250
  • set a password for this user with command passwd
  • make sure the android tablet is connected to local wifi and display the ip address with ifconfig
  • start sshd with command sshd (sshd of Termux listens on port 8022)
  • on the desktop pc run
    • ssh -p8022 -L3000:localhost:3000 -L8080:localhost:8080 u0_a123@
      (replace u0_a123 with correct username and with correct ip address)
    • open http://localhost:8080 and http://localhost:3000 with web browser

Leave a Reply