Installation Guide

Installation Guide for Windows

I am a developer and the WebExKit is written for developers or budding developers. The installation requires Python on your computer (see below) and you will be downloading the source code for the application. This guide builds the Python environment up just as though you are writing your own project from scratch (rather than using pip or pipenv to install a pre-built distribution) - experienced developers will find it a breeze and budding developers may gain insights along the way. In any case the project will be there for you to tinker with if you want to go further than just using the browser to play with HTML, CSS and JavaScript.

I used VS Code to develop and run the project but these instructions will use DOS commands.

There are up to 3 levels of detail for each step in the installation process. Just keep reading until you are happy to move on to the next step.

1. Download and Install Python

If you already have Python on your machine you can obviously skip this step. I've been using version 3.7.3.

Go to https://www.python.org/downloads/ and click the download button under "Download the latest version for Windows".

Run the downloaded python-3.x.x.exe file by clicking in the browser or double-clicking in the download directory. Make sure you check the "Add Python 3.x to PATH" box as you are going to run Python from the command line later. Click "Install Now" to start the installation. Agree to let the app make changes to your device.

2. Download WebExKit Source Code

Click the Download button:

This will download a zip file containing the source code to your downloads folder.

Open the WebExKit.zip file and extract the contents to a directory of your choice, e.g. C:\MyWebExKit.

You open the zip folder by clicking on it in the downloads area of the browser or by navigating to it in the downloads folder. There is plenty of help on extracting from zip files on the internet if you need it.

You should now have something like:

C:\MyWebExKit
  ├─ instance
  ├─ WebExKit
  ├─ license.txt
  ├─ Readme.md
  ├─ run.cmd
  └─ runvenv.cmd

This is your project folder. WebExKit (the subdirectory) holds the source code and the instance folder holds any files you save whilst using the kit.

3. Create a Virtual Environment

This step (and the next one) are optional depending on if you want to use a virtual environment or not. If you're unsure you can find articles describing the benefits of virtual environments on the web. I've included a short Wiki page also [Virtual Environments].

Open a command window (Command Prompt app, under "Windows System" in the Start Menu) and navigate to your project folder (C:\MyWebExKit in my case) then type:

py -3 -m venv venv

After a short pause you will find a folder called "venv" has been created in your project directory.

If the above command looks strange it's because Python ships with a module called "venv" to handle virtual environments. We are using the "venv" module here to create a folder called "venv". Although the folder could be any name, "venv" is usually used.

4. Activate the Virtual Environment

In the command window type:

venv\Scripts\activate

The command prompt changes to include the name of the environment (venv) before the usual prompt, e.g.

(venv) C:\MyWebExKit>

In the last step we created the virtual environment, now we want to ensure that we operate within that environment and the "activate" command puts us there.

5. Install Flask

If you haven't created a virtual environment you need to open a command window (Command Prompt app, under "Windows System" in the Start Menu) and navigate to your project folder (C:\MyWebExKit in my case).

At the command prompt enter:

pip install Flask

That's it! WebExKit is ready to run.

If you want to read about Flask go to https://flask.palletsprojects.com/en/1.1.x/ where you will find a User's Guide including Quickstart and a Tutorial.

6. Start the Server

The WebExKit directory contains 2 command files, run.cmd and runvenv.cmd. As if you couldn't guess you use run.cmd if you didn't create a virtual environment and runvenv.cmd if you did. In File Explorer, just double-click on the appropriate command file to start the web server running. In your browser type 127.0.0.1:5000 in the URL and away you go.

You may get a "Windows protect your PC" dialog box when you click the command file. If you do just click "More info" then "Run Anyway".

Did you know you can create a desktop icon to start the server? Just navigate to the WebExKit folder in File Explorer, right-click on the appropriate command file, and choose Create Shortcut. After that you just have to drag the shortcut you created onto the desktop.

Head to the [User Guide] if you want to but, in any case, start experimenting!