kirkage
Posts: 1
Joined: Sat Jun 06, 2015 5:00 am

Web Development on the Pi

Sat Jun 06, 2015 5:28 am

I have a few questions here. So, I've been on my Raspberry Pi and I love it but I do a lot of frontend/backend web design and I want to use my Pi to do so. I've realized it's not the best option I guess seeing how I can't work with many browsers. I also haven't been able to download mobile phone emulators to test my designs. The main thing I've been struggling with is finding a good code editor to use and I've been searching for days for the best one. I've been using gedit and I also like bluefish compared to all the rest. I mostly write PHP, Javascript, jQuery, HTML, and CSS. On Mac OS I use BBedit or TextWrangler, which is hands down my favorite editor ever. And on windows I use UltraEdit. Gedit and bluefish are okay but there is one problem that bugs me so much that I'm still searching for a better editor. Syntax highlighting is limited to one language. I can go through and check if I want PHP, or HTML, CSS, or Javascript, but is there an editor that will just highlight them all? I usually have all these languages in one page especially when I'm throwing up a small quick standalone page. Let me list all my questions that I would like some advice on for Pi web development:

What is the best editor for web development with syntax highlighting for multiple languages at once? Also, is there one where I can open directly from FTP in the program? Usually, On mac/windows I've found "open from FTP" plugins for IDEs if it didn't have it. Maybe there's an editor with plugins with this and also multiple syntax highlighting for the Pi?

What's the best browser to develop with? I like epiphany because it's fast and I can play HTML5 video but the flash plugins I've downloaded don't seem to work and make sites lag. I currently use chromium to develop so I can inspect the code and use the console for javascript but it's kind of slow sometimes. Also, chromium won't play HTML5 video which really is annoying and the flash plugins I've found work sometimes but mostly throw outdated flash errors. And fireweasel seems to be a 3rd option that is useful but the same problems with videos and it seems to quit a lot on me.

I'd love to hear what other web guys are doing out there on their Raspberry Pi's and what suites you the best when doing strictly web development stuff. And I should mention I have the latest Raspberry Pi 2 B+ model running Raspbian with the default desktop environment (because it seems to be the fastest). I have the NOOBs installer on my SD card and tried to install Pidora as well cause that seemed to have some better options for some things but unfortunately it doesn't work on this model of the Pi yet according to another post I read. Anyway, thanks ahead for your suggestions!

enedil
Posts: 66
Joined: Sat Feb 21, 2015 4:22 pm
Location: Toruń, Poland
Contact: Website

Re: Web Development on the Pi

Sat Jun 13, 2015 10:51 pm

Get GitHub Atom.
- What Can a Thoughtful Man Hope for Mankind on Earth, Given the Experience of the Past Million Years?
- Nothing.

Kurt Vonnegut, Cat's Cradle

gkreidl
Posts: 5655
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Web Development on the Pi

Sun Jun 14, 2015 5:51 am

Gedit and bluefish are okay but there is one problem that bugs me so much that I'm still searching for a better editor. Syntax highlighting is limited to one language.
For gedit that's not true. You can have syntax highlighting for different languages in different tabs. gedit selects them by file name extension. If you open a new document, it can't know the language, so start simply by saving it (even if it's still empty).
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

User avatar
rpdom
Posts: 12659
Joined: Sun May 06, 2012 5:17 am
Location: Ankh-Morpork

Re: Web Development on the Pi

Sun Jun 14, 2015 5:54 am

I used to use Gedit when I was running a Gnome2 desktop, but I now use Geany which is an acceptable replacement and doesn't need all the huge gnome libraries :)

ame
Posts: 3172
Joined: Sat Aug 18, 2012 1:21 am
Location: Korea

Re: Web Development on the Pi

Sun Jun 14, 2015 7:26 am

All the cool kids use vi.

User avatar
rpdom
Posts: 12659
Joined: Sun May 06, 2012 5:17 am
Location: Ankh-Morpork

Re: Web Development on the Pi

Sun Jun 14, 2015 7:50 am

ame wrote:All the cool kids use vi.
Well, obviously ;)

I use vi a lot :)

User avatar
r3d4
Posts: 926
Joined: Sat Jul 30, 2011 8:21 am
Location: ./

Re: Web Development on the Pi

