Python Pyramid - Static Assets - Coding

A lightweight web framework in Python that converts small web apps to large web apps is called Pyramid. There are various circumstances when the user needs to add some images, HTML code, CSS code, etc. along with the Python code in the web app. These are called static assets and can be added using the Pyramid in Python.

Python Pyramid – Static Assets

Syntax: config.add_static_view(name=’static’,path=’static’)

Parameters:

name=’static’ : name or route prefix for the static view

path=’static’ : directory on the server where the static files are stored

The ‘static’ directory is used to store the static assets. There are three static assets in Python Pyramid:

Image
CSS File
JavaScript File

Static Asset: Image

The visual representation of something is called an image. It is very crucial to add images to the app to make it attractive. In this way, we will see how we can add static assets, and images to the web app using Pyramid.

app2.py

In this example, we created a Python file app2.py under the package pyramid1. We have defined a constructor in the app in which we have added the static view.

Python3

# Import wsgiref and pyramid libraries
from wsgiref.simple_server import make_server
from pyramid.config import Configurator
from pyramid.view import view_config
 
# Create view config
@view_config(
    route_name='hello',
    renderer="static/templates/home.jinja2"
)
 
# Create a function to print value
def home(request):
    return {'greet':'Welcome to Geeks For Geeks!'}
 
# Create a constructor to define the app
if __name__=="__main__":
    with Configurator() as config:
        config.include('pyramid_jinja2')
        config.add_static_view(name='static',path='static')
        config.add_route('hello','/')
        config.scan()
        app=config.make_wsgi_app()
    server=make_server('0.0.0.0',6543,app)
    server.serve_forever()

home.jinja2

Now, we have created a folder templates under static. In this templates folder, we have created the home.jinja2 file. In this file, we have defined the static asset image that we want to display on our web app.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{greet}}</title>
</head>
<body>
<h1> {{greet}}</h1>
<img src="static/horje.jpg" style="width: 570px;">
</body>
</html>

horje.png

Here, we have used the Geeks For Geeks logo (link) as an image, which we have placed in the static folder. Thus, the package will look similar to this:

Screenshot-2023-11-09-120509

Output:

Now, run the following command in the terminal to run the app.

python app2.py

For seeing the webapp, open the browser of your choice, and type the URL, http://localhost:6543/

Screenshot-2023-11-09-115603-(1)

Static Asset: CSS File

The way of displaying HTML elements in known as CSS. It is very crucial to add CSS in web app for making it attractive. In this way, we will see how we can add static asset: CSS to the web app using Pyramid.

app2.py

In this example, we created a Python file app2.py under the package pyramid1. We have defined a constructor in the app in which we have added the static view.

Python3

# Import wsgiref and pyramid libraries
from wsgiref.simple_server import make_server
from pyramid.config import Configurator
from pyramid.view import view_config
 
# Create view config
@view_config(
    route_name='hello',
    renderer="static/templates/home.jinja2"
)
 
# Create a function to print value
def home(request):
    return {'greet':'Welcome to Geeks For Geeks!'}
 
# Create a constructor to define the app
if __name__=="__main__":
    with Configurator() as config:
        config.include('pyramid_jinja2')
        config.add_static_view(name='static',path='static')
        config.add_route('hello','/')
        config.scan()
        app=config.make_wsgi_app()
    server=make_server('0.0.0.0',6543,app)
    server.serve_forever()

home.jinja2

Now, we have created a folder templates under static. In this templates folder, we have created the home.jinja2 file. In this file, we have defined the static asset CSS that we want to display on our web app.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{greet}}</title>
<link rel="stylesheet" href="static/style1.css"/>
</head>
<body>
<h1> {{greet}}</h1>
</body>
</html>

style1.css

Here, we have created the CSS file style1.css in the static folder.

CSS

*{
margin:0;
padding:0;
box:sizing:border-box;
background-color:green;
color:red;
font-family:sans-ser;
}

The package will look similar to this:

Screenshot-2023-11-09-122753

Output:

Now, run the following command in the terminal to run the app.

python app2.py

For seeing the webapp, open the browser of your choice, and type the URL, http://localhost:6543/

Screenshot-2023-11-09-122350-(1)

Static Asset: Javascript File

Javascipt is the most popular light-weighted programming language. It helps in making the web app reponsive. In this way, we will see how we can add static asset: javascript to the web app using Pyramid.

app2.py

In this example, we created a Python file app2.py under the package pyramid1. We have defined a constructor in the app in which we have added the static view.

Python3

# Import wsgiref and pyramid libraries
from wsgiref.simple_server import make_server
from pyramid.config import Configurator
from pyramid.view import view_config
 
# Create view config
@view_config(
    route_name='hello',
    renderer="static/templates/home.jinja2"
)
 
# Create a function to print value
def home(request):
    return {'greet':'Welcome to Geeks For Geeks!'}
 
# Create a constructor to define the app
if __name__=="__main__":
    with Configurator() as config:
        config.include('pyramid_jinja2')
        config.add_static_view(name='static',path='static')
        config.add_route('hello','/')
        config.scan()
        app=config.make_wsgi_app()
    server=make_server('0.0.0.0',6543,app)
    server.serve_forever()

home.jinja2

Now, we have created a folder templates under static. In this templates folder, we have created the home.jinja2 file. In this file, we have defined the static asset Javscript that we want to display on our web app.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{greet}}</title>
<script type = "text/javascript" src="static/function.js"></script>
</head>
<body>
<h1> {{greet}}</h1>
<input type = "button" onclick = "myfunction()" value = "Display">
</body>
</html>

function.js

Here, we have created the Javascript file function.js in the static folder.

Javascript

function myfunction()
 {
document.write("Hi, I am here!");
         }

The package will look similar to this:

Screenshot-2023-11-09-131652

Output:

Now, run the following command in the terminal to run the app.

python app2.py

For seeing the webapp, open the browser of your choice, and type the URL, http://localhost:6543/

ezgifcom-video-to-gif-converted

Conclusion

The static assets are used to make the web-app look attractive and reponsive. I hope after reading the above article, you will able to use the static assets in your Pyramid web app.

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Difference between Playwright and Selenium
Exploring the World of Chaos Engineering and Testing
Create a Music Player using React-Native
Next JS Dynamic API Routes
Application Protocol \| System Design

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14