Search for:

Getting Started with Django (Part 1)

In this tutorial we will quickly setup a cloud development workspace for Python and the Django web framework inlcuding a PostgreSQL database, a Visual Studio Code web IDE and PGAdmin database admin panel to work with databases convienetly directly if needed on Websson which you can find here:

https://portal.fineupp.com/websson

If you prefer we also have video of the content of this blog post available. The first 3 minutes are about how to register and create a trial, so if you want see that watch from the beginning, otherwise this link starts the video right where the Django setup begins:

In part 2 of this post we will also go over how you can install the Django Rest Framework and install ReactJS and VueJS if this is your preferred architecture pattern. You can of course also install or generally use any frontend framework of your choice.

You will need to head over the Websson home page and if you don’t have a Websson account and free 30 day trial or other subscription yet, you will need to sign-up for an account and create a free trial or subscription. 

Creating a free trial is easy. Click on the green Login/Register button on the top right corner.

Then click on register:

Pay special attention to entering a short, but meaningful username.

The username will be used to unique identify all of the resource that you will later use and deploy and will also be needed for you to login.

You email will be necessary to for general communication and to confirm that you really want to create this account.

After entering your preferred username and your email you will be asked to check you email and to confirm your account using the link in your email inbox.

After clicking on the link to confirm your email address, you will be redirected back to the Websson account creation page to finish your account creation.

You will be asked to enter your firstname, lastname and a password and confirm your password.

Finally you will be redirected to the login page so you can login with your Websson account.

After login, if you have not been asked before, you will be asked to confirm that you agree with Websson’s cookie policy. Please only use the Websson service if you agree with the cookie policy.

After login the web page will not look much different other than that you now have registered as a user and you will see that you are logged in the upper right corner of the screen.

Websson has different user types, regular users, which you become after sign-up and customers.

Regular users can use Websson to collaborate on code with Websson customers, but more on that later.

In order for you to be able to create your own Django cloud development workspace you need to be a customer and a subscription.

If you don’t have a subscription or free trial already navigate down the page to create a subscription or free trial:

Afterwards confirm your trial or subsription:

After you click on “Start trial” you will see the blue button will turn into a green button with a checkmark and then redirect you to the Websson portal where you can setup your Django envrionment.

Click on setup for your subscription:

This will redirect you to the main portal where you can create or modify resources in your workspace.

Let’s create a Django environment here:

Then click on the drop down menu for web frameworks and choose the Python type:

Then pick Django:

Afterwards pick a SQL database type:

For this example let’s pick the PostgreSQL database type:

Now let’s pick the database admin panel software for the database. We will pick "Standalone" and then….

..in this case "PGAdmin":

Afterwards we can pick the web integrated development environment we want to use for editing the Django code base.

There are IDEs of the type Standalone and Embedded.

The difference is that the embedded type IDE is as VSCode online instance that will be running inside the same Linux environment as your code side by side. This will enable you to jump into the terminal and install additional Python packages right from VSCode. This is very useful when you are the primary developer and main workspace manager.

The standalone type is a IDE instance that is basically running next to the Linux environment that contains your code. This IDE type will then mount the folders with the all the code. This is great if you want to share your complete codebase for collaboration with a colleague or friend.

If you only want to share a specific folder or Django app from the whole Django project, than that is also possible, if you create an IDE under the menu "Collaboration", but we will get to that later.

In this blog post we want to get started with the embedded type so we can start coding as the main developer right away.

Now pick "VSCode Embedded" :

Now that we completed our choices, lets finalize the deployment.

In order to that click on “Toggle Form / Selection” :

In the form we need to enter the final 2 pieces of information:

  1. In which physical region do we want to deploy? At the moment of writing Websson only supports Germany so pick that region please:

2. Which name do you want to choose for your Django environment / workspace? Type a short meaningful name.

Now click on "Create Environment" :

You will now be taken through a wizard for further configuration options for each piece your Django workspace that will be deployed:

Choose a Django admin username and password. Leave the "App Landing Url" page blank and ignore the "Do Not Expose to Web" checkmark for now. Take a note of your username and password somewhere!

Enter a database name of the database environment. This will also be the database that will be created for you. Please also enter a database user and password of you choosing. Take a note of your username and password somewhere!

