THIS PAGE IS A DRAFT
This page helps with web development under Debian. It lists and recommends tools which could be used, describes how to set them up and how to properly configure and use them.
It aims to help with software development under Debian in general, with development of cross-platform (Debian compatible) software and to provide up to date step-by-step guides for optimal convenience, efficiency and security even for beginners. It is a continuously improving guide which also indexes, evaluates and aggregates tools and information scattered across the web.
Debian is about 100% free software. About using FOSS, developing FOSS and developing with FOSS. This page aims to help people with the right choices and options, useful information and up-to-date step-by-step guides. Eventually all parts of the software development stacks should be free software with open governance by communities of developers. These stacks (including everything from IDE to software distribution tools) should be efficient/convenient, up-to-date, secure, performant, easy to learn/use and cross-platform (for GNU/Linux support, maximum audience/availability and time-efficiency).
It is recommended to have the latest Debian stable with KDE installed as described in SetupGuides/SecurePersonalComputer. Every guide on this page should not assume anything else than that to be pre-configured or pre-installed or any commands to be run by the user beforehand. All guides should be as simple and precise as possible and are made for development with the frameworks listed in the first section.
The ultimate goal of this page is becoming a setup-GUI that is using wiki-text and allows even newcomers to get started developing useful, linux-compatible, modern FOSS very quickly using only FOSS under Debian.
Contents
- Cross-platform-/Universal-/Web-app frameworks
- Debian development
- KDE development
- Sandboxing and software distribution
- Documentation
- Issue management
- Git+SSH
- IDE
- Browser
- NPM
- Frameworks
- NTP
- IDS, log-scanning, vulnerability-protection and server-management
- REST client (Insomnia)
- Designs
- Other tools
- FTP
- SSL
- See also
- External links
Cross-platform-/Universal-/Web-app frameworks
Use the Quasar Framework to build cross platform desktop, mobile and web apps with Vue.js (Nuxt.js support is coming in a later version) from a single code-base in ?JavaScript.
Use Qt to build native cross platform desktop and mobile apps and help with developing KDE and GNU/Linux packages.
Use Nuxt.js for Vue.js to develop websites and web-apps.
Debian development
KDE development
Sandboxing and software distribution
Sandbox applications with firejail
After you installed it (sudo apt-get install firejail) make sure that the profile files exist under /etc/firejail/.Learn about ?flatpak and flathub.
Install flatpak. There might also be a GUI frontend for Flatpak packages such as the Software Manager in Linux Mint which has a category dedicated to these packages. Flatpak is a system for building, distributing, and running sandboxed desktop applications on Linux.
There are also Snappy (snaps) and ?AppImage but those are not as good as Flatpak. For example ?AppImage does not sandbox and has larger application files; Snappy is run centrally by Canonical (parent company of Ubuntu).
Documentation
- Wiki
MediaWiki - has the most features, it's the one used by Wikimedia/Wikipedia
Wiki.js - for smaller wikis
TiddlyWiki - an alternative to Wiki.js
Issue management
You might want to set up a new email for your developer-email. Use ProtonMail. You can configure all your mails to land in a single inbox.
Git+SSH
Configure your IDE and GitLab to use SSH keys.
If you haven't got a SSH key yet create one like this:
ssh-keygen -o -t rsa -C "e@mail" -b 4096
copy contents of: kate ~/.ssh/id_rsa.pub
Run: eval $(ssh-agent)
ssh-add or ssh-add name if your key is not named id_rsa and located under ~/.ssh
Go to https://gitlab.com/profile/keys and add the key by pasting in the public key you copied to clipboard earlier.
Run: git config --global user.name "DEVNAME"
git config --global user.email "e@mail"For setting up git you should have KDE Wallet for your developer name and a GPG key. For this first create the GPG key if you haven't yet: open seahorse (entitled "Password and Keys") click the + button and select PGP key, enter your developer-name and developer-email, select Advanced Options and set the Key strength to 4096 bit and click Create. Wait until your key appears. This could take a couple of minutes. Moving your mouse can speed it up. Then open KDE Wallet and make sure "Enable KDE Wallet subsystem" is enabled. When it later asks you to create a KDE wallet select GPG key and enter its password.
Add iptables rules sudo kate /etc/iptables/rules.v4 and add:
#SSH -A INPUT -p tcp -s 35.231.145.151 --dport 22 -j ACCEPT -A INPUT -p tcp -s 35.231.145.151 --sport 22 -j ACCEPT -A INPUT -p tcp -s gitlab.com --dport 22 -j ACCEPT -A INPUT -p tcp -s gitlab.com --sport 22 -j ACCEPT
#SSH -A OUTPUT -p tcp -d 35.231.145.151 --dport 22 -j ACCEPT -A OUTPUT -p tcp -d 35.231.145.151 --sport 22 -j ACCEPT -A OUTPUT -p tcp -d gitlab.com --dport 22 -j ACCEPT -A OUTPUT -p tcp -d gitlab.com --sport 22 -j ACCEPT
Then run: sudo iptables-restore < /etc/iptables/rules.v4
IDE
The best modern IDEs are likely ?PhpStorm and Visual Studio Code (Codium). ?PhpStorm is proprietary, closed-source and costs money. VSCode (VSCodium) is FOSS but largely run by Microsoft.
For developing with Qt you use QtCreator as IDE. For C/C++ development you could use KDevelop.
Also see: ProgrammingApplication.
Eclipse
tar zxf eclipse-inst-linux64.tar.gz sudo tar zxf eclipse-inst-linux64.tar.gz cd eclipse-installer ./eclipse-inst
If the firejail profile sudo kate /etc/firejail/eclipse.profile looks like this:
include /etc/firejail/globals.local noblacklist ${HOME}/yourprogrammingfolders/* noblacklist ${HOME}/.gitconfig noblacklist ${HOME}/.java caps.drop all netfilter nogroups nonewprivs noroot protocol unix,inet,inet6 seccomp shell none private-dev # private-tmp # noexec /tmp breaks 'Eclipse' #noexec /tmp
You can run eclipse like this: firejail --profile=/etc/firejail/eclipse.profile /eclipse/locationofeclipse
- Create a launch icon
- Check for updates
https://stackoverflow.com/questions/5531402/newbie-in-eclipse-i-dont-have-dynamic-web-project-i-am-under-linux-ubuntu http://www.gulland.com/wp/?p=31
KDevelop
Install from the package manager. sudo apt-get install kdevelop
PhpStorm
Installation
Install snapd: sudo apt install snapd
Edit snap.profile: sudo kate /etc/firejail/snap.profile and add this line:
whitelist ${HOME}/.PhpStorm2018.2/
Create phpStorm.profile: sudo kate ~/.config/firejail/.profile so it looks like this:
# Firejail profile for phpstorm include /etc/firejail/snap.local # Persistent global definitions include /etc/firejail/globals.local whitelist ${HOME}/Projects/SoftwareDevelopment/PhpStorm/ whitelist ${HOME}/snap whitelist ${HOME}/.PhpStorm2018.2/ whitelist ${HOME}/.nvm/ whitelist ${HOME}/.ssh noblacklist ${HOME}/.gitconfig noblacklist ${HOME}/.java noblacklist ${HOME}/.ssh noblacklist /tmp/ssh-* noblacklist /etc/ssh include /etc/firejail/disable-common.inc include /etc/firejail/disable-programs.inc include /etc/firejail/disable-passwdmgr.inc include /etc/firejail/whitelist-common.inc caps.drop all netfilter nogroups shell none private-dev
Create this empty folder in the home directory (depends on the current version number): mkdir ~/.PhpStorm2018.2
Install ?PhpStorm: sudo firejail --profile=/etc/firejail/snap.profile snap install phpstorm --classic
Update it: sudo firejail snap refresh
Run it: firejail /snap/bin/phpstorm
Download the phpstorm icon, right click the bottom left KDE icon -> Edit Applications... and create a launch icon and then start it
VCS -> enable version history integration
View -> Tool Windows -> Version control
- Make sure you have completed step Git+SSH
Go the settings -> version control and change "Built-in" to "Native"
Go the settings -> version control -> git -> ssh -> select "private key"
Under Version control -> green arrow on the left you can commit your changes. You now have to enter your ssh key password every time you push to your repository. Use commits until you push. If you want your ssh key password to be cached so you only have to enter it once to push many times there might be a way to get it working with a credentials helper, gnome-keychain or, preferably, seahorse (running ssh-add is not enough).
Configure some shortcuts by: ctrl+shift+s -> keymap. For example change/set the shortcuts for "comment out with block comment", "refactor" and "fix lint problems".
Visual Studio Code (VSCodium)
VSCodium are binary releases of Visual Sudio Code without Microsoft branding, telemetry and licensing. Most likely this is the IDE you want to use.
Binary releases: Manually download and install via dpkg/apt https://github.com/VSCodium/vscodium/releases
To install it via your package-manager add its repository by running:
wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg | sudo apt-key add -
sudo bash -c "echo 'deb https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/repos/debs/ vscodium main' >> /etc/apt/sources.list"
sudo apt-get update
sudo apt-get install vscodiumBecause the firejail package still hasn't been updated for stable you need to run:
cd Downloads
git clone https://github.com/netblue30/firejail.git
sudo cp ~/Downloads/firejail/etc/code.profile ~/.config/firejail/vscodium.profile
sudo kate ~/.config/firejail/vscodium.profile
and modify it so that it looks like this:
# Firejail profile for VS Codium # Persistent local customizations include vscodium.local # Persistent global definitions include globals.local noblacklist ${HOME}/.vscode-oss noblacklist ${HOME}/.config/VSCodium/ whitelist ${HOME}/.vscode-oss whitelist ${HOME}/.config/VSCodium/ #noblacklist ${HOME}/.bashrc #whitelist ${HOME}/.bashrc noblacklist ${HOME}/.ssh noblacklist /tmp/ssh-* noblacklist /etc/ssh noblacklist ${HOME}/.nvm/ whitelist ${HOME}/.nvm/ whitelist ${HOME}/.ssh whitelist ${HOME}/Projects/SoftwareDevelopment/VSCodium include /etc/firejail/disable-common.inc include /etc/firejail/disable-passwdmgr.inc include /etc/firejail/disable-programs.inc caps.drop all #net none #netfilter #nodvd nogroups nonewprivs noroot nosound #notv #nou2f #novideo #protocol unix,inet,inet6,netlink seccomp shell none #private-cache private-dev private-tmp noexec /tmp
- Make sure you have completed step "Git+SSH". Create a new KDE Wallet and use your GPG key created earlier.
In the left select version control and press the dots at the top -> push -> confirm with yes to add an entry to known_hosts, open known_hosts and do a websearch for the hash
Install extensions: eslint, Vetur, Vue.js Extension Pack, Debugger for Firefox, npm. Later you could add some more, like some of these.
- Complete step Nuxt below.
Run: cd ~/Projects/SoftwareDevelopment/VSCodium/PROJECTNAME, npm install
Open http://127.0.0.1:3000/ in firejail-esr.
Debugging
Enable debugging for Node.js: in the left panel select debug, then click on the settings wheel in the upper left, select Node.js and add a launch.json file, there add 1,2:
{ "type": "node", "request": "launch", "name": "Debug nuxt node", "runtimeVersion": "11.1.0", // enter the node version to use (which node displays the version number) "program": "${workspaceRoot}/server/index.js", // "autoAttachChildProcesses": true }
open the Firefox configuration page by entering about:debugging in the address bar and click on Enable debugging of add-ons. Add the following to nuxt.config.js:
module.exports = { configureWebpack: { devtool: 'source-map' } }
Add the following to launch.json:
{ "type": "firefox", "request": "attach", "name": "nuxtjs: firefox", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "port": 6000, "pathMappings": [{ "url": "webpack:///", "path": "${webRoot}/" }] },
Add iptables rules for the debug port. Open http://127.0.0.1:3000/ in that window.
Doesn't really work yet.
Other
There are also ?NetBeans, Aptana Studio and Android Studio but these are not really well-suited for modern web & cross-platform development and aren't convenient. Sublime, Atom, Brackets etc. are more source code editors than IDEs. Atom is made by ?GitHub which is now owned by Microsoft. Vim is FOSS but will never be used by many as it's not modern and convenient. For ?QtCreator see the section "Qt".
Browser
- Firefox-ESR is in Debian's repositories. Firejail has a pre-configured profile for it.
Add the Vue Devtools AddOn. You may also want to add Tree Style Tab and a couple more ?AddOns (such as adblocker) if you haven't yet.
- Press F12
Chromium is in Debian's repositories. You could add the following to its firejail profile:
nogroups shell none private-dev noexec ${HOME} noexec /tmp
Add the Vue Chrome extension
NPM
Install the node package manager (NPM) with NVM using the install script:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
sudo kate ~/.bashrc and append the following lines:
export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
command -v nvm # Close and reopen terminal; this should return "nvm"
nvm install node
nvm use node
export NODE_PATH=$NODE_PATH:`npm root -g` # This sets node's path; you need to set it again when you change your node version; you could also just run npm root -g to see where you installed node to. "nvm intentionally does not set NODE_PATH because [...]" ~https://stackoverflow.com/a/47734737
Frameworks
Qt
Run: sudo apt-get install qtcreator qt5-qmake qt-sdk qt5-default qtbase5-examples qtbase5-doc-html qt5-doc qt5-doc-html qml qtdeclarative5-dev qml-module-qtquick-controls2 qml-module-qtquick-templates2 libqt5quickparticles5
Create a firejail profile: sudo kate ~/.config/firejail/qtcreator.profile with:
# Firejail profile for QtCreator include qtcreator.local # Persistent global definitions include globals.local whitelist ${HOME}/Projects/SoftwareDevelopment/QtCreator/ whitelist ${HOME}/.nvm/ whitelist ${HOME}/.ssh whitelist /usr/share/qt5/* whitelist /usr/lib/x86_64-linux-gnu/qt5/* whitelist ${HOME}/.config/QtProject whitelist ${HOME}/.local/share/data/QtProject/qtcreator whitelist ${HOME}/.gitconfig include /etc/firejail/disable-common.inc include /etc/firejail/disable-passwdmgr.inc include /etc/firejail/disable-programs.inc caps.drop all nogroups nonewprivs noroot protocol unix,inet,inet6,netlink seccomp shell none private-dev private-tmp noexec /tmp
Edit the application menu entry: right click the KDE icon in the bottom left -> Edit Applications... -> under Development set Qt Creator's command to firejail qtcreator %F and run it
Go to Tools -> Options -> Build & Run and set your projects folder to e.g. /home/USERNAME/Projects/Programming/QtCreator, then select the Kits tab, click add and under Qt version select Qt 5[...], give it a name, make it default and click apply.
Select Examples, make sure it says Qt 5[...] in PATH (qt5) in the dropdown and click on one of the examples -> make sure it has e.g. /home/USERNAME/Projects/Programming/QtCreator as the directory set and select Copy project and open to load it. Make sure the kit with qt5 is selected, then click Configure Project. Click the green run button in the bottom left to start the example program. If the application starts and there's no error in the Application Output everything was configured properly.
Create a new project: File -> New File or Project -> Application -> Qt Quick Controls 2 Application -> give it a name and make sure the right directory is selected, click choose and in the last step select Git in the Add to version control dropdown.
- Make sure you completed step Git+SSH
Once everything has loaded go to Tools -> Git -> Remote Repository -> Manage Remotes -> Add -> enter origin as name and the Url on the details page of your GitLab project (git@someserver:/some/path/to/project.git) as URL. Then click fetch. In ?QtCreator's Version Control window it should say "The command "/usr/bin/git" finished successfully." Modify some things in a file within the project. Then go to Tools -> Git -> Local repository -> Commit and set your developer-name as Author and developer-email as Email and add a description of the changes. Then press commit. Note that if your developer-name isn't persisted so you hae to enter it again at the next commit run: git config user.name "developer-name" and git config user.email "developer-email". Go to Tools -> Git -> Remote Repository -> Push, confirm adding gitlab to known_hosts by entering yes to the prompt and then enter your SSH key password. Check if the commit was pushed by checking if it shows in the Activity tab of your GitLab project.
If this doesn't work try running: cd /home/USERNAME/Projects/SoftwareDevelopment/QtCreator/, git init, git add *, git commit, git remote add origin git@someserver:/some/path/to/project.git, git push --set-upstream origin master (instead of the master branch you could also set the development branch)
(Go through Qt for Beginners? & Qt for Android)
Laravel
(Needs to be tested)
sudo wget https://github.com/laravel/laravel/archive/v5.5.28.zip
sha256sum v5.5.28.zip
unzip v5.5.28.zip
cd laravel-5.5.28/
sudo mkdir /var/www/html/laravel-5.5.28/vendor
sudo mkdir /var/www/html/laravel-5.5.28/vendor/symfony
sudo mkdir /var/www/html/laravel-5.5.28/vendor/symfony/thanks
chown -R www-data.www-data /var/www/html/laravel
sudo chmod -R 755 /var/www/html/laravel-5.5.28/
sudo su www-data
composer config
sudo chown -R username.username /var/www/html/laravel-5.5.28/
composer install
sudo chown -R www-data.www-data /var/www/html/laravel-5.5.28/
sudo chmod -R 755 /var/www/html/laravel-5.5.28/
sudo cp .env.example .env
sudo chown -R www-data.www-data .env
sudo php artisan key:generate
sudo service apache2 restart
sudo php artisan make:auth
php artisan migrate
sudo kate .env
sudo php artisan make:migration create_links_table --create=links
sudo php artisan migrate
php artisan serve
sudo mysqladmin -u root -p status
sudo mysql -u root
sudo php artisan migrate
sudo kate /var/www/html/laravel-5.5.28/app/Providers/AppServiceProvider.php
sudo php artisan migrate
php artisan tinker
sudo php artisan migrate
php artisan migrate:fresh
sudo php artisan make:model --factory Link
sudo kate /var/www/html/laravel-5.5.28/database/factories/LinkFactory.php
sudo php artisan make:seeder LinksTableSeeder
sudo kate /var/www/html/laravel-5.5.28/database/seeds/LinksTableSeeder.php
sudo kate /var/www/html/laravel-5.5.28/database/seeds/DatabaseSeeder.php
sudo php artisan migrate:fresh --seed
php artisan tinker
sudo kate /var/www/html/laravel-5.5.28/routes/web.php
sudo kate /var/www/html/laravel-5.5.28/resources/views/welcome.blade.php
Vue.js
cd project-directory
npm install vue-cli vue vue-resource
vue init webpack my-project
npm run start
HTML, CSS, SCSS, JavaScript
- {Organized list of good learning and reference resources}
- ...
- CSS grid + flexbox
UI frameworks
Bootstrap
- When setting up nuxt later on select bootstrap to use bootstrap-vue.
Vuetify
SCSS
npm install sass sass-loader
- In nuxt.config.js add:
css: [ './assets/scss/main.scss' ]
Maybe use nuxt-sass-resources-loader
Vuex
Nuxt.js
nvm use node
npm install -g @vue/cli
cd ~/Projects/SoftwareDevelopment/
npx create-nuxt-app PROJECTNAME
- Go through the setup: select express, a UI framework such as bootstrap, axios and Universal.
Either run npm run dev or click the green play button in vscodium and open http://127.0.0.1:3000/.
Webpack
Nuxt uses webpack. Webpack is an open-source ?JavaScript module bundler that bundles ?JavaScript files for usage in a browser.
- You can change the webpack config in nuxt.config.js in your project folder
All the imports & exports in your project are webpack
Babel
Nuxt uses babel. Babel compiles the latest ?JavaScript like ES6 and ES7 you may use in .vue files into ?JavaScript that can be run on older browsers.
Autoprefixer
https://github.com/nuxt/nuxt.js/issues/103#issuecomment-332585341
https://github.com/nuxt/nuxt.js/issues/846#issuecomment-309196303
Quasar
- Android SDK
zipalign -v 4 <path-to-same-apk-file> ?HelloWorld.apk
NTP
sudo apt-get install ntp
ntpq -p
Add firewall rules:
#OPENNTP 123
-A OUTPUT -p udp -m udp --dport 123 -j ACCEPT
-A OUTPUT -p udp -m udp --sport 123 -j ACCEPT
#OPENNTP 123
-A INPUT -p udp -m udp --dport 123 -j ACCEPT
-A INPUT -p udp -m udp --sport 123 -j ACCEPT
sudo dpkg-reconfigure tzdata
...
IDS, log-scanning, vulnerability-protection and server-management
postfix, lynis
Webmin
sudo kate /etc/apt/sources.list and add: deb https://download.webmin.com/download/repository sarge contrib
wget http://www.webmin.com/jcameron-key.asc
sudo apt-key add jcameron-key.asc
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install webmin
sudo kate /etc/webmin/miniserv.conf
sudo service webmin restart
REST client (Insomnia)
echo "deb https://dl.bintray.com/getinsomnia/Insomnia /" | sudo tee -a /etc/apt/sources.list.d/insomnia.list
wget --quiet -O - https://insomnia.rest/keys/debian-public.key.asc | sudo apt-key add -
sudo apt-get update
sudo apt-get install insomnia
sudo kate ~/.config/firejail/insomnia.profile
could look like this:
include /etc/firejail/insomnia.local include /etc/firejail/globals.local include /etc/firejail/disable-common.inc include /etc/firejail/disable-passwdmgr.inc include /etc/firejail/disable-programs.inc caps.drop all netfilter nogroups noroot seccomp shell none
Then you can run: firejail insomnia
and add an application icon.
Designs
GIMP
Image manipulation software that's a FOSS alternative to Photoshop.
Inkscape
For vector graphics, FOSS alternative to ?CorelDraw and Adobe Illustrator.
Other tools
- Tools for teams to collaborate on software-related projects beyond git, wikis, issue management and tools for designs. Examples are tools for ideation, brainstorming, chatting and testing.
- Tools for user support and remote assistance.
- Other relevant tools.
Tox
You can use it for screen sharing, instant messaging, voice calls, video calls, file sharing and groups.
Telegram
wget https://telegram.org/dl/desktop/linux
cd Downloads
sha256sum tsetup.1.4.3.tar.xz
tar xvf tsetup*.tar.xzcd
sudo mv Telegram/ /opt/
ln -sf /opt/Telegram/Telegram /usr/bin/telegram
sudo ln -sf /opt/Telegram/Telegram /usr/bin/telegram
VirtualBox
deb http://download.virtualbox.org/virtualbox/debian stretch contrib
FTP
sudo apt-get install filezilla
SSL
See also
?Phone
External links
https://developers.google.com/web/progressive-web-apps/checklist
https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive
https://www.debian.org/doc/manuals/debian-reference/ch12.en.html