A Django FotoBlog in VS Code — Quick Start

How To Create A FotoBlog in VS Code — Part I — DjangoSeries Episode # 15

Starter code for this episode: GitHub link

Hi everyone! In this article we will create a photo album app named: fotoBlog.

(☝️ Image borrowed & tutorial based on Create a Web Application With Django from open-classroom site) — Description: This will be an app where people can list various collectible music merchandise like records, posters, and gig tickets. In addition, users should be able to post listings of the merch they would like to sell.

We’ll initialize our project in a batch script at the Terminal command line (Ubuntu 22.04.2 LTS):

00#Step — Go to this post and get your vs code ready for Python.

01#Step — Type this sequence in your command prompt:

mkdir fotoblog
cd fotoblog
python -m venv ENV
source ENV/bin/activate
pip install django
pip freeze > requirement.txt
django-admin startproject fotoblog
cd fotoblog
python manage.py startapp authenticate
python manage.py startapp blog
code .
exit

📝️ hint: copy / paste & hit enter

VS Code will open. 👐️

The Django developer team itself recommends that you use Python virtual environments.

After environment setup we create the Django project and apps (fotoblog, authenticate & Blog)

As you can see to create a new Django project open your command prompt and navigate to the directory where you want to create your project. Then run the following command:

django-admin startproject projectname

Replace projectname with the name of your project, in our case fotoblog.

Now, to create a new Django App, After creating the project, you need to create an app within the project. Apps are individual components of your project that perform specific tasks. Run the following command in your command prompt:

python manage.py startapp appname

That's it! You have now successfully initialized a Django project and created the fotoblog app within it.

VS Code Explorer showing project/Apps dirs/files; note that fotoblog is a working, but empty, Django Project; while blog & authenticate are the Apps that might perform specific tasks. Each app should have an appropriate name that represents the concept that it is responsible for. This is a Django project structure convention. Each app directory is specific to one app. But your project directory contains project-wide configuration files — it’s like the mission control of your Django project. It’s best practice to add your app to the bottom of the list so that it’s the last to load.

02#Step — Open fotoblog/settings.py add this config:

INSTALLED_APPS = [
  
  ...
 'blog.apps.BlogConfig',
 'authenticate.apps.AuthenticateConfig',

]

In Django, registering an app in the settings.py file tells Django to include that app in the project and makes its functionality available to the project.

Here is how to specifies the name of your app:

myapp.apps.MyAppConfig

Once you’ve added the app to the INSTALLED_APPS list, Django will automatically discover the app's models, templates, static files, and other resources and make them available to the project.

03#Step — Database error:

Let’s look back at a message that appeared when we ran the runserver subcommand:

To fix this we will make migrations in the future... BTW, What are migrations? What are migrations used for? Migrations are helpful because they allow database schemas to evolve as requirements change. They help developers plan, validate, and safely apply schema changes to their environments.

About migrations, for now, you just need to understand that migrations are a way to set up your application’s database.

04 #Step — Initialize git from VS Code:

Run this command to create .gitignore file:

echo __pycache__ >> .gitignore
echo ENV >> .gitignore
echo db.sqlite3 >> .gitignore
git add .
git commit -m "Add gitignore file"      

As I Already have in my repo a project named fotoblog, for this tutorial, I saved as fotoblog_v1 in dev branch (optional):

git branch -M dev

• M must be used to force the rename to happen (link to git docs).

Go to VS Code Source Control (Ctrl+Shift+G) and hit Initialize Repository button.

Now on the message text field type “first commit” and hit Commit button. Now you can open your github repo to see your project uploaded successfully!

As you can see I click on the action gear (floating right) and set some helper description: this is one way of how to keep visitors on your page.

Now that you’ve created a bare-bones project and app and verified your local environment is ready for development, you’re ready to create your application’s first web page.

In the upcoming episode of DjangoSeries we’ll make migrations, build an Authentication app from first principles, giving users the ability to sign up and log in to our web application. We’ll then use some of the advanced models and forms features to build a blog post creation interface on the site.

See you there!

Bye for now!

References & Credits

Create a Web Application With Django by openclassrooms.com

Git git-branch Docs by git-scm.com

A Django Blog In VS Code — Quick Start! by jungletronics

Tagging:

Note: run in one line in the terminal.

git tag -a Episode.01 -m "FotoBlog - v1.0:  from http://jungletronics.com"  
                -m "First Episode Tutorial - DjangoSeries - Step-by-step list:" 
                -m "1-Environment setup;" 
                -m "2-Deployment of the Project & Apps;" 
                -m "3-Init github repo" 

git push origin Episode.01

Note: on github repo click tag. I am using Python 3.7.6 — Django 3.2.18.

Nave-Gate-Tuts-Parts: I . II . III . IV . V . VI . VII . VIII . IX . X