Next enter a short meaningful name for the PGAdmin environment. Your username will be your email address you entered when you created the Websson account. Please also enter a password here. Take a note of the password somehwhere!

Next enter a short meaningful name for your embedded VSCode IDE:

Thats it! Now you should be redirected to the main menu where you will find the links to all the environments you created for you worspace, such as the link to the Django web interface and the IDE.

Click on the Django logo or the environment name. A new browser tab will take you to the web interface of your Django installation. If you add /admin in the browser url you can get to the Django admin interface. Here you can login using the username and password you have chosen earlier.

Once you checked that out, come back the Websson menu and click on "Admin" please.

In the admin menu you can now see a lot of features that Websson provides to make developing in the Cloud easy, but we will get to each feature later.

You can also of course see what features of your subscription you have used up.

In order to use the VSCode web ide go to the IDE / Editor menu item:

Here you can click on the VSCode icon which will redirect you to your VSCode Django coding workspace.

Don’t worry, the link is secured with a unique token which is used in the link. The token can also be viewed in the menu:

Now you can see your VSCode web environment loading and pick a color theme.

I prefer black so I will use that in the screenshots going forward.

In order to edit Django code click on the upper left corner, the “File” menu and click on “Open Folder” then open the folder path “/home/websson/Django_Projects” :

VSCode will ask you if you trust the code authors, please click on “I trust them” and set the appropiate checkmark:

Now you will see the file paths and files that you can edit on the left hand side. Open the file "settings.py" .

Before we go any further with editing files, let’s install 2 extensions that will help us code. One is the Python extension and the other is the Django extension. For that navigate to the extensions menu on the left:

Now add the Python extension. It should show up automatically. If it does not, just seach for "Python".

Once it’s installed you should be able to see the Python and Python Debugger extension intalled in the extensions list:

Once you are done with this you may want to optionally also install the Django VSCode extension:

Next we we will familiarize ourselves using the terminal in order to create a Django app, run database migrations and install Python packages using PIP.

Once in the terminal activate the Python virtual environment that comes pre-installed with your Django Websson workspace, by running the command:

"source ../default_py_env/bin/activate"

Now you can see in the bash prompt that the virtual environment is indeed activated. You may also happen to see that there is also another Python environment activate called "base".

This is because Websson workspaces use Mamba, a drop-in open source Conda alternative with the open source repository of Condaforge activated. So if you are familiar with Conda you should feel right at home. With Conda and Condaforge you can install different Python versions or other virtual environments with ease.

The Conda command as an alias to the Mamba command is available. If you look at the Websson standard “base” environment you can see that Python 3.10.12 at the time of writing is used. But you can install different Python versions and activate them as you see fit giving you a lot of flexibility. For now we will use the defaults however.

In addition you can install additional programming languages and frameworks such as Node.JS or React or Vue.JS into the same workspace using the ASDF package manager which is available in your Websson workspace as well. To see what is currently installed issue the “asdf list” command. As you can see Node.JS is already installed.

Documentation on how to use Mamba / Conda or ASDF can be found in the respective links.

Now let us properly setup our Django workspace. We will first stop the Django instance that has been started per default when the Django Websson environment was started by simply killing all Python processes and restart Django from the terminal. Then we will check the Django launch command that will get us Django up and running again.

After you have killed all Python instances you will see a screen like this under your Django environment instead of the Django welcome screen:

The launch commands for different frameworks can also be easily found in the path

"/home/websson/launchers"

and in the case of Django it is

"/home/websson/launchers/django/start_django.sh" .

So in oder to restart Django after killing it using "killall python" we can simply run

"python manage.py runserver 0.0.0.0:80" from the path

"/home/websson/Django_Projects" .

If you have copying and pasting this command into the terminal you may be asked to confirm that pasting is allowed, so I woud recommend to confirm that it is:

Once you start Django in the terminal you should see a terminal output such as this:

With the logs and output showing there when visit your Django workspace URL again which now should look like this again:

Now back in the terminal let us install some Python packages we need such as “wheel” and the PostgreSQL driver. We should also update PIP. Hence here the commands we need to run:

pip list
pip install --upgrade pip
pip install wheel
pip install psycopg2-binary

