Skip to content

guillemsola/website_preview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Website Preview Dashboard

This project will easily display how your website is seen on different devices. Either in portrait or landscape mode. Click an image to see it in full a modal.

The project has a backend API to serve website screenshots and a UI dashboard to select the URL you want to show. For details on each sub-project review included readme.md files.

Website screenshot

API

Node express project that uses Puppeteer to expose an API to get images from an URL with a given device emulation.

Dashboard

Vue.js Bootstrap 4 dashboard that creates a grid of devices that will show a how the same website can be rendered on different devices at a glance.

TODO

  • Add parameter to docker args to use sandbox mode only in containers
  • Return browser sides and include the ability to scroll pages.

Dockerfile

To make things even easier it can be run in a Docker container. The dockerfile builds the website application and bundles it with the main server that handles the API.

docker build -t guillemsola/website-renderer .

Technology Stack

Puppeteer Vue.js Bootstrap Nodejs

About

Render a website in multiple devices

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages