Blog of spblinux

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
  • pkg install build-essential binutils python libsecret (reference, reference2)
• 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
    “simple-code-editor/nuxt”,
    inside the square brackets of modules: section
  • save nuxt.config.js
  • open pages/index.vue and edit the template section:
    • replace <Tutorial/> by
      <client-only>
      <CodeEditor value=”console.log(13)” width=”95%”
      :language_selector=”true” :languages=”[[‘cpp’,’C++’], [‘c’, ‘C’]]”></CodeEditor>
      </client-only>
    • 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@192.168.123.123
    (replace u0_a123 with correct username and 192.168.123.123 with correct ip address)
  • open http://localhost:8080 and http://localhost:3000 with web browser