Now we will create a sample Django app in our Django project directory by running:

python manage.py startapp testwebsson

We will now connect the PostgreSQL database we deployed earlier to the PGAdmin instance we have available as well as to Django so we can take full advantage of the PostgreSQL Websson provides.

Navigate back to the Websson menu and click on "Datatabase GUI Manager"

Now click on the PGAdmin logo to open up PGAdmin:

Please login into your PGAdmin instance with the email you used to register with Websson and the password you have chosen for PGAdmin during deployment:

Once logged in click on “Add New Server” to connect to the PostgreSQL that you deployed earlier:

Add a name of your choosing for the PostgreSQL connection:

Then click on the “Connection” tab in order to setup the other parameters. Enter the username you used for the database and the password you have set during the deployment configuration. Check the "Save Password?" checkmark.

The only thing you are missing the the connection URL string now. For that navigate back to the Websson menu and click on the "Database Engine Manager" menu item:

Here you can see the connection string to your database. Copy this string so you can paste it into the PostgreSQL connection string field in PGAdmin:

You should paste this connection URL string in the Host name / address field in PGAdmin now and click on save:

You should now be succefully connected to your PostgreSQL database.

You can navigate to “databases” and then to “dbase” which is the database we had Websson creat as default. From there you can go to “schemas” and then “public” and “tables” to see your tables.

We shoud also connect our Django project and app to this PostgreSQL database. In order to later be able to git push our code to a Git repository, which should put all database and Django secrets into a separate .env file and exclude that file from Git. We do that by installing the Django-Environ package first via PIP in the terminal again:

pip install django-environ

In the VSCode IDE we should now create a “.env” file in the path “/home/websson/Django_Projects” with the following contents. The DB_HOST URL is the same you copy & pasted earlier from the Websson “DATABASE ENGINE MANAGER” menu item and you should copy the SECRET_KEY value from the Django settings.py file.

SECRET_KEY=XXX
DB_NAME=dbase
DB_USER=kevin
DB_PASSWORD=secret
DB_HOST=srv-captain--XXXX
DB_PORT=5432

The SECRET_KEY should be XXX for now as we will replace it with your key in a moment. Please paste the DB_HOST value from the Websson “DATABASE ENGINES MANAGER” menu point.

Now in your Django settings.py file you should add the Django-Environ imports and SECRET_KEY:

import environ
env = environ.Env()
environ.Env.read_env()
...
...
SECRET_KEY = env("SECRET_KEY")

Furthermore replace the previous SQLITE3 configuration in the settings file as follows:

We will start the initial database migration now to setup the core Django tables for the project by running the following in the terminal:

python manage.py migrate

While there was a Django superuser and password created when the Django Websson workspace intially deployed, it was created in the SQLITE3 database shipped during the intial deployment. Since we have connected to the PostgreSQL now, we need to create the superuser user and password again by entering:

python manage.py createsuperuser

You can now enter a super user “username” and “password” again.

We should also add a sample table to the “testwebsson” app in the models file and migrate that.

In order to do that we need to open the models.py file in the “testwebsson” app and add the sample model:

from django.db import models
class Teacher(models.Model):
    name = models.CharField(max_length=80)
    age = models.IntegerField()

Now we will prepare the Django migration file, migrate the model, register our testwebsson app to the project and finally check with PGAdmin if everything looks ok:

In the settings.py of the Django project add the “testwebsson” app to the installed apps list and then run..

python manage.py makemigrations
python manage.py migrate

.. in the terminal.

We will now check with PGAdmin if all tables have been created as expected. First we see the Django default tables:

Furthermore we can see the testwebsson_teacher table was created as well:

With the Django admin app we can add some sample data to our table now easily. All we have to do is register the model with the admin app, startup Django again and login to the Django admin interface to insert some data:

When you open the “admin.py” file from the “testwebsson” app, please add the following lines to register the model with admin app:

from .models import Teacher

admin.site.register(Teacher)

Afterwards we should start up Django again in the terminal. To do so run:

python manage.py runserver 0.0.0.0:80 &

Check if Django is running by opening the link to the Django web URL:

If all looks good add to your url “/admin” in order to get to the Django admin menu:

Enter your username and password set in the earlier steps. Now you should be able to see the Teacher table and be able to insert now records into it:

