Example Live View
Try for free
No credit card required
View all Actors
Example Live View
apify/example-live-view
Try for free
No credit card required
This example demonstrates how to use web server in actor as communication channel with outer world. Read more at Apify docs https://docs.apify.com/actors/running#container-web-server
Do you want to learn more about this Actor?
Get a demoDockerfile
1# This is a template for a Dockerfile used to run acts in Actor system.
2# The base image name below is set during the act build, based on user settings.
3# IMPORTANT: The base image must set a correct working directory, such as /usr/src/app or /home/user
4FROM apify/actor-node-chrome
5
6# Second, copy just package.json and package-lock.json since it should be
7# the only file that affects "npm install" in the next step, to speed up the build
8COPY package*.json ./
9
10# Install NPM packages, skip optional and development dependencies to
11# keep the image small. Avoid logging too much and print the dependency
12# tree for debugging
13RUN npm --quiet set progress=false \
14 && npm install --only=prod --no-optional \
15 && echo "Installed NPM packages:" \
16 && (npm list --all || true) \
17 && echo "Node.js version:" \
18 && node --version \
19 && echo "NPM version:" \
20 && npm --version
21
22# Copy source code to container
23# Do this in the last step, to have fast build if only the source code changed
24COPY . ./
25
26# NOTE: The CMD is already defined by the base image.
27# Uncomment this for local node inspector debugging:
28# CMD [ "node", "--inspect=0.0.0.0:9229", "main.js" ]package.json
1{
2 "name": "apify-project",
3 "version": "0.0.1",
4 "description": "",
5 "author": "It's not you it's me",
6 "license": "ISC",
7 "dependencies": {
8 "apify": "0.22.4",
9 "express": "latest",
10 "body-parser": "latest"
11 },
12 "scripts": {
13 "start": "node main.js"
14 }
15}main.js
1const Apify = require('apify');
2const express = require('express')
3const bodyParser = require('body-parser');
4
5// Create ExpressJS app and configure body parsers that will allow us to receive form submissions.
6const app = express()
7app.use(bodyParser.json());
8app.use(bodyParser.urlencoded({ extended: true }));
9
10// Now we need to read following environment variables:
11// - APIFY_CONTAINER_PORT contains a port number where we must start server
12// - APIFY_CONTAINER_URL contains a URL under which we can access the container
13// - APIFY_DEFAULT_KEY_VALUE_STORE_ID is simply ID of default key-value store of this
14// actor where we can store screenshots
15const {
16 APIFY_CONTAINER_PORT,
17 APIFY_CONTAINER_URL,
18 APIFY_DEFAULT_KEY_VALUE_STORE_ID,
19} = process.env;
20
21// Create an array of the processed URLs where n-th URL has its screenshot stored under the
22// key [n].jpg in key-value store:
23const processedUrls = [];
24
25// Root path displays a HTML form to submit new URL and thumbnails of processed URLs:
26app.get('/', (req, res) => {
27 let listItems = '';
28
29 // For each of the processed
30 processedUrls.forEach((url, index) => {
31 const imageUrl = `https://api.apify.com/v2/key-value-stores/${APIFY_DEFAULT_KEY_VALUE_STORE_ID}/records/${index}.jpg`;
32
33 listItems += `<li>
34 <a href="${imageUrl}" target="_blank">
35 <img src="${imageUrl}" width="300px" />
36 <br />
37 ${url}
38 </a>
39</li>`;
40 });
41
42 const pageHtml = `
43<html>
44 <head><title>Example</title></head>
45 <body>
46 <form method="POST" action="${APIFY_CONTAINER_URL}/add-url">
47 URL: <input type="text" name="url" placeholder="http://example.com" />
48 <input type="submit" value="Add" />
49 <hr />
50 <ul>${listItems}</ul>
51 </form>
52 </body>
53</html>`;
54
55 res.send(pageHtml);
56});
57
58// POST route allowing us to submit new URLs. After URL is processed
59// it redirects user back to root path.
60app.post('/add-url', async (req, res) => {
61 const { url } = req.body;
62 console.log(`Got new URL: ${url}`);
63
64 // Start chrome browser and open new page ...
65 const browser = await Apify.launchPuppeteer();
66 const page = await browser.newPage();
67
68 // ... go to our URL and grab a screenshot ...
69 await page.goto(url);
70 const screenshot = await page.screenshot({ type: 'jpeg' });
71
72 // ... close browser ...
73 await page.close();
74 await browser.close();
75
76 // ... save sreenshot to key-value store and add URL to processedUrls.
77 await Apify.setValue(`${processedUrls.length}.jpg`, screenshot, { contentType: 'image/jpeg' });
78 processedUrls.push(url);
79
80 res.redirect('/');
81});
82
83// Start the webserver.
84app.listen(APIFY_CONTAINER_PORT, () => {
85 console.log(`Application is listening at URL ${APIFY_CONTAINER_URL}.`);
86});Developer
Apify Maintained by Apify
Actor Metrics
1 monthly user
-
3 stars
Created in Aug 2018
Modified 5 months ago
Categories
