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
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
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
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
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
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
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
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
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)
Please avoid using
sudoto 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) :
Thanks! I added these steps to avoid use sudo! :D
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
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😅😅😅
I mean it is enough just node, and express, and database I just wanna use maridb for now so I gonna also install lamp