Now that you have added a record to the table with Django admin menu following the screenshots we can verify quickly that the record have been added using PGAdmin. Navigate to PGAdmin now and open the SQL editor and issue the following SQL command:

select * from testwebsson_teacher;

In the Django admin page you can of course also see the “Teachre object (1)” and when you click on it you can see and edit the entry there as well. Obviously you can make this entry more meaningful by displaying the name instead of “Teacher object”, but that you can be setup in the models.py following the Django documentation.

Finally as a best practice we will also create and save a .gitignore file as follows in VSCode so when you git push your code later you dont push any secrets:

In the Django project directory create a .gitignore file with the following contents:

*.pyc
__pycache__
db.sqlite3
/env
*.env
.vscode

Now save it.

Although thee is plenty more features and to discover with Websson this concludes the

Part 1 series of how to get started with Django.

The second part will focus on installing the Django Rest Framework on React and Vue.JS in the same Django workspace.

Working with Provisioning Templates

Provisioning templates are a fast and secure way to replicate or duplicate environments without having to go through the process of selecting environment components/frameworks each time.

There are basically three types of provisioning templates that are accessible to the user these being :

  1. Public Templates
  2. Private Templates
  3. Provisioning Templates (used internally by Websson)

Public templates are essentially the most common development/hosting environment setups that can be used ‘out of the box’ in order to get a flying start and cover most development requirement scenarios.

Private templates are your own and can be created from scratch or added based on any environment you have created manually.

Websson creates a provisioning template each time you add an environment and keeps it for your convenience should you wish to create a template based on the environment you have just created.

Users cannot update or change public or templates generated at environment creation time both of which are for consumption in other tasks.

Why should I use them?

Using provisioning templates reduces time taken to set up or replicate a complete working environment leading to consistency and compliance with requirements.

Whenever you create a new environment you have the option to use either a template (public or private) OR create the environment from a list of dropdowns.

Using public templates

If you opt to chose a public template all the available public templates will be displayed in the selection area and simply clicking on one will automatically bring up the form options for the selected template.

You are free to change any of the fields to suite your requirements for example change the DB engine from MySQL to Postgress or Redis or whatever options are available.

This will not change the public template at all but will create a provisioning template when you create your environment with all the options you have selected.

Creating a private template from scratch

  1. From the Template Manager menu option select the private templates tab and hit the create button.
  2. Give you template a name and description
  3. Select the options form the lists available
  4. Save the template

Creating a private template from a provisioning template

  1. From the Template Manager menu option select the Recently Used tab tab and Add to my templates button.
  2. Give you template a name and description elect the options form the lists available
  3. Save the template

Editing a private template

You can view, edit or delete your private templates by selecting the appropriate crud button from the private templates grid.

Using private (your own) templates

Much the same as using public templates and again you are able to change various options at environment creation time.

Creating an Environment

In this post we walk you through the process of creating a simple environment

If you are not registered on Websson or do not have an active subscription or free trial please refer to this Getting Started with Websson Quickstart and complete the registration process accordingly.

Adding Dabases, Database Managers and IDE’s can all be done in conjunction with creating an environment or added afterwards once the environment has been created.

So lets head on over to the environment manager and create a Django environment:

Then click on the drop down menu for web frameworks and choose the Python type:

Then pick Django:

Then click on the green Toggle Form / Selection button:

Which will bring up the form we need to enter the final 2 pieces of information:

  1. In which physical region do we want to deploy? At the moment of writing Websson only supports Germany so pick that region please:
  2. Which name do you want to choose for your Django environment / workspace? Type a short meaningful name.

Choose a Django admin username and password. Leave the "App Landing Url" page blank and ignore the "Do Not Expose to Web" checkmark for now. Take a note of your username and password somewhere!

Thats it! Now you should be redirected to the main menu where you will find the links to all the environments you currently have.

An alternative way to create or replicate an environment can be found in Working with Provisioning Templates to speed up your workflow.

Getting Started with Websson

In this post we take a look at how to register and create a subscription for new users.

There is a video to walk you through this process here:

In order to register we should head on over to the Websson Landing Page and select the green Login/Register button in the top right hand corner.

Then click on register:

