<<< Introduction | Stories >>> | Words, words, words >>>

Setting Up the System

In this, the second article in this series, I'll describe the steps needed to set up an environment in which you can create web apps. If you already have your own public web page(s) much of it will be familiar. As with the first article, my target audience is people with levels of technical skill ranging from near-beginner to intermediate.

Hosting

I am always bemused when I speak to friends at coding meet-ups and discover how many of them don't have their own web pages. They struggle to set up WAMP or MAMP on their PC/Mac so they can develop web code and run it in their browser, and when I ask "Can I see it on my smartphone?" they have no way of doing it. My thought is always "Why make life so difficult?" and the answer usually has something to do with the perceived cost of hosting.

Come on, guys. You arrived at this coffee shop with your shiny MacBook Pro, having just paid more for parking, a skinny latte and bruschetta than the monthly cost of a good hosting plan. You're spending all your waking hours learning React so you can become a professional programmer but you have no URL to put on your CV, pointing to a sparky demo that will impress potential employers or clients? This Does Not Compute.

So my first piece of advice is to sign up with a good hosting company. Be cautious about going for the cheapest; these may have reliability issues or limitations on hosting capacity and developer-friendliness. My recommendation, based on being a customer for over a decade, would be DreamHost because they have few restrictions on what you do with your hosting and their control panel is well-known for being just about the most friendly imaginable.

Next is to get your own domain name. Your hosting company can do this for you but I prefer to keep things separate and to use the best, which in this case is the unlikely-sounding iwantmyname. Find a good name from the huge choice available, set the DNS to point to your hosting (DreamHost is on their list) and within minutes you are online.

And finally - build that sparky demo!

Platform

The platform is the environment you use to place your code in. You have the choice of no platform at all - this will suit hard core traditionalists who want to learn from the ground up and who prefer to do everything with the keyboard rather than the mouse - or some kind of content manager, the most common of which is WordPress. I'll briefly describe both options but as WordPress makes life so much simpler that's what I'll assume from then on.

Option 1 - No platform

No platform means that every file on your website is one you put there yourself. In fact, at a pinch your website could consist of as little as 2 files; index.html and mycode.js. The first of these could look like this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="mycode.js"></script>
</head>
<body>
</body>
</html>

I know it only has one line, but since JavaScript has 100% control over everything that happens in your web page it can supply the title, the CSS and all the content if you want to do it that way. This is all a bit too primitive for me but if it floats your boat, go with it. You can even code at the command line with VIM or EMACS. You'll need to manually SSH files to your server unless you're using a code editor like Kate (on Linux/KDE) that treats remote files the same as local ones.

The other file, mycode.js has all your program code; everything to make the web app real. Layout, content, styling, responsiveness and so on; all the stuff a platform makes much easier to do.

Option 2 - WordPress (or other content manager)

WordPress has for a long time been popular with bloggers and builders of small websites, but from those modest roots it has grown steadily and now powers over 1/3rd of the top 10 million sites on the web. WPBeginner have a list of 40, starting with

TechCrunch.
The New Yorker.
BBC America.
Bloomberg Professional.
The Official Star Wars Blog.
Variety.
Sony Music.
MTV News.

So if you were thinking WordPress is just for bloggers, think again.

Another misconception is that WordPress gets in the way, taking over the layout with its complicated themes. Well, that's actually up to you. It's really very simple to set up a "clean page" that only contains the content you put in it. I'll show you how shortly, but in the meantime I'll highlight some of the advantages of using WordPress.

For everyday tasks no direct access to the server is needed. You can do everything inside the WordPress UI and let it take care of transferring files to the server. Actually, many of them go into the database.
Text Editing. For all files, including raw program code, you can use the WordPress editor. It's not the best there is but it's quite good enough, especially for additional pages you'll probably want, like Help or About Me. Of course, this doesn't prevent you from using other IDE tools as well.
Media management. WordPress manages all your images for you, providing you with a URL for each one that you can use in your code.
Responsiveness. When you run your site on a smartphone, WordPress helps with suitable adjustments to the font size, borders and so on, to maintain a good-looking display.
User management. Lets you set up logins for people with differing levels of access and keep some pages private or protected by a password.
Plugins. These are the mechanism for extending WordPress. There are thousands of plugins available and you can write them yourself to add functionality of any kind you like.
It's free.

For the rest of this article I'll assume the choice is WordPress. Hard-core coders may still find bits of it interesting but other parts they'll have to skip over.

Setting up WordPress

If you've chosen a good hosting service they will have options to do a quick install of WordPress on your website and to set up a database. The hardest part is finding where these options are in the control panel; after that it's actually very simple.

Once you've installed WordPress it shows visitors a default home page and it gives you admin rights to go in and change things. If this is all new to you I strongly recommend you spend some time customizing the home page, if only to tell visitors who you are. It'll help you find your way around WordPress and establish your presence on the Net.

To support the development of web apps, as well as adding content you may need to do some customization of WordPress itself. This is perfectly normal; the system is designed for this kind of thing. To start with, the appearance of each page is governed by a theme; this is a collection of files in one of the WordPress directories on your website (wp-content/themes). The theme governs what blocks go to make up the page; the header, footer, sidebars, menus and so on. The content you put in the editor just goes into one of these blocks. When you develop a web app this may not suit you; instead you may prefer not to have any of this stuff and work instead with a blank page.

Adding a blank page template

Although this really doesn't have a lot to do with web apps, I'll cover it because it's handy to know.

