The Real Deal - Setting Django Up On Educative! :)

Now that we have all the files in hand, let’s get to the real deal: making a Django environment for our soon to be launched course on Educative!

Design the custom environment

Docker file

The custom environment is designed using a docker file as we just discussed. The Dockerfile is directly nested in the tarball django-docker.tar.gz. You can download it from the end section of the first, Getting Started lesson.

Course creation

Navigate to the Teach section and create a new course or edit an existing course. Name the course Django on Educative. If you scroll down a bit, you will see the DOCKER CONTAINER section.

Click on the Change Docker File (Beta) button and select the tarball django-docker.tar.gz from your computer. Click on the Save button to start the image building process.

Building an Image

Building an image will take a few minutes. If your image is built successfully, you will see the following message.

However, if your image build has failed, then you will view the following.

In case the build fails, click on the Download build logs button, shown above, to see where the build process failed.

Docker jobs

The docker file defines the custom environment. On the other hand, a docker job tells Educative how to run the application in that environment. To add a job, click the plus button on the DOCKER CONTAINER section, as follows:

Sample Docker job

A sample docker job to run SPA in LiveVM is depicted below. Note that you will have to select a Docker Job Type, which in our case will be Live.

In the above image, for a LiveVM, the following four fields cannot be kept empty:

• Job Name
• Run Script
• Start Script

Breaking down the Docker job

Let’s discuss each of the components that we have to specify while creating a docker job:

Job Name

This field is used to refer to a job during lesson design. You can name your job as you like.

Input File Name

Here you specify any files you want to run in the SPA widget. This is just a dummy field for the time being (i.e. optional in our case). You can enter “foo” to fill it.

Run Script

cp -r /usercode/* /usr/local/educative/

All the files on our frontend (the files visible to us as users in the SPA widget’s left most end), that we make changes to, are kept in the /usercode directory. In order to mirror any changes in the frontend on the backend, we copy updated files and folders from /usercode directory to /usr/local/educative.

Note: All files and folders in the tarball we mentioned earlier will be available inside the docker container in the following directory: /usr/local/educative.

Application Port

This is the port that will be used to serve the SPA. Ports between 8500-9500 are usually reserved on Educative, so try not to use these. Note that we expose port 8000, in our docker file, so we’ll use that here.

Force Relaunch On Run

Checking this checkbox will relaunch the SPA widget every time a user presses the RUN button.

Start Script

cd /usr/local/educative && chmod +x start.sh && ./start.sh && echo "the best!" && echo Hello World

This script is executed once when the code is run for the first time. Here we are

1. setting current directory as /usr/local/educative
2. setting permissions to execute start script and then
3. finally running that file to start the server.

You can echo anything here to check if the start script is working. For now, though you can ignore the echo lines, they are just for testing on our end.

Our Docker job

This is how our docker job will look once you fill in all the required fields:

ALLOWED_HOSTS and Environment Variables

This step can be followed hands-on later after SPA has been made by you in your lesson, for now just read for understanding.

In order to host our app, we need to specify the hosts we are allowing for this purpose. When the SPA widget with LiveVM enabled is run, Educative assigns each author a unique host link.

To add this host to our Django project, we click on the world or globe icon as shown below and add an Environment Variable.

Without getting into too much detail and jargon, Environment Variables come in key-value pairs and the Educative platform intelligently detects where an Environment Variable’s value is needed in a code file that mentions its key, and how the key’s can be replaced with their respective values wherever specified in any code file, without manually having to set a value in case of multiple files.

In our case, we specified earlier, that we’d need ALLOWED_HOSTS variable in our settings.py file to host our app. As shown in the image above,

1. Click the globe icon.
2. Set the name of the key as ALLOWED_HOSTS.
3. Set value to be the link (only the part after https://) that you see displayed underneath the SPA widget as shown below:

This, however, as mentioned earlier, won’t be available until you make a SPA in your lesson, so for now, just add the key name as ALLOWED_HOSTS and set value as a dummy link, so that environment variables are enabled. We will edit it later when SPA is made. Click on the save icon to save the key.

If you want to learn more on what environment variables are on Educative, visit this lesson

Then, click on Update to save the job.

Design and execute a lesson

Lesson design - The SPA

Add or edit a lesson and select the SPA widget. Select the docker job required to execute the lesson as shown in the screenshot below.

The source code can be modified based on the lesson requirements. Import your project repository from GitHub. For our helloworld project’s sake, we will use this link: https://github.com/farrukh-educative/django-setup-educative.git

Click Import code from Github, paste in the above link, and click Apply. All your files will line up automatically from GitHub to the files space on the left-hand side of your SPA widget. These are all saved in the main /usercode/ directory.

Any changes you make to these files in the frontend will be mirrored in the backend. If you make changes to the git repository, import the code again just to be sure changes have been mirrored correctly.

You can edit and write your code in these files as well.

Lesson execution

Once you selected the docker job, a URL will be displayed, at the bottom of the SPA widget, as shown earlier. Copy the URL (only the part after https://). Save the lesson and head over to the Preview mode. You will see a box, above the SPA widget, with the Environment Variable that we added earlier, as shown below.

Click on the Edit button, and copy-paste that URL in the value section for the ALLOWED_HOSTS key.

Also, change this in the docker job you made earlier (see the ALLOWED_HOSTS and Environment Variables section above).

Click the Run button in the SPA widget to start lesson execution in the custom environment.

After these updates have been made, clicking on that URL will open the SPA in a new browser tab.

The Output and Terminal tabs should look something similar to the following when you run the SPA widget:

Experience the Real Deal: Live Demo Below!

We’ve set everything up for you in the live demo below.

Please note: As discussed earlier, every author will have a unique host for their app. You can change this by clicking on Edit button, in the panel above the widget and changing the value. See the images below:

The link to be copied is given below the SPA widget as “Your app can be found at:…”. Copy only the part after https://, add it in the ALLOWED_HOSTS key you set in the docker job environment variable earlier, and then click Save.

Go ahead and RUN the SPA playground below.

After running the below code, you should be able to see “Hello World! Welcome to Educative$!” message displayed out on the console.

Click on the link, below the SPA widget, to see the same result there.

Live Demo

Please note: Terminal timeout is around 30 minutes, after which a new session will be initiated.

Busy ports issue

Please Note: In case of busy ports follow the below commands to kill processes that may be using up the ports. The following illustration will help you clear that up:

Random errors

In case you encounter random errors like the following:

This maybe an issue on our backend. Try re-running the code and try again, it should work.

There you have it, that was how we set up a Django container on Educative’s platform. :)

---

In the next lesson, we’ll talk about moving forward from this point.

See you there! :)