Differences between revisions 1 and 15 (spanning 14 versions)
Revision 1 as of 2018-09-02 20:13:22
Size: 11192
Editor: ?Average-User-Prototype
Comment: draft: page for info and guides on software/web development with Debian
Revision 15 as of 2019-03-15 08:01:04
Size: 3055
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
'''THIS PAGE IS A DRAFT''' '''This page is under construction'''
Line 3: Line 3:
This page helps with web development under Debian. It lists and recommends tools (for being FOSS and/or efficient and/or secure) which could be used, describes how to set them up and how to properly configure and use them. Web development involves creating web pages statically and dynamically. However modern web mostly designed with dynamic and responsiveness in mind. Both client and server side development are required to create and host a complete web domain, from basic HTML, CSS to scripting techniques like JavaScript, and other database technologies (server sided).
Line 5: Line 5:
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 indexes, evaluates and aggregates tools and information scattered across the web. This page shows how to install basic tools required for client-side (frontend) Web Development and a few optional tools for making life easier. We will make extensive use of DebianPackageManagement here. So please make sure you read that first.
Line 7: Line 7:
##and with running Debian servers. [[WebServers]] [[Apache]] == Tools required: ==
Line 9: Line 9:
<<TableOfContents()>> Usually, the following tools are required to create a complete website. They are usually involving
Line 11: Line 11:
== Sandboxing and software distribution ==
 * Sandbox applications with firejail:<<BR>>{{{git clone https://github.com/netblue30/firejail.git}}}<<BR>>
{{{cd firejail}}}<<BR>>
{{{export CC=/usr/local/bin/gcc-6}}}<<BR>>
{{{./configure && make && sudo make install-strip}}}<<BR>>
 * A text editor (For writing and modifying code)
 * A Web Browser (Firefox probably included)
 * A vector graphics editor (Optional, for designing site logos, etc)
 * A VCS (optional, helps you to be more organized)
Line 17: Line 16:
 * Learn about [[Flatpak]] and [[https://flathub.org/home|Flathub]].<<BR>>[[https://flatpak.org/setup/Debian/|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.
 * 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).
Various frameworks, templates and libraries and more!
Line 20: Line 18:
== Documentation ==
 * Wiki such as MediaWiki: https://www.mediawiki.org/wiki/Manual:Running_MediaWiki_on_Debian_or_Ubuntu
== Installing a text editor ==
Line 23: Line 20:
== Issue management ==
 * [[GitLab]]: https://about.gitlab.com/installation/#debian
You can install any text editor of your choice via Debian package manager. We use geany here as an example text editor. There is Nano, which probably preinstalled on your system. Some people prefer vim or emacs etc. Vim and emacs require a steep learning curve, but very useful in the long run. You can install geany by:
Line 26: Line 22:
== Collaborative programming ==
 * Git such as GitLab:
 * See Tox under ''Tools''
{{{ $ sudo apt install geany }}}
Line 30: Line 24:
== Desktop and mobile applications ==
 * You can use [[https://electronjs.org/|Electron]] to build cross platform desktop apps with JavaScript, HTML, and CSS
There are tons of text editors available in Debian. Please see the section TextEditor
Line 33: Line 26:
== IDE == == Installing a Web Browser ==
Line 35: Line 28:
=== Eclipse ===
 * Install<<BR>>https://www.eclipse.org/downloads/packages/release/photon/r/eclipse-ide-javascript-and-web-developers
<<BR>>{{{tar zxf eclipse-inst-linux64.tar.gz}}}<<BR>>
{{{sudo tar zxf eclipse-inst-linux64.tar.gz}}}<<BR>>
{{{cd eclipse-installer}}}<<BR>>
{{{./eclipse-inst}}}
 * If the firejail profile {{{sudo kate /etc/firejail/eclipse.profile}}} looks like this:
{{{include /etc/firejail/globals.local}}}<<BR>>
{{{noblacklist ${HOME}/yourprogrammingfolders/*}}}<<BR>>
{{{noblacklist ${HOME}/.gitconfig}}}<<BR>>
{{{noblacklist ${HOME}/.java}}}<<BR>>
{{{caps.drop all}}}<<BR>>
{{{netfilter}}}<<BR>>
{{{nogroups}}}<<BR>>
{{{nonewprivs}}}<<BR>>
{{{noroot}}}<<BR>>
{{{protocol unix,inet,inet6}}}<<BR>>
{{{seccomp}}}<<BR>>
{{{shell none}}}<<BR>>
{{{private-dev}}}<<BR>>
{{{# private-tmp}}}<<BR>>
{{{# noexec /tmp breaks 'Eclipse'}}}<<BR>>
{{{#noexec /tmp}}}<<BR>>
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
 * [[https://stackoverflow.com/questions/7614612/is-there-an-eclipse-editor-for-sasss-scss-files-or-syntax-coloring-plugin/12322531#12322531|Enable syntax-coloring for scss files]]
 * [[https://stackoverflow.com/a/34965851/3424416|Make scss files compile automatically to css]]
You definitely need a web browser to test code via HTML and DOM (Document Object Model). You can install it via apt as below:
Line 65: Line 30:
=== NetBeans === {{{ $ sudo apt install firefox-esr }}}
Line 67: Line 32:
=== PhpStorm ===
 * Install snapd: {{{sudo apt install snapd}}}
 * Edit snap.profile: {{{sudo kate /etc/firejail/snap.profile}}} so it looks like this:<<BR>>
{{{include /etc/firejail/disable-common.inc}}}<<BR>>
{{{include /etc/firejail/disable-passwdmgr.inc}}}<<BR>>
{{{include /etc/firejail/disable-programs.inc}}}<<BR>>
{{{whitelist ${HOME}/snap}}}<<BR>>
{{{whitelist ${HOME}/.PhpStorm2018.2/}}}<<BR>>
{{{include /etc/firejail/whitelist-common.inc}}}<<BR>>
##2018.2
 * Install PhpStorm: {{{sudo firejail --profile=/etc/firejail/snap.profile snap install phpstorm --classic}}}<<BR>>
 * Update it: {{{sudo firejail snap refresh}}}<<BR>>
 * Run it: {{{firejail --profile=/etc/firejail/phpStorm.profile /snap/bin/phpstorm}}}
 * Create a launch icon
The latest version of "Mozilla Firefox" also can be obtained from [[https://www.mozilla.org/en-US/firefox|Mozilla Firefox page]], which require manually unpack the tarball and clicking the executable file named "firefox".
Line 82: Line 34:
== Browser ==
 * Firefox-ESR is in Debian's repositories. Firejail has a pre-configured profile for it. You could add {{{whitelist /home/USERNAME/node_modules/}}} to it.
 * Chromium is in Debian's repositories. It's firejail profile could look like this:<<BR>>
{{{include /etc/firejail/chromium.local}}}<<BR>>
{{{include /etc/firejail/globals.local}}}<<BR>>
{{{noblacklist ${HOME}/.cache/chromium}}}<<BR>>
{{{noblacklist ${HOME}/.config/chromium}}}<<BR>>
{{{noblacklist ${HOME}/.config/chromium-flags.conf}}}<<BR>>
{{{noblacklist ${HOME}/.pki}}}<<BR>>
{{{include /etc/firejail/disable-common.inc}}}<<BR>>
{{{include /etc/firejail/disable-devel.inc}}}<<BR>>
{{{include /etc/firejail/disable-programs.inc}}}<<BR>>
{{{mkdir ${HOME}/.cache/chromium}}}<<BR>>
{{{mkdir ${HOME}/.config/chromium}}}<<BR>>
{{{mkdir ${HOME}/.pki}}}<<BR>>
{{{whitelist ${DOWNLOADS}}}}<<BR>>
{{{whitelist /home/USERNAME/node_modules/}}}<<BR>>
{{{whitelist ${HOME}/.cache/chromium}}}<<BR>>
{{{whitelist ${HOME}/.config/chromium}}}<<BR>>
{{{whitelist ${HOME}/.config/chromium-flags.conf}}}<<BR>>
{{{whitelist ${HOME}/.pki}}}<<BR>>
{{{include /etc/firejail/whitelist-common.inc}}}<<BR>>
{{{include /etc/firejail/whitelist-var-common.inc}}}<<BR>>
{{{caps.keep sys_chroot,sys_admin}}}<<BR>>
{{{netfilter}}}<<BR>>
{{{nogroups}}}<<BR>>
{{{shell none}}}<<BR>>
{{{#disable-mnt}}}<<BR>>
{{{# private-bin chromium,chromium-browser,chromedriver}}}<<BR>>
{{{private-dev}}}<<BR>>
{{{# private-tmp - problems with multiple browser sessions}}}<<BR>>
{{{noexec ${HOME}}}}<<BR>>
{{{noexec /tmp}}}<<BR>>
Other recommended option is Chromium, which "Google" ripped off with their own branding name “Chrome”. You can install it via Debian package manager too.
Line 116: Line 36:
== NPM ==
##* Install the latest node after adding the repository:<<BR>>{{{curl -sL https://deb.nodesource.com/setup_10.x | bash -}}}<<BR>>{{{sudo apt-get install -y nodejs}}}
 * Install the node package manager (NPM) with NVM using [[https://github.com/creationix/nvm|the install script]]:<<BR>>
{{{curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash}}}<<BR>>
{{{export NVM_DIR="$HOME/.nvm"}}}<<BR>>
{{{[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm}}}<<BR>>
{{{command -v nvm}}}<<BR>>
{{{nvm install node}}}<<BR>>
{{{nvm use node}}}<<BR>>
== Installing a Vector Graphics Editor ==
Line 126: Line 38:
##transclude code mini-snippets from GitHub? like GIMP, or Inkscape to make images for your web pages.
Line 128: Line 40:
== Web frameworks == {{{ $ sudo apt install gimp inkscape }}}
Line 130: Line 42:
=== Laravel ===
''(Needs to be tested)''
Line 133: Line 43:
{{{sudo wget https://github.com/laravel/laravel/archive/v5.5.28.zip}}}<<BR>>
{{{sha256sum v5.5.28.zip}}}<<BR>>
{{{unzip v5.5.28.zip}}}<<BR>>
{{{cd laravel-5.5.28/}}}<<BR>>
{{{sudo mkdir /var/www/html/laravel-5.5.28/vendor}}}<<BR>>
{{{sudo mkdir /var/www/html/laravel-5.5.28/vendor/symfony}}}<<BR>>
{{{sudo mkdir /var/www/html/laravel-5.5.28/vendor/symfony/thanks}}}<<BR>>
{{{chown -R www-data.www-data /var/www/html/laravel}}}<<BR>>
{{{sudo chmod -R 755 /var/www/html/laravel-5.5.28/}}}<<BR>>
{{{sudo su www-data}}}<<BR>>
{{{composer config}}}<<BR>>
{{{sudo chown -R username.username /var/www/html/laravel-5.5.28/}}}<<BR>>
{{{composer install}}}<<BR>>
{{{sudo chown -R www-data.www-data /var/www/html/laravel-5.5.28/}}}<<BR>>
{{{sudo chmod -R 755 /var/www/html/laravel-5.5.28/}}}<<BR>>
{{{sudo cp .env.example .env}}}<<BR>>
{{{sudo chown -R www-data.www-data .env}}}<<BR>>
{{{sudo php artisan key:generate}}}<<BR>>
{{{sudo service apache2 restart}}}<<BR>>
{{{sudo php artisan make:auth}}}<<BR>>
{{{php artisan migrate}}}<<BR>>
{{{sudo kate .env}}}<<BR>>
{{{sudo php artisan make:migration create_links_table --create=links}}}<<BR>>
{{{sudo php artisan migrate}}}<<BR>>
{{{php artisan serve}}}<<BR>>
{{{sudo mysqladmin -u root -p status}}}<<BR>>
{{{sudo mysql -u root}}}<<BR>>
{{{sudo php artisan migrate}}}<<BR>>
{{{sudo kate /var/www/html/laravel-5.5.28/app/Providers/AppServiceProvider.php}}}<<BR>>
{{{sudo php artisan migrate}}}<<BR>>
{{{php artisan tinker}}}<<BR>>
{{{sudo php artisan migrate}}}<<BR>>
{{{php artisan migrate:fresh}}}<<BR>>
{{{sudo php artisan make:model --factory Link}}}<<BR>>
{{{sudo kate /var/www/html/laravel-5.5.28/database/factories/LinkFactory.php}}}<<BR>>
{{{sudo php artisan make:seeder LinksTableSeeder}}}<<BR>>
{{{sudo kate /var/www/html/laravel-5.5.28/database/seeds/LinksTableSeeder.php}}}<<BR>>
{{{sudo kate /var/www/html/laravel-5.5.28/database/seeds/DatabaseSeeder.php}}}<<BR>>
{{{sudo php artisan migrate:fresh --seed}}}<<BR>>
{{{php artisan tinker}}}<<BR>>
{{{sudo kate /var/www/html/laravel-5.5.28/routes/web.php}}}<<BR>>
{{{sudo kate /var/www/html/laravel-5.5.28/resources/views/welcome.blade.php}}}<<BR>>
== Installing a version control system ==
Line 176: Line 45:
=== VueJs ===
{{{cd project-directory}}}<<BR>>
{{{npm install vue-cli vue vue-resource}}}<<BR>>
{{{vue init webpack my-project}}}<<BR>>
{{{npm run start}}}<<BR>>
##npm run dev
A version control system aka VCS is handy because it allows you to keep a history of your changes - which in turn gives you the freedom to experiment because you know you can always get back to a previous working version. However, this guide is out of scope on how to use a VCS. You can learn about VCS from [[https://en.wikipedia.org/wiki/Version_control| here]].
Line 183: Line 47:
== NTP ==
sudo apt-get install ntp<<BR>>
ntpq -p<<BR>>
add firewall rules<<BR>>
sudo dpkg-reconfigure tzdata<<BR>>
...
Git is one of those distributed revision/version control and source code management system with an emphasis on speed. You can install git via the package manager
Line 190: Line 49:
== IDS, log-scanning, vulnerability-protection and server-management ==
##postfix
##lynis
{{{ $ sudo apt install git }}}
Line 194: Line 51:
=== Webmin ===
{{{sudo kate /etc/apt/sources.list}}} and add: {{{deb https://download.webmin.com/download/repository sarge contrib}}}<<BR>>
Teaching about git is beyond the scope of this tutorial. You can learn how to use Git from [[https://git-scm.com/docs/gittutorial|here]]
Line 197: Line 53:
{{{wget http://www.webmin.com/jcameron-key.asc}}}<<BR>>
{{{sudo apt-key add jcameron-key.asc}}}<<BR>>
{{{sudo apt-get install apt-transport-https}}}<<BR>>
{{{sudo apt-get update}}}<<BR>>
{{{sudo apt-get install webmin}}}<<BR>>
{{{sudo kate /etc/webmin/miniserv.conf}}}<<BR>>
{{{sudo service webmin restart}}}<<BR>>

== REST client ==
{{{echo "deb https://dl.bintray.com/getinsomnia/Insomnia /" | sudo tee -a /etc/apt/sources.list.d/insomnia.list}}}<<BR>>
{{{wget --quiet -O - https://insomnia.rest/keys/debian-public.key.asc | sudo apt-key add -}}}<<BR>>
{{{sudo apt-get update}}}<<BR>>
{{{sudo apt-get install insomnia}}}<<BR>>
{{{sudo kate /etc/firejail/insomnia.profile}}}<<BR>>
should look like this:<<BR>>
{{{include /etc/firejail/globals.local}}}<<BR>>
{{{include /etc/firejail/disable-common.inc}}}<<BR>>
{{{include /etc/firejail/disable-passwdmgr.inc}}}<<BR>>
{{{include /etc/firejail/disable-programs.inc}}}<<BR>>
{{{caps.drop all}}}<<BR>>
{{{netfilter}}}<<BR>>
{{{nogroups}}}<<BR>>
{{{noroot}}}<<BR>>
{{{seccomp}}}<<BR>>
{{{shell none}}}<<BR>>
Then you can run: {{{firejail insomnia}}}<<BR>>
and add an application icon.

== Tools ==

=== Tox ===
You can use it for screen sharing, instant messaging, voice calls, video calls, file sharing and groups.

=== GIMP ===
Image manipulation software that's a FOSS alternative to Photoshop.

=== Inkscape ===
For vector graphics, FOSS alternative to CorelDraw and Adobe Illustrator.

=== VirtualBox ===
{{{deb http://download.virtualbox.org/virtualbox/debian stretch contrib}}}

== See also ==
 * [[Network]]
 * [[SetupGuides/SecurePersonalComputer]]
 * [[LaMp]]
 * [[WordPress]]
 * [[LetsEncrypt]]
 * [[SSH]]

== External links ==
 * https://startbootstrap.com/
 * https://jsfiddle.net/
 * https://developers.google.com/web/progressive-web-apps/checklist
----
CategoryDeveloper

This page is under construction

Web development involves creating web pages statically and dynamically. However modern web mostly designed with dynamic and responsiveness in mind. Both client and server side development are required to create and host a complete web domain, from basic HTML, CSS to scripting techniques like ?JavaScript, and other database technologies (server sided).

This page shows how to install basic tools required for client-side (frontend) Web Development and a few optional tools for making life easier. We will make extensive use of DebianPackageManagement here. So please make sure you read that first.

Tools required:

Usually, the following tools are required to create a complete website. They are usually involving

  • A text editor (For writing and modifying code)
  • A Web Browser (Firefox probably included)
  • A vector graphics editor (Optional, for designing site logos, etc)
  • A VCS (optional, helps you to be more organized)

Various frameworks, templates and libraries and more!

Installing a text editor

You can install any text editor of your choice via Debian package manager. We use geany here as an example text editor. There is Nano, which probably preinstalled on your system. Some people prefer vim or emacs etc. Vim and emacs require a steep learning curve, but very useful in the long run. You can install geany by:

 $ sudo apt install geany 

There are tons of text editors available in Debian. Please see the section TextEditor

Installing a Web Browser

You definitely need a web browser to test code via HTML and DOM (Document Object Model). You can install it via apt as below:

 $ sudo apt install firefox-esr 

The latest version of "Mozilla Firefox" also can be obtained from Mozilla Firefox page, which require manually unpack the tarball and clicking the executable file named "firefox".

Other recommended option is Chromium, which "Google" ripped off with their own branding name “Chrome”. You can install it via Debian package manager too.

Installing a Vector Graphics Editor

like GIMP, or Inkscape to make images for your web pages.

 $ sudo apt install gimp inkscape 

Installing a version control system

A version control system aka VCS is handy because it allows you to keep a history of your changes - which in turn gives you the freedom to experiment because you know you can always get back to a previous working version. However, this guide is out of scope on how to use a VCS. You can learn about VCS from here.

Git is one of those distributed revision/version control and source code management system with an emphasis on speed. You can install git via the package manager

 $ sudo apt install git 

Teaching about git is beyond the scope of this tutorial. You can learn how to use Git from here


CategoryDeveloper