There will be 4 steps. With the final product that we'll make in 3 minutes, you could:
- π΅ Expand it and sell it as a product (e.g., Screenshotlayer)
- Create visual content for your blog posts by capturing live website previews
- Create OG social images to improve your sharing on social media (See my guide on how to add OG images: Create a open graph social image generator with Django π)
We'll use a headless browser to visit a url, take a screenshot, and then render that screenshot into our page.
Here's what our final product will look like. Letβs start ππΏ
Optional video tutorial (featuring me ππΏ) below:
1. Setup
1.1 Install the requirements and create a new Django app
- In your terminal:
1.2 Install Google Chrome
The code is setup for Google Chrome. You can use Brave or Safari, but youβll need to modify the code (only 4-5 lines to change).
1.3 Update your settings.py
- Register our sim app by adding it to
INSTALLED_APPS
2. Add our urls
- Update
core/urls.py
- Update
sim/urls.py
3. Add our views to take the screenshot
- Add this to
sim/views.py
:
4. Add templates to render the result
- Create templates folder at
sim/templates/
- Create
preview.html
insim/templates/
containing:
- Create capture.html
in sim/templates/
containing:
Run your Django server:
Now, you can visit the page at http://127.0.0.1:8000/capture/
, submit a url, and receive the screenshot back automatically.
Finished π Here some ideas to extend this:
-
Deploy this online and sell it as a service π΅.
If you do, I'd recommend using serverless functions when deploying this: each request will take a few seconds. Here's my guide on how to add serverless functions with Django as simply as possible: How to add serverless functions to Django in 6 minutes π§
-
Add mobile device previews by adapting the code to capture mobile views (You'll only need to change one line of the above code).
P.S Want to build your Django frontend even faster?
I want to release high-quality products as soon as possible. Probably like you, I want to make my Django product ideas become reality as soon as possible.
That's why I'm building Photon Designer - an entirely visual editor for building Django frontend at the speed that light hits your eyes π‘