Themes provide a choice of templates for different kinds of page, so the home page will often have a different template to the rest of the pages. It's quite easy to add a special template that gives you a blank page; all you need is this PHP file (which came from here):

<?php
/**
 * Template Name: Clean Page
 * This template will only display the content you entered in the page editor
 */
?>

<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body>
<?php
    while ( have_posts() ) : the_post();   
        the_content();
    endwhile;
?>
<?php wp_footer(); ?>
</body>
</html>

Save this as a new file called page-cleanpage.php and copy it to the theme folder. There will now be a new Clean Page option in the Template drop-down list in the editor, which when selected gives you a blank page where you can place your own code and markup. Just like rolling your own web page from scratch, except now you have all the useful features of WordPress ready for use when needed.

Themes are sometimes updated by their authors, and when you install the update you will lose any modifications you made to the theme. To prevent this happening you can create a child theme to contain your custom modifications. Alternatively, don't update the theme.

WordPress Plugins

The next thing is to install some useful plugins. WordPress have a library containing thousands of plugins supplied by companies and individuals to perform a huge range of useful services. I'll suggest a few you may find useful.

Classic Editor
"Enables the WordPress classic editor and the old-style Edit Post screen with TinyMCE, Meta Boxes, etc. Supports the older plugins that extend this screen."

Passions run high over Gutenberg, the new WordPress block editor. Many love it, but builders of web apps use text mode much of the time and for them it's rather inconvenient to use. So this plugin gives you a choice between the traditional and the new. There are several other similar and equally good plugins, such as Disable Gutenberg. Highly recommended.

Header and Footer Scripts
"Allows you to insert code or text in the header or footer of your WordPress site".

This plugin gives you the ability to add code and styling to the entire site or to just one page. So if there's a JavaScript library you need, here's where to add it. Similarly, you can add your own CSS classes and rules, which may override those already set up by the WordPress theme. You'll get an extra field at the bottom of the editing page, where you can add all your custom extras. Highly recommended.

Duplicator
"Migrate and backup a copy of your WordPress files and database. Duplicate and move a site from one location to another quickly."

Backups should be made regularly; there's nothing more frustrating than losing all your work through a simple mistake. Duplicator creates backups that can also be used to build a copy of your site somewhere else. Highly recommended.

EasyCoder
"Control the appearance and behavior of your posts and pages by embedding simple English-like scripts, without the need to learn JavaScript."

EasyCoder provides a simpler alternative to coding in JavaScript. It's an English-like scripting language that runs in the browser and can do anything from simple interactivity to complete web apps. The EasyCoder website has plenty of examples.

Building your Web App

You are now set up to build your web app. There are several ways to approach this:

Vanilla JavaScript
JavaScript plus a framework
EasyCoder or other higher-level scripting
Other

Vanilla JavaScript

This option is roughly the same as No Platform, that I listed above as the alternative to WordPress, but the difference here is that you have a framework to run your code in. You'll probably write it in your favorite IDE - most people I know prefer Visual Studio Code - then SSH it to your server, putting it in a directory at the top level of your installation that's unknown to WordPress, where it should be safe from being accidentally deleted. Then you'll add a link to it using the Header and Footer Scripts editing box and debug it with your browser's developer tools.

JavaScript plus a framework

Here you build a complete deployable .js file using JavaScript with React, Angular, Vue etc. according to preference and upload it to your server as before. You will probably need to add a link to the framework file, too. I can't say much more than that as it depends on the framework you choose to work with.

EasyCoder

This is rather different since you do most of it in the WordPress editor. I'll be using EasyCoder to implement the user interface and business rules for our web app, so if you were hoping for React or Angular you may be disappointed (but hey - different is good too). The way it works is you write one or more English-like scripts (examples and documentation at the EasyCoder website), and place the first one inside a special <pre> HTML element in your page. When the page loads the EasyCoder plugin compiles and runs the script.

Other

Well there must be an Other option; I just don't know what it is.

Library components

Most web apps of any size consist of more than just a user interface. They typically have some core functionality, either written by the same team or brought in as a third-party library module, and the web app itself is mainly about leveraging this functionality. Where the library module was developed outside the team it must be handled separately but it's a good strategy to apply the principle as a matter of course by identifying parts of the project that can be spun off as independent blocks of functionality. This is where JavaScript and React skills come into play and have maximum effect.

For a simple example of component usage, look at the demo web app Here On The Map, which contains a live Google Map that when you interact with it does things on the same page but outside the map itself. Google Maps come as a JavaScript library file. It's a black box; there's no way we can add our own functionality to it directly so we access it through its Application Programming Interface (API).

This is all about the "Separation of Concerns" design pattern. The map component doesn't need to know anything about where it's running and the user interface doesn't care how the map works. In reality they are 2 completely separate programs that operate as a team.

The web app I've chosen for this series will adopt this design pattern too. It's that perfect tool for Scrabble lovers, an anagram finder, which takes a line of text - typically someone's name - and searches a dictionary for all the combinations of words it can find that will use up all the letters, then displays them as a list. This is a computing-intensive task that will return some results within seconds but may take hours to exhaust all the possibilities. The core functionality, once written, is unlikely to ever change, so it's an ideal candidate for constructing as a library component. (I'm aware there's an anagram module available for Node.js but I was curious to see how hard it would be to write one myself.)

Coming up...

In the next part of this series I show the user stories for the web app and the code needed to implement them.

Title photo by Michael Podger on Unsplash

Blog

How to build a Web App, Part 2

Graham Trott