Pay special attention to entering a short, but meaningful username.

The username will be used to unique identify all of the resource that you will later use and deploy and will also be needed for you to login.

You email will be necessary to for general communication and to confirm that you really want to create this account.

After entering your preferred username and your email you will be asked to check you email and to confirm your account using the link in your email inbox.

After clicking on the link to confirm your email address, you will be redirected back to the Websson account creation page to finish your account creation.

You will be asked to enter your firstname, lastname and a password and confirm your password.

Finally you will be redirected to the login page so you can login with your Websson account.

After login, if you have not been asked before, you will be asked to confirm that you agree with Websson’s cookie policy. Please only use the Websson service if you agree with the cookie policy.

After login the web page will not look much different other than that you now have registered as a user and you will see that you are logged in the upper right corner of the screen.

Click on the Plans menu item or Navigate down the page to create a subscription or free trial:

After you selection and you will be redirected to complete the subscription process by either entering a valid payment method and additional payment details or in the case of a “FREE TRIAL” no further information is required at this point:

After you click on “Start trial” or after entering valid payment details you will see the blue button will turn into a green button with a checkmark and you will then automatically be redirected the Websson Portal where you can setup your environment.

Thats it. Welcome to the Websson Development Community. You are all set to go.

Getting Started with Py4Web (Part 2, Code Collaboration)

In this second part of the Py4Web quickstart we will have a look at the more advanced features Websson provides in order to safely collaborate on code with others or to easily scale your Py4Web instance using additional workers for your workload.

The code collaboration feature in Websson lets you create another VSCode or Jupyter web IDE instance that is secured using a unique and random authentication token and URL.

When you share the link to the web ide with a collaborator, the collaborator will be able to edit code only in a the specific folder that you shared.

Code editing will be happning at same time with changes instantly visible to all parties.

In order to try out code collaboration navigate to the "COLLABORATION MANAGER" menu in Websson:

Click on "ADD NEW COLLABORATION" and choose the "STANDALONE" IDE TYPE:

Now choose a name for the collaboration project.

Afterwards enter the relative folder path of the folder you want to enable collaboration on.

Keep in mind that the basepath is as follows "/home/websson/" so only enter the folder from you app that makes sense with the base path.

Afterwards decide the name of the new root folder that will be created in the the web ides collboration workspace. Within that root folder you will find the folder with the code that you are collaborating on.

You will see that prgoress bar moving along now as Websson is the deploying the web ide of your choice (VSCode in this case) and the code sharing.

After this process is finished you will be able to see the collaboration in the Websson collaboration menu.

There will be a link to click on as well that will redirect you to the web ide for the collaborator along with the authentication token already embedded in the URL for easy testing

You will now need to open the collaboration folder in the web ide (VSCode in this case) to open the collaboration code folder which is located under

/home/websson/*YOURCOLLABORATIONFOLDERNAME*/*CODEFOLDER*

In this case the folder "/home/websson/py4web/apps/testapp" was shared and the collboration folder was also named testapp.

The app will now be avaiable in the collaboration IDE under "/home/websson/testapp/testapp"

If you edit any code here in this folder now, you will be able to see the code changes instantly in the main code editor of you Websson instance.

Also note that in the collaboration editor you don’t have access to any other code than the folder that wa shared.

This makes it possible to work on a Py4Web app together, without exposing the code of other Py4Web apps.

Here is what you will see in the main VSCode editor. Note that you can here of course have access to all Py4Web apps:

If you double check the code changes in the Py4Web dashboard editor you will also see that the code has changed there:

Finally check the link to the hosted Py4web app on Websson and you will see that the html template and text has indeed changed instantly accordingly as well.

This concludes part 2 of the Websson Py4Web series. The next and last part will desricibe how you can use your custom domain with you Py4Web hosted app on Websson and how you can increase webworkers for extra scalabiltiy in a matter of clicks.

WordPress now supported

As of today Websson now provides an out-of-the-box WordPress environment option that is focussed on getting you up and running in no time at all with WordPress.

The standard install comes bundled with a MySQL database engine (as standard) which is initialised and populated with the latest WordPress release and default theme.

To create your brand new WordPress environment simply go to your environment admin and create a new environment.

