DEV Community

Cover image for Setup Ubuntu for Javascript coding.
Dany Paredes
Dany Paredes

Posted on • Updated on

Setup Ubuntu for Javascript coding.

Sometimes I reset Ubuntu sandbox and setup again everything is not a easy tasks, this is my list of my apps, packages, extensions for Setup.

My development box is focus on Javascript (Angular/Typescript ) and Ubuntu (but can works in OSX).

You can just copy and paste the code to install or configure your apps.


Node is a required runtime for Javascript development, Ubuntu apt install a old version, Then I'm using the n package to upgrade to last stable version.

sudo apt update
sudo apt install nodejs
sudo apt install npm
sudo npm install -g n
sudo n stable
Enter fullscreen mode Exit fullscreen mode

Fix access permission for NPM

Thanks to @thope feedback, before install npm package, please fix use sudo permissions.

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile
Enter fullscreen mode Exit fullscreen mode

You can read about here

Npm packages

@angular/cli CLI for create Angular right out of the box.

Nodemon monitor your javascript code in your terminal with hot reload.

Prettier: Amazing code formatter.

Lite-server: http server for static files with hot reload with network access.

Parcel-bundler: The best bundler for compiler with great support for typescript, sass and more.

Typescript: The typescript compiler for .ts files.

@ngxs/cli: CLI for ngxs state management.

npm i -g typescript
npm i -g @angular/cli
npm i -g nodemon
npm i -g prettier
npm i -g parcel-bundler
npm i -g lite-server
npm i -g typescript
npm i -g @ngxs/cli
Enter fullscreen mode Exit fullscreen mode

Visual Studio Code

One of the most used code editors is VS Code.


My list of extensions for code to use with VSCode, you can install copy and paste in your terminal.

code --install-extension codezombiech.gitignore
code --install-extension dbaeumer.vscode-eslint
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension eamodio.gitlens
code --install-extension EditorConfig.EditorConfig
code --install-extension eg2.vscode-npm-script
code --install-extension esbenp.prettier-vscode
code --install-extension fiazluthfi.bulma-snippets
code --install-extension johnpapa.angular-essentials
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vsliveshare.vsliveshare-pack
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension thenikso.github-plus-theme
code --install-extension zhuangtongfa.material-theme
Enter fullscreen mode Exit fullscreen mode


Git is the default versioning system, but I like see the branch name in my terminal and also write my commits messages with VSCode.

sudo apt-get install git
git config --global
git config --global You Name
Enter fullscreen mode Exit fullscreen mode

Show branch name in terminal

Add these lines in ~/.bashrc file

parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
if [ "$color_prompt" = yes ]; then
 PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[01;31m\]$(parse_git_branch)\[\033[00m\]\$ '
 PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
unset color_prompt force_color_prompt
Enter fullscreen mode Exit fullscreen mode

Commit message with VSCode

Add these line in .gitconfig to configure for use vscode for write commits.

    editor = code --wait
[difftool "vscode"]
    cmd = code --wait --diff $LOCAL $REMOTE
Enter fullscreen mode Exit fullscreen mode

Chrome browser

By default, Ubuntu comes with Firefox, but install Google Chrome is so easy.

sudo dpkg -i google-chrome-stable_current_amd64.deb
Enter fullscreen mode Exit fullscreen mode

My Chrome extensions.

JSON Viewer: beutify jsons responses.

VisBug: Edit your page easy in DOM.
Augury: Angular components debugger.

Redux devtools:Help to debug actions, state for redux and ngxs.

Angular State inspector: Read state of properties and components.

That's it!

Hopefully, that will give you a bit of help for setup your dev box machine. If you miss something leave a comment or share it!

Photo by Andrik Langfield

Top comments (5)

topheman profile image

Please avoid using sudo to install npm and npm packages. Not only will you end up with permissions issues but you will put your computer at risk by doing so.

On your development machine, you should use a node package manager such as nvm (or others).

Sources / Explanations (from the npm docs) :

danywalls profile image
Dany Paredes • Edited

Thanks! I added these steps to avoid use sudo! :D

efleurine profile image

I will look into those vscode package may be I can find a new one.

Personally I prefer to use tools like nvm so I can install different node version on my computer because different tools might require different node version.

Thanks for the sharing

ziad696 profile image

Nice article, ez to understand. Can u make a post, about setup my ubuntu server for JavaScript app?๐Ÿ˜…๐Ÿ˜…๐Ÿ˜… Because that's what I wanna do build a server for JavaScript app, when I don't have sure knowledge about that, but should do if for the company๐Ÿ˜…๐Ÿ˜…๐Ÿ˜…

ziad696 profile image

I mean it is enough just node, and express, and database I just wanna use maridb for now so I gonna also install lamp