DEV Community: Benjamin Bliss

Building a webchat site from scratch, part 2

Benjamin Bliss — Thu, 22 Jun 2023 04:58:19 +0000

Today I did a good amount of restructuring and replanning on how I want to handle this project. As I was looking into how to do front end development with JavaScript I began to get really lost as I was trying to connect it all back to the backend Python side of it. Not good considering on that side of things I am still learning and as such my knowledge is shaky. Thankfully I came across another tutorial from the Youtuber TechWithTim on creating a website (which can be found here:
Python Website Full Tutorial), where he uses a Flask backend and but uses Jinja with Bootstrap in the html to simplify that side of the project so the focus could be on the back end.

I restructured the project to better organized the files as the project grew. I created a 'website' package to store just about everything except for app.py, see below.

In it is of course the init.py file, signaling that the folder is a package. That file contains the following code:

app.py is where the app launches from, the static folder is future proofing for JavaScript/TypeScript files in the future and in a similar vein, the models.py will be for modelling the sql database down the line. The templates folder contains all the .html files. Thanks to Jinja making the html as been a lot easier. It allows you to make a base template file to act as a skeleton for the rest of your production html files to build off of reducing the amount of code you have to write.

The init.py file is what allows the website folder to be seen as a Python package by app.py. It contains the code below

def init_app():
    app = Flask(__name__)
    app.config['SECRET_KEY'] = "nC1iuUeNlNe"

    from .views import views
    from .auth import auth

    app.register_blueprint(views, url_prefix='/')
    app.register_blueprint(auth, url_prefix='/')

    return app

After creating the Flask app it grabs the pages designed/specified in the views.py and auth.py files so they can be reached by the app.

While there is still no actual functionality I was able to build some pages for the sign up and log in pages

All code can be found at the link below :)
webchat

Building a webchat site from scratch, part 1

Benjamin Bliss — Sun, 18 Jun 2023 21:47:35 +0000

Today I've learned about Python's virtual environment, aka venv. The venv folder seems to be an unique environment used for each independent project. Python isn't very good at dependency management and for every new package you install, they will be stored in the site-packages/ folder at Python base installation directory.

The value in having a virtual environment comes in a number of ways. first it helps avoid system pollution. Many operating systems including the one I'm using use Python for internal tasks, so installing dependencies directly may cause unintended side effects. Virtual environments avoid dependency conflicts, such that various projects depend on different versions of a package, they can each use the version they're built for.

There seems to be more but this is the gist that I was able to gather, and as such I plan on using virtual environments in all my projects moving forward.

To create my virtual environment I ran the following command
python3 -m venv venv

and to activate it I ran this in my project directory:
source ./venv/bin/activate

Just like that I have built a running website, not that it does much. It takes be to a page that just says welcome, as specified in the homePage function. Its just cool to see a site up and running that quickly

from flask import Flask

# create instance of flask app
app = Flask(__name__)

# decorator sets this as root in website
@app.route("/")
def homePage():
    # html that is being run on the page
    return "welcome"

if __name__ == "__main__":
    app.run()

All code can be found in the repository below :)
https://github.com/BenpaiXD/webchat

Building a webchat site from scratch, part 0

Benjamin Bliss — Sun, 18 Jun 2023 18:39:10 +0000

Computer Science and software development is one of those fields where it doesn't seem to matter much about what school you went to or how you did in your classes. What I have come to learn is demonstrating your skills through personal projects as it shows your personal drive and passion towards your work.

As I am short on some projects myself and am looking towards applying to jobs I thought this would be a great opportunity to get started on some projects of my own hence the building of this webchat. I'm starting off simple with just a chat webapp as I think it will teach me about front and back end development, data storage and more.

I've decided to make it in two languages. I've chosen to make the front end in TypeScript as I'm not very familiar with JavaScript and I've heard a lot of good things about TS, with it being a straight improvement over JS. And Python, a language I am very familiar with, but using Flask, a web application framework to handle the backend, which I am unfamiliar with. I considered using Django, another industry standard framework, but from the research I've done, Flask seems to be lighter weight and easier to get up and running.

I will be hosting this website myself, as I was able to grab an retired micro desktop from my work. I've installed Ubuntu server on to it with NodeJS, Python and any other dependencies I may need and I'll be connecting to it through SSH from my PC and laptop to work on it.

This blog will be me journaling any new thing I learn through the process of building the website, noting any changes I make and milestones I reach. I will be basing the foundation of my project off this article I found: Python backend with JavaScript frontend: how to. It goes through setting up a website just similarly to how I want to, just I will be using TypeScript instead.

With that said lets get started on the website in part 1.