From the Framework Type dropdown select PHP and then click on the WordPress framework.

You can optionally include an IDE/Editor and DB Admin at the time of creation or you can add them later via environment admin as per standard Websson functionality.

Websson Soft Launch

Fineupp is happy to announce that Websson is now officially live as part of our Soft-Launch strategy.

We are currently offering Websson to selected customers at discounted rates in order to gather end user input and observations as to how we may improve the end user experience and to identify any gaps in functionality that we may have overlooked.

We intend to move directly to live mode after analysing and incorporating feedback from our customers.

If you have any comments or suggestion, please feel free to contact our team in order that we can improve out product.

Thanks in advance

Getting Started with Py4Web (Part 1)

In this tutorial we will quickly setup a cloud development workspace for Python and the Py4Web web framework inlcuding a MySQL database, a Visual Studio Code web IDE and PHPMyAdmin database admin panel.

You will need to head over the Websson home page and if you don’t have a Websson account and free 30 day trial or other subscription yet, you will need to sign-up for an account and create a free trial or subscription. 

Creating a free trial is easy. Click on the green Login/Register button on the top right corner.

Then click on register:

Pay special attention to entering a short, but meaningful username.

The username will be used to unique identify all of the resource that you will later use and deploy and will also be needed for you to login.

You email will be necessary to for general communication and to confirm that you really want to create this account.

After entering your preferred username and your email you will be asked to check you email and to confirm your account using the link in your email inbox.

After clicking on the link to confirm your email address, you will be redirected back to the Websson account creation page to finish your account creation.

You will be asked to enter your firstname, lastname and a password and confirm your password.

Finally you will be redirected to the login page so you can login with your Websson account.

After login, if you have not been asked before, you will be asked to confirm that you agree with Websson’s cookie policy. Please only use the Websson service if you agree with the cookie policy.

After login the web page will not look much different other than that you now have registered as a user and you will see that you are logged in the upper right corner of the screen.

Websson has different user types, regular users, which you become after sign-up and customers.

Regular users can use Websson to collaborate on code with Websson customers, but more on that later.

In order for you to be able to create your own Py4Web cloud development workspace you need to be a customer and a subscription.

If you don’t have a subscription or free trial already navigate down the page to create a subscription or free trial:

Afterwards confirm you subsription:

After you click on “Start trial” you will see the blue button will turn into a green button with a checkmark and then redirect you to the Websson portal where you can setup your Py4Web envrionment.

Click on setup for your subscription:

This will redirect you to the main portal where you can create or modify resources in your workspace.

Let’s create a Py4Web environment here:

Then click on the drop down menu for web frameworks and choose the Python type:

Then pick Py4Web:

Afterwards pick a SQL database type:

For this example let’s pick MariaDB database type:

Now let’s pick the database admin panel softwar for the database, let’s pick "standalone" and afterwards..

…in this case "PHPMyAdmin" :

Afterwards we can pick the web integrated development environment we want to use for editing the Py4Web code base.

There are IDEs of the type "standalone" and "embedded" .

Let’s pick the "embedded" and VSCode type.

The "standalone" IDE (integrated development environment) type creates environments which are standalone web environments that mount the code base from the Py4Web environment, much like a sidecar.

The standalone IDE type will be intersting for a later stage when collaborating and code sharing will be discussed as you can also have multiple of this. This type does not have access to the Python interpreter in the main environment.

Generally it is recommended to use the "embedded" IDE type which runs in the same environment as your codebase which makes it possible to drop to a web terminal or install additional packages and libraries easy in the same environment as your Python interpreter, virtual environments and code reside right there. Especially if you are the only or main developer.

This type can only be deployed once

(of each type e.g. VSCode + Jupyter, but not two times VSCode for example).

Now that we completed our choices, lets finalize the deployment.

In order to that click on "Toggle Form / Selection" :

Give your workspace setup a short meaningful name and pick the hosting location. Today Websson only offers "Falkenstein/Germany" so let’s pick that.

Now that we made all relevant choices you can create the development environment by clicking "Create environment" :

The first step of the environment creation process for Py4Web is to choose an Py4Web administrator password and optionally the default home page.

We don’t have a default Py4Web app yet that we want to route to as a index / home page for the URL that you Py4Web environment will be reachable on, so we can leave this blank.