Mon Jun 15, 2015 4:23 pm

By default config on the non pi Debian-derivative box im typing from

vi has no html/js syntax highlighting
nano has verry basic html/js syntax highlighting

justsaying
+ it took me a while to remember how to quit vi :oops:

I-thunk SciTE or "Code Browser" should work !
the BIG list is @ /wiki/Comparison_of_text_editors fyi.

Some time ago i added some stuff( eg module doc's browser ) to this https://github.com/coreh/nide nice-IDE



For ftp take a look at ftpFS / curlftpfs
EG
$ mkdir sunet
$ curlftpfs ftp://ftp.sunet.se/ sunet/ # mount remote ftp on to a folder
$ cd sunet/
$ ls -l
total 0
Dr-xr-xr-x 3 root root 96 Feb 23 2004 bin
dr-xr-xr-x 2 root root 72 Mar 2 2004 dev
dr-xr-xr-x 2 root root 48 Feb 23 2004 etc
dr-xr-xr-x 2 root root 120 Feb 23 2004 lib
-rw-r--r-- 1 root root 622187310 Mar 11 06:13 ls-lR
-rw-r--r-- 1 root root 76389037 Mar 11 06:15 ls-lR.gz
drwxrwxr-x 37 root root 1272 Feb 27 14:17 pub
dr-xr-xr-x 3 root root 72 Feb 23 2004 usr
$ cd ..
$ fusermount -u sunet/ # un-mount
or if you like some thing more graphical FileZilla ect

Heater
Posts: 9482
Joined: Tue Jul 17, 2012 3:02 pm

Re: Web Development on the Pi

Sun Jun 21, 2015 6:37 pm

Here is my strategy for web development on the Pi:

Editor: vim - Small and fast. Yes, I love to use Sublime or Atom on a PC/Mac but on a memory and speed constrained device like the Pi vim is a God send. It's even more of a God send to be able to use when you have to hack on a remote server, no matter if that is a Pi or a AWS instance, where a GUI editor is not a possibility. OK it may not do syntax highlighting out of the box but a quick google will show you how to enable that in 10 seconds. Syntax highlighting for HTML, JavaScript, CSS, etc, etc, is not a problem. And yes, it's a bit clunky to use when you first meet it, but then so is everything.

Server side: node.js - Forget all that hassle with Apache and PHP. Just write the server in a few lines of node.js. That gives very easy access to Pi features like GPIO, serial port. the camera module, etc. Easy real-time communication from server to client with web sockets (socket.io). No more headaches in switching languages between client side code and server side.

Client side: react http://facebook.github.io/react/ and bootstrap http://getbootstrap.com/ or better still react-bootstrap http://react-bootstrap.github.io/

Server side: Again. You can also use react to render you HTML server side. If you end up with a bunch of web services implemented in node and running on different ports just proxy requests on port 80 to them with nginx.

All in all there has never been a better time to be developing for the web with such a machine as the Pi.

As for, phone emulators and such. I have no idea. bootstrap creates "responsive" pages quite easily that seem to work with the modern phones I have viewed them with.

vladkhvo
Posts: 1
Joined: Wed Aug 03, 2016 3:17 am

Re: Web Development on the Pi

Wed Aug 03, 2016 3:21 am

I use vim with https://github.com/spf13/spf13-vim for web development, i really love it, so i use it on my desktop with gitbash like main IDE. :D

Heater
Posts: 9482
Joined: Tue Jul 17, 2012 3:02 pm

Re: Web Development on the Pi

Wed Aug 03, 2016 9:20 am

@enedil
Get GitHub Atom.
Last I checked Atom did not work on the Pi. There is still an open issue about it on github. Or do you have instructions to make it do so?

@gkreidl,
For gedit that's not true. You can have syntax highlighting for different languages in different tabs.
Yes but out opening poster want them all at the same time:

"...can go through and check if I want PHP, or HTML, CSS, or Javascript, but is there an editor that will just highlight them all?"

That is insane of course but that is the kind of thing web developers do, every syntax they can find in the same source file! He missed SQL syntax mind you.

@r3d4,
vi has no html/js syntax highlighting
That is why all the cool kids actually use Vim (Vi Improved). Vim has syntax highlighting. Just enable it in the vim config file.

nano is not really usable for serious editing.

Now, to quote myself from another thread today:

Microsoft's new open source and cross-platform "Visual Studio Code" (Not the old PC/Windows thing) can be used of the Pi.
See here:
https://code.visualstudio.com
Build/Install instructions here:
http://www.hanselman.com/blog/BuildingV ... ryPi3.aspx

VS Code has excellent syntax highlighting and other IDE features.


Aside: Isn't it great when people pose a question here and never return to join the discussion or acknowledge the replies?

baantonia
Posts: 63
Joined: Fri Feb 06, 2015 2:19 pm

Re: Web Development on the Pi

Fri Aug 05, 2016 8:36 am

I've used Glassfish on a Pi3 (found other Pi's too slow!) with MySQL for the DB back end stuff. Code to be uploaded to Glassfish has been written on a number of different platforms using Netbeans, which can colour code multiple languages. The only issue here is it's not PHP, have to get used to Java, servlets, frameworks etc. Obviously the web orientated languages would be fine. You can write PHP in Netbeans and upload to Apache and the source will be colour coded.
All in all it's what you get used to.........

