loading...
Cover image for Setup Ubuntu for Javascript coding.

Setup Ubuntu for Javascript coding.

danywalls profile image Dany Paredes ・Updated on ・3 min read

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

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.

https://code.visualstudio.com/download

Extensions

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

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 user.email you@gmail.com
git config --global user.name You Name
Enter fullscreen mode Exit fullscreen mode

Show branch name in terminal

Add these lines in ~/.bashrc file

force_color_prompt=yes
color_prompt=yes
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\]\$ '
else
 PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
fi
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.

[core]
    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.

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
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

Discussion

pic
Editor guide
Collapse
topheman profile image
Tophe

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) :

Collapse
danywalls profile image
Dany Paredes Author

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

Collapse
efleurine profile image
Emmanuel

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

Collapse
ziad696 profile image
ziad696

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πŸ˜…πŸ˜…πŸ˜…

Collapse
ziad696 profile image
ziad696

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