Make sure you create an admin password (and take a note of it somewhere) so you can access the Py4Web admin dashboard later:

Now click on "Create Base Framework" .

You will now see that the Py4Web web framework will be deployed for you with a progress bar:

Once that step is done you will be asked to provide the MariaDB root password and default database name. You will also be asked to provide a password for a default MariaDB user.

Please enter a root password for the MariaDB root user, regular username + password and default database to be created at this step.

Now click on "Create Database Engine" .

You will see the following progress bar deploying the datbase:

After the deployment of the database finishes you can give the PHPMyAdmin instance a name of your choice in the next deployment step:

Now you will see the progress bar moving while deploying the PHPMyAdmin environment for your database administration:

The last step is to give a name to your VSCode web IDE:

And have it deployed after you click on "Create IDE / Editor" :

After the deployment is finished you will be redirected to the main portal page to administrate and use your fresh new cloud coding workspace.

You can also see what resources you have currently deployed and how much resources you have used up:

When you click on the Py4Web logo you will be redirected to your deployed Py4Web web page:

Now you should see this:

When you click on the Py4Web dashboard and enter the admin password you have setup at the beginning of the deplyoment process you will be able to login to the familiar web ide provided by Py4Web:

Now if you want to use the more sophisticated VSCode web ide that Websson has deployed for you, please navigate back to the Websson admin page and click on “admin”:

In the admin menu you can now see a lot of features that Websson provides to make developing in the Cloud easy, but we will get to each feature later.

You can also of course see what features of your subscription you have used up.

In order to use the VSCode web ide go to the "IDE / Editor" menu item:

Here you can click on the VSCode icon which will redirect you to your VSCode Py4Web workspace.

Don’t worry, the link is secured with a unique token which is used in the link. The token can also be viewed in the menu:

Now you can see your VSCode web environment loading and pick a color theme.

I prefer black so I will use that in the screenshots going forward.

In order to edit Py4Web code, click on the upper left corner, the "File" menu and click on "Open folder" then open the folder path "/home/websson/py4web/apps":

VSCode will ask you if you trust the code authors, please click on "I trust them" and set the appropiate checkmark:

Now you will see the file paths and files that you can edit on the left hand side.

Open the folder of the Py4Web provided sample app “todo” and the index.html template.

Then just to get familiar with the editing process, change the template a bit and save the changes by using the STRG+S hotkeys or go to the File menu and click on save.

Now you can navigate to the Py4Web standard todo app (*YOUR-PY4WEB-URL*/todo) and see your changes being instantly applied:

Next let’s install the Python VSCode extension to be able to use debugging and other features of the VSCode IDE with Python:

Afterwards lets’s get familiar how to open a web terminal by going back to the upper left corner menu and navigate to "Terminal" and then "New Terminal" :

While the Py4Web environment features autostart and auto-refresh upon code changes, it is often useful during debugging to see the full terminal output of the running Py4Web shell.

In order to do that, we need to kill the Py4Web process that was started automatically and start Py4Web again from the shell manually:

To kill the current Py4Web instance run:

killall python

Make sure you cd into /home/websson/py4web.

Then activate the default Websson Python virtual environment "default_py_env" by executing:

source ../default_py_env/bin/activate

Now with environment activated and in the path of

/home/websson/py4web

you can run Py4Web with the following command:

py4web run -H 0.0.0.0 -P 80 --watch sync apps/

If you want to run Py4Web as background process at the “&” at the end as usual, otherwise Py4Web will now terminate as your web terminal session ends.

py4web run -H 0.0.0.0 -P 80 --watch sync apps/ &

Now you can also see how to add Python packages via pip to the the standard virtual environment as usual.

Websson features a fully functional installation of Mamba which is an open source version of the Python Conda package manager with the packages of the open source / free Conda (Conda-Forge) channel activated by default.

This makes it easy for you to create new virtual environments via Python venv, Conda or any way you see fit to run Py4Web. Of course you can also install a PyPy interpreter this way. Try it out in the terminal:

conda -version

Futhermore Websson environments also feature the ASDF package manager, which lets you install furter programming languages or libraries into your Websson environment, such as Node.JS. Of course you can then also install Vue.JS, React or Angular etc. in the same environment and connect to Py4Web as an API.