learnweb
Posts: 2
Joined: Wed May 31, 2017 9:30 am

Re: Web Development on the Pi

Wed May 31, 2017 9:47 am

kirkage wrote:I have a few questions here. So, I've been on my Raspberry Pi and I love it but I do a lot of frontend/backend web design and I want to use my Pi to do so. I've realized it's not the best option I guess seeing how I can't work with many browsers. I also haven't been able to download mobile phone emulators to test my designs. The main thing I've been struggling with is finding a good code editor to use and I've been searching for days for the best one. I've been using gedit and I also like bluefish compared to all the rest. I mostly write PHP, Javascript, jQuery, HTML, and CSS. On Mac OS I use BBedit or TextWrangler, which is hands down my favorite editor ever. And on windows I use UltraEdit. Gedit and bluefish are okay but there is one problem that bugs me so much that I'm still searching for a better editor. Syntax highlighting is limited to one language. I can go through and check if I want PHP, or HTML, CSS, or Javascript, but is there an editor that will just highlight them all? I usually have all these languages in one page especially when I'm throwing up a small quick standalone page. Let me list all my questions that I would like some advice on for Pi web development:

What is the best editor for web development with syntax highlighting for multiple languages at once? Also, is there one where I can open directly from FTP in the program? Usually, On mac/windows I've found "open from FTP" plugins for IDEs if it didn't have it. Maybe there's an editor with plugins with this and also multiple syntax highlighting for the Pi?

What's the best browser to develop with? I like epiphany because it's fast and I can play HTML5 video but the flash plugins I've downloaded don't seem to work and make sites lag. I currently use chromium to develop so I can inspect the code and use the console for javascript but it's kind of slow sometimes. Also, chromium won't play HTML5 video which really is annoying and the flash plugins I've found work sometimes but mostly throw outdated flash errors. And fireweasel seems to be a 3rd option that is useful but the same problems with videos and it seems to quit a lot on me.

I'd love to hear what other web guys are doing out there on their Raspberry Pi's and what suites you the best when doing strictly web development stuff. And I should mention I have the latest Raspberry Pi 2 B+ model running Raspbian with the default desktop environment (because it seems to be the fastest). I have the NOOBs installer on my SD card and tried to install Pidora as well cause that seemed to have some better options for some things but unfortunately it doesn't work on this model of the Pi yet according to another post I read. Anyway, thanks ahead for your suggestions!

If you use just terminal tools you could potentially develop a website on the Pi, however you would need to mind RAM. I would avoid using any GUI's.

As for hosting, you probably could if you do not expect a lot of traffic otherwise, no.

surajitbasak109
Posts: 1
Joined: Tue Jan 23, 2018 3:03 pm

Re: Web Development on the Pi

Tue Jan 23, 2018 3:14 pm

Okay, I just wanted to post my thoughts on Terminal based code editor which is best in the world, Vim. There I saw someone was talking about code editor. I think Vim can beat any text editors/code editors in this world. It has the flexibility to enhance the coding speed, file management, faster navigation without a mouse, so you barely need to use your touchpad or mouse. You have freedom to express your logical creativity with your code. There are indeed lots of plugins and documentations to use them on your editor, those are your must have tools. You can customize your code editor as you like. Need a colored theme? No problem, just search from the internet world and you will be pleased to use Vim. There are some good editors like Sublime Text, Komodo IDE, PHPStorm etc. which is a paid version, "you just need to pay them", then you can use their product on your own. But Vim? It is absolutely free to build your project. If you are in a Linux world then you could use Super Use Do Advanced Package Tool Install <Your Package>

