One place for hosting & domains


      How To Install Django and Set Up a Development Environment on Ubuntu 20.04


      Django is a free and open-source web framework written in Python with its core principles being scalability, re-usability and rapid development. It is also known for its framework-level consistency and loose coupling, allowing for individual components to be independent of one another.

      In this tutorial, we will set up a Django environment for development purposes on an Ubuntu 20.04 server. For a live website, you will have additional considerations, including connecting to a database, setting up a domain name, and adding layers of security. We have a variety of tutorials on Django that can help support you as you build under our Django tag.


      In order to complete this tutorial, you will need:

      Step 1 — Installing Django

      There are several ways to install Django, the Python package manager pip within a virtual environment.

      While in the server’s home directory, we’ll create the directory that will contain our Django application. Run the following command to create a directory called django-apps, or another name of your choice. Then navigate to the directory.

      • mkdir django-apps
      • cd django-apps

      While inside the django-apps directory, create your virtual environment. We’ll call it the generic env, but you should use a name that is meaningful for you and your project.

      Now, activate the virtual environment with the following command:

      You’ll know it’s activated once the prefix is changed to (env), which will look similar to the following, depending on what directory you are in:

      Within the environment, install the Django package using pip. Installing Django allows us to create and run Django applications.

      Once installed, verify your Django installation by running a version check:

      This, or something similar, will be the resulting output:



      With Django installed on your server, we can move on to creating a test project to make sure everything is working correctly. We’ll be creating a skeleton web application.

      Step 2 — Adjusting Firewall Settings

      If you followed our initial server setup tutorial or have a firewall running on your server, we’ll need to open the port we’ll be using in our server’s firewall. For the UFW firewall, you can open the port with the following command:

      If you’re using DigitalOcean Firewalls, you can select HTTP from the inbound rules. You can read more about DigitalOcean Firewalls and creating rules for them by modifying the inbound rules.

      Step 3 — Starting the Project

      We now can generate an application using django-admin, a command line utility for administration tasks in Python. Then we can use the startproject command to create the project directory structure for our test website.

      While in the django-apps directory, run the following command:

      • django-admin startproject testsite

      Note: Running the django-admin startproject <projectname> command will name both project directory and project package the <projectname> and create the project in the directory in which the command was run. If the optional <destination> parameter is provided, Django will use the provided destination directory as the project directory, and create and the project package within it.

      Now we can look to see what project files were just created. Navigate to the testsite directory then list the contents of that directory to see what files were created:

      Output testsite

      You will notice output that shows this directory contains a file named and a folder named testsite. The file is similar to django-admin and puts the project’s package on sys.path. This also sets the DJANGO_SETTINGS_MODULE environment variable to point to your project’s file.

      You can view the script in your terminal by running the less command like so:

      When you’re finished reading the script, press q, to quit viewing the file.

      Now navigate to the testsite directory to view the other files that were created:

      Then run the following command to list the contents of the directory:

      You will see four files:


      Let’s go over what each of these files are:

      • acts as the entry point for your Python project.
      • contains the configuration for the optional deployment to the Asynchronous Server Gateway Interface or ASGI, which provides a standard for apps that are either synchronous and asynchronous, and is considered to be a successor of WSGI (see below).
      • describes the configuration of your Django installation and lets Django know which settings are available.
      • contains a urlpatterns list, that routes and maps URLs to their views.
      • contains the configuration for the Web Server Gateway Interface or WSGI, which provides a standard for synchronous Python apps.

      Note: Although default files are generated, you still have the ability to tweak the or files at any time to fit your deployment needs.

      Step 4 — Configuring Django

      Now we can start the server and view the website on a designated host and port by running the runserver command.

      We’ll need to add your server ip address to the list of ALLOWED_HOSTS in the file located in ~/test_django_app/testsite/testsite/.

      As stated in the Django docs, the ALLOWED_HOSTS variable contains “a list of strings representing the host/domain names that this Django site can serve. This is a security measure to prevent HTTP Host header attacks, which are possible even under many seemingly-safe web server configurations.”

      You can use your favorite text editor to add your IP address. For example, if you’re using nano, run the following command:

      • nano ~/django-apps/testsite/testsite/

      Once you run the command, you’ll want to navigate to the Allowed Hosts Section of the document and add your server’s IP address inside the square brackets within single or double quotes.

      Django settings for testsite project.
      Generated by 'django-admin startproject' using Django 2.0.
      # SECURITY WARNING: don't run with debug turned on in production!
      DEBUG = True
      # Edit the line below with your server IP address
      ALLOWED_HOSTS = ['your-server-ip']

      You can save the change and exit nano by holding down the CTRL + x keys and then pressing the y key. Next, we’ll go on to access our web app via a browser.

      Finally, let’s create an administrative user so that you can use the Djano admin interface. Let’s do this with the createsuperuser command:

      • python createsuperuser

      You will be prompted for a username, an email address, and a password for your user.

      Step 5 — Accessing the Django Web App

      With our configuration completed, be sure to navigate back to the directory where is located:

      • cd ~/django-apps/testsite/

      Now, run the following command replacing the your-server-ip text with the IP of your server:

      • python runserver

      Finally, you can navigate to the below link to see what your skeleton website looks like, again replacing the highlighted text with your server’s actual IP:


      Once the page loads, you’ll see the following:

      Django Default Page

      This confirms that Django was properly installed and our test project is working correctly.

      To access the admin interface, add /admin/ to the end of your URL:


      This will take you to a login screen:

      Django admin login

      If you enter the admin username and password that you just created, you will have access to the main admin section of the site:

      Django admin page

      For more information about working with the Django admin interface, please see “How To Enable and Connect the Django Admin Interface.”

      When you are done with testing your app, you can press CTRL + C to stop the runserver command. This will return you to your programming environment.

      When you are ready to leave your Python environment, you can run the deactivate command:

      Deactivating your programming environment will put you back to the terminal command prompt.


      In this tutorial you have successfully installed Django and set up a development environment to begin working on your Django app.

      You now have the foundation needed to get started building Django web applications.

      Source link

      Working with Environment Variables in Vue.js

      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      In this post, we’ll learn how to work with distinct configurations between development and production mode for Vue.js projects that use the CLI’s webpack template.

      In a web app, we most likely have to access a backend API server through a URL. This URL can be something like http://localhost:8080/api while in development, and in production when the project is deployed. Environment variables allow us for an easy way to change this URL automatically, according to the current state of the project.

      An easy way to use environment variables with Vue and the webpack template is through files with a .env extension. These files become responsible for storing information that’s specific to the environment (development, testing, production,…)

      The majority of this post applies to apps using v2.x of the Vue CLI, but environment variables are just as easy to manage in the Vue CLI v3.

      Using .env Files in Vue

      The simplest way to use .env files in Vue is to create an application that already supports environment files. Let’s use the vue-cli and the webpack template for that.

      With Node 8 or higher installed, run the following, where my-app is your app name:

      $ npx vue-cli init webpack my-app

      This command will create an application with several files ready for use. In this post, we’re focusing only on the environment configuration, which can be accessed in the config directory:

      Project file structure

      There are two files in the config directory: dev.env.js and prod.env.js, and you’ll also have a test.env.js file if you’ve configured tests while initiating the project. These files are used in development and production mode, or in other words, when you are running the application through the npm run dev command, the dev.env.js file is used, and when you compile the project for production with the npm run build command, the prod.env.js file is used instead.

      Let’s change the development file to:


      'use strict'
      const merge = require('webpack-merge')
      const prodEnv = require('./prod.env')
      module.exports = merge(prodEnv, {
        NODE_ENV: '"development"',
        ROOT_API: '"http://localhost/api"'

      Our development environment file has an additional variable called ROOT_API, with the value http://localhost/api.

      Now let’s change the production file to:


      'use strict'
      module.exports = {
        NODE_ENV: '"production"',
        ROOT_API: '""'

      Here we have the same ROOT_API variable, but with a different value, which should only be used in production mode. Note how string variables need the double quotes inside the single quotes.

      Using the Environment Files in Your Code

      After creating the ROOT_API variable, we can use it anywhere in Vue through the global process.env object:


      For example, open the src/components/HelloWorld.vue file and in the <script> tag add the following:

      mounted() {

      After running npm run dev, you will see the console.log information in the browser dev tools:

      Running the app

      If you run the npm run build command, the dist directory will be created with the application ready to be deployed to a production environment, and the variable ROOT_API will display the value, as specified in prod.env.js.

      Thus, we can work with different variables for each different environment, using the ready-made configuration that the webpack template provides us. If you use another template, make sure you find an equivalent feature or use a library like dotenv to manage your environment variables.

      What About Vue CLI 3?

      If your app is using the new Vue CLI, you’ll want to instead have files like .env and at the root of your project and include variables like this:




      The VUE_APP_ prefix is important here, and variables without that prefix won’t be available in your app.

      Source link

      How To Install Python 3 and Set Up a Programming Environment on Ubuntu 20.04 [Quickstart]


      Python is a flexible and versatile programming language, with strengths in scripting, automation, data analysis, machine learning, and back-end development.

      This tutorial will walk you through installing Python and setting up a programming environment on an Ubuntu 20.04 server. For a more detailed version of this tutorial, with more thorough explanations of each step, please refer to How To Install Python 3 and Set Up a Programming Environment on an Ubuntu 20.04 Server.

      Step 1 — Update and Upgrade

      Logged into your Ubuntu 20.04 server as a sudo non-root user, first update and upgrade your system to ensure that your shipped version of Python 3 is up-to-date.

      • sudo apt update
      • sudo apt -y upgrade

      Confirm installation if prompted to do so.

      Step 2 — Check Version of Python

      Check which version of Python 3 is installed by typing:

      You’ll receive output similar to the following, depending on when you have updated your system.


      Python 3.8.2

      Step 3 — Install pip

      To manage software packages for Python, install pip, a tool that will help you manage libraries or modules to use in your projects.

      • sudo apt install -y python3-pip

      Python packages can be installed by typing:

      • pip3 install package_name

      Here, package_name can refer to any Python package or library, such as Django for web development or NumPy for scientific computing. So if you would like to install NumPy, you can do so with the command pip3 install numpy.

      There are a few more packages and development tools to install to ensure that we have a robust set-up for our programming environment:

      • sudo apt install build-essential libssl-dev libffi-dev python3-dev

      Step 5 — Install venv

      Virtual environments enable you to have an isolated space on your server for Python projects. We’ll use venv, part of the standard Python 3 library, which we can install by typing:

      • sudo apt install -y python3-venv

      Step 6 — Create a Virtual Environment

      You can create a new environment with the pyvenv command. Here, we’ll call our new environment my_env, but you should call yours something meaningful to your project.

      Step 7 — Activate Virtual Environment

      Activate the environment using the command below, where my_env is the name of your programming environment.

      • source my_env/bin/activate

      Your command prompt will now be prefixed with the name of your environment:

      Step 8 — Test Virtual Environment

      Open the Python interpreter:

      Note that within the Python 3 virtual environment, you can use the command python instead of python3, and pip instead of pip3.

      You’ll know you’re in the interpreter when you receive the following output:

      Python 3.8.2 (default, Mar 13 2020, 10:14:16) 
      [GCC 9.3.0] on linux
      Type "help", "copyright", "credits" or "license" for more information.

      Now, use the print() function to create the traditional Hello, World program:


      Hello, World!

      Step 9 — Deactivate Virtual Environment

      Quit the Python interpreter:

      Then exit the virtual environment:

      Further Reading

      From here, there is a lot you can learn about Python, here are some links related to this guide:

      Source link