With a simple

asdf plugin install node 

you could add a version of Node.js to your environment as you see fit.

Using

python -m venv testenv

for example would install a further virtual Python environment in your Websson workspace that you can customize:

Now let’s switch gears and learn how we can connect to the MariaDB database that we deployed earlier with PHPMyadmin which we also deployed and use it with our Py4Web installation.

In order to get the local connection string to the MariaDB database which we need for PHPMyAdmin and for Py4Web, we need to navigate back to the Websson portal and go to "Database Engine Manager" .

Here we can see the connection string that only works for your local Websson environments.

Copy this connection string as we will need to paste it in the next steps.

With the DB connection string copied into your clipboard navigate to the menu item "Database GUI Manager" :

And then click on the PHPMyAdmin logo:

In the PHPMyAdmin login screen paste the connection URL, then enter "root" for the username and enter the password you set for the root user when you deployed the database:

You should now have connected to the MariaDB you deployed earlier with PHPMyAdmin:

You can also see the database name of the database you told Websson to create during deployment, which is in this case "dbase".

Let’s connect Py4Web to this database.

Navigate back to the VSCode web ide where Py4Web is running and stop Py4Web using CTRL-C.

We can now re-run Py4Web as background task:

py4web run -H 0.0.0.0 -P 80 --watch sync apps/ &

Now CD into /home/websson/py4web/apps .

Here we will make a copy of the Py4Web scaffold app:

cp -r _scaffold testapp

You can see Py4Web is automatically reloading and registering the new app.

We can install the MariaDB driver now via:

pip install PyMySQL

You may also want to remove the database folder at this point from testapp.

Run

cd testapp

and then

rm -rf databases"

Finally run:

"mkdir databases"

Back in VSCode please also open the “settings.py” file in the testapp folder and locate the line "DB_URI = "sqlite..."

Replace the line with the MariaDB connection string in order to connect to the MariaDB with the root user Copy and paste the connection URL for the database just like you did before when connecting with PHPMyAdmin. Re-use the database credentials for the root user. For example:

mysql://root:"PASSWORD"@"CONNECTIONURL"/"DATABASENAME"

Your connection string should be looking similiar to this:

mysql://root:XXXXX@srv-captain--kevstest-py4webtest-mdb-dbase/dbase?set_encoding=utf8mb4

The testapp should be ready to go now with all database migrations done.

If you get any errors, including database driver errors just re-start Py4Web manually and everything should be ok:

kilall py4web

then

py4web run -H 0.0.0.0 -P 80 --watch sync apps/ & 

If you go to PHPMyAdmin now you will see that Py4Web created some tables automatically for user manager in the "dbase" database:

Go ahead and navigate back to the Py4Web page and check your dashboard for the "testapp" and click on the route/link to check out "testapp":

You should see the testapp now connected to MariaDB:

If you don’t like the VSCode web version and prefer to use the VSCode desktop app or another desktop based IDE that supports SSH connectivity you can also use an SSH tunnel to edit code.

Navigate back to the Websson admin menu and click on "SSH Privat Key" to download the private SSH key, check the URL and port that you need to connect to your Py4Web environment via VSCode or PyCharm via SSH.

If you would like to create a web terminal with username and password without the need to create an IDE, you can also go the menu item "TERMINAL/ PROMPT MANAGER" and select the "Standard" type of terminal and choose a username and password and go ahead and create a web terminal.

If you wish to also safeguard your web page with an additional HTTP user/password authentication or take your web page offline for a while you can do that by going to "PRIVACY / AUTHENTICATION“.

With Websson you can also set a customer "landing page” so that when you share the URL of you Py4Web Websson hosted app users will be redirected to a specific Py4Web app or index page per default.

In order to set this up navigate to "LANDING PAGE" in the Websson menu and enter the name or relative path to the page Websson should redirect:

Furthermore Websson offers the ability to have the environment restarted, for that just click on the green "RESET" button in the upper right corner.

This concludes the fundamental functionalties to setup a Py4Web environment in Websson.

An additional post will describe more advanced features such as using a custom domain, increasing the number of web workers for scalability and how to use the safe code sharing and collaboration feature.