Terminal Command

Code: Select all

sudo apt install vim
At first impression you might think the editor is not suitable for you. But wait. Just give your time by learning the key combination used in Vim. There are lots of articles in the web world which can teach you to start venturing them. Just be patient and do some coding there. I know you would ask me why should I train myself for a code editor? I would say that there are lots of basic tools programmers need to use. Like indenting, code formatting, syntax highlighting, tab size, indentation by space or tab, code snippets, code completion, code block autocomplete like function, if else statement, switch statement, for loop, try catch, class etc. So, in this code editor it is your choice which functionality you want to use. Below I am listing some good must have plugins developer/programmer need to install.

And you may know that terminal based code editor uses less resources from your system. So, that you don't need to worry of your device resources (Like RAM - Application Usage Memory, Storage, Processing etc.). So I recommend you to use Vim and following plugins.

. Bundle 'gmarik/vundle'
. Bundle 'Townk/vim-autoclose'
. Bundle 'mileszs/ack.vim'
. Bundle 'thisivan/vim-bufexplorer'
. Bundle 'scrooloose/nerdtree'
. Bundle 'scrooloose/nerdcommenter.git'
. Bundle 'vim-scripts/YankRing.vim.git'
. Bundle 'tpope/vim-fugitive'
. Bundle 'tpope/vim-repeat'
. Bundle 'tpope/vim-surround'
. Bundle 'tpope/vim-eunuch'
. Bundle 'tpope/vim-markdown'
. Bundle 'tpope/vim-endwise'
. Bundle 'sukima/xmledit.git'
. Bundle 'vim-scripts/matchit.zip'
. Bundle 'Lokaltog/vim-easymotion'
. Bundle 'Shougo/neocomplcache'
. Bundle 'Shougo/neosnippet'
. Bundle 'vim-scripts/OmniCppComplete'
. Bundle 'kien/ctrlp.vim'
. Bundle 'stephpy/vim-php-cs-fixer'
. Bundle 'arnaud-lb/vim-php-namespace'
. Bundle 'shawncplus/phpcomplete.vim'
. Bundle 'vim-scripts/PDV--phpDocumentor-for-Vim'
. Bundle 'erikfercak/php-search-doc'
. Bundle 'lucapette/vim-jquery-doc'
> Bundle 'concise/vim-html5-fix'
. Bundle 'tpope/vim-haml'
. Bundle 'pangloss/vim-javascript'
. Bundle 'itspriddle/vim-jquery'
. Bundle 'mattn/emmet-vim'
. Bundle 'jelera/vim-javascript-syntax'
. Bundle 'pangloss/vim-javascript'
. Bundle 'Raimondi/delimitMate'
. Bundle 'Valloric/YouCompleteMe'
. Bundle 'tomtom/checksyntax_vim'

N.B. There is a configuration file called .vimrc in your home folder (if you are using Linux Distro like Elementary OS, Linux Mint, Ubuntu, Fedora, Open Suse etc. ) you need to configure to customize vim editor as per your needs. So you need to play around with this configuration file, also you can install vim plugins by using that configuration (Like Bundle 'tomtom/checksyntax_vim' or Plug "your/plugin" or Plugin "your/plugin" etc.).

Terminal Command

Code: Select all

vim ~/.vimrc
Happy Coding!!!

PaulC22
Posts: 1
Joined: Tue May 01, 2018 12:00 am

Re: Web Development on the Pi

Tue May 01, 2018 12:28 am

I just attempted Hanselman's VS Code build instructions on my Pi3B+ and it didn't work (for me). I didn't spend much time at all determining the issues, though. I'm still getting my system set up for web development. I'm running Raspbian Stretch. I just thought I'd throw my 2 cents in there.
I'm a long time lover of Vim, so I'll see how far I get developing .net core apps on the Raspberry Pi.
Peace to you all,
Paul C22

Return to “General programming discussion”

Who is online

Users browsing this forum: No registered users and 5 guests