DEV Community

Cover image for Building a Simple Blog App Using FastAPI, HTML, CSS, and JSON

Building a Simple Blog App Using FastAPI, HTML, CSS, and JSON

Jagroop Singh on September 09, 2024

In this tutorial, we will create a basic blog app using FastAPI for the backend, HTML and CSS for the frontend, and a JSON file for performing basi...
Collapse
 
cshalive profile image
Chandra

Request to add - how to make this application public. This article shows hosting on a local host. If you could add how to host it public, it would be a complete - end to end - coverage. And would be very helpful.
Thank you.

Collapse
 
jagroop2001 profile image
Jagroop Singh

@cshalive ,I'm thinking about it as well. Let me put this on my "to do" list for blog posts.

Collapse
 
cshalive profile image
Chandra

Thank you.
By the way, I ran in to error while using the above code.
The error was
AssertionError: jinja2 must be installed to use Jinja2Templates

Not sure why the code at line #4 did not work as expected
from fastapi.templating import Jinja2Templates

I had to fix it by installing Jinja2 separately

Thread Thread
 
jagroop2001 profile image
Jagroop Singh

install this pip install Jinja2. Let me know if it works.

Thread Thread
 
cshalive profile image
Chandra

Yes, that's how I fixed.

Look forward to your blog post on how to host this public
and also integrated with database. Two good topics ;)

Thread Thread
 
jagroop2001 profile image
Jagroop Singh

Yes, the hosting fastapi project is expected to arrive  next week, and the database integration will published this week. @cshalive

Thread Thread
 
cshalive profile image
Chandra

Please share the link if posted already. Eagerly waiting :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Great tutorial!

Collapse
 
jagroop2001 profile image
Jagroop Singh
Collapse
 
jayantbh profile image
Jayant Bhawal

🤔
There's basically contents of just 4 files in here with no further reasoning or underlying explanation.

I think pointing people to a repo instead, and explaining how things work might be a better idea. :)

Collapse
 
jagroop2001 profile image
Jagroop Singh

sure !!, Next time will do that.

Collapse
 
alexanderwalsh profile image
Alexander Walsh

Nice demonstration of FastApi crud with html. Please, can you do the same thing, but this time, getting data from sql lite or MySQL database? Thanks

Collapse
 
jagroop2001 profile image
Jagroop Singh

Sure @alexanderwalsh !!
Next blog will be coming with db.

Collapse
 
swoopsavvy profile image
SwoopSavvy

It will be great if thats PostgreSQL !

Thread Thread
 
jagroop2001 profile image
Jagroop Singh • Edited

You want PostgreSQL, okay next week new blog with PostgreSQL will be coming. @swoopsavvy

Collapse
 
works profile image
Web

Excellent introduction to FastAPI tutorial; I hope to see a blog post about database integration soon. @jagroop2001

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks @works , sure I will come up with blog regarding db integration

Collapse
 
indra_kiran_b50d9ee74a55b profile image
indra kiran

Hi @jagroop2001

I successfully ran the program in the browser. It would be very beneficial if you could provide a detailed explanation of how it works, including a breakdown of each concept and its functionality within the code.

Collapse
 
jagroop2001 profile image
Jagroop Singh

Yes, I will address this in my upcoming blog post on implementing FastAPI with a database (Postgres or Mongo). @indra_kiran_b50d9ee74a55b

Collapse
 
jottyjohn profile image
Jotty John

Great!

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks @jottyjohn

Collapse
 
mlamina profile image
Marco Lamina

Great tutorial! For anyone who likes FastAPI/Jinja2, I built an open source rapid prototyping template.

Collapse
 
jagroop2001 profile image
Jagroop Singh

It would be great if people would contribute to this open source repository to enhance their flask skill further.

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

ni ce

Collapse
 
jagroop2001 profile image
Jagroop Singh
Collapse
 
john12 profile image
john • Edited

Why python-multipart is installed in this ? @jagroop2001

Collapse
 
jagroop2001 profile image
Jagroop Singh

@john12 ,python-multipart is typically installed in FastAPI projects that involve handling multipart form data ( like sending formdata from frontend to backend)

Collapse
 
john12 profile image
john

okay, got it !!