Run samples quickly

Run samples with an HTTP server

Foxit PDF SDK for Web includes sample projects for building viewers and demonstrating other features. They live in ./examples inside the SDK package. Start a local web server, open your browser, and go to https://localhost:port or the host IP URL you use. Pick a sample from the directory listing.

To start a server quickly, use the Node.js http-server:

http-server

Open the browser automatically with -o:

http-server -o

Or use Python’s http.server module:

python -m http.server 8000

See Set up local server for more options.

Run samples with Snapshot support

Features that need a backend—such as Snapshot and collaboration—require npm install and npm start to launch the HTTP server and backend services. Steps:

Before running samples, review package.json in the SDK package:

{
  "scripts": {
    "start": "concurrently --kill-others \"npm run start-http-server\" \"npm run start-snapshot-server\" \"npm run start-collaboration-server\"",
    "start-snapshot-server": "node ./server/snapshot/src/index -p 3002",
    "start-http-server": "node ./server/index",
    "start-collaboration-websocket-server": "node ./server/collaboration-websocket-server/src/index.js -p 9111",
    "start-collaboration-server": "node ./server/collaboration-sockjs-server/src/index.js -p 9112"
  },
  "serve": {
    "port": 8080,
    "public": "/",
    "proxy": {
      "target": "http://127.0.0.1:3002",
      "changeOrigin": true
    }
  },
  "collaboration-websocket": {
    "target": "http://127.0.0.1:9111",
    "changeOrigin": true,
    "ws": true
  },
  "collaboration-sockjs": {
    "target": "http://127.0.0.1:9112",
    "changeOrigin": true,
    "ws": true
  }
}

Check your Node.js and npm versions:

node -v
v10.16.0
npm -v
6.14.1

Install dependencies from package.json:

npm install

Start services:

npm start

Open http://127.0.0.1:8080 in a browser to browse files and samples.

HTTP server configuration examples

This section covers:

- [Start HTTP service with Nginx](#start-http-service-with-nginx/) <br>
- [Start HTTP service with Node.js](#start-http-service-with-nodejs/)

Start HTTP service with Nginx

On Windows, assuming Nginx is installed. When Nginx is running, edit nginx.conf under the conf directory. This example configures webViewer directly in nginx.conf:

1. Download and extract the SDK package.

2. Open nginx.conf under Nginx/conf and add:

        server {
        listen 8080;
            server_name 127.0.0.1;
   
            location / {
                alias "gotopath/FoxitPDFSDKForWeb/";
                charset utf8;
                index index.html;
            }
        }

3. Restart Nginx and open the webViewer in a browser.

   Full-featured webViewer:

   http://localhost:8080/examples/UIExtension/complete_webViewer/

   Basic webViewer:

   http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

   NOTE

   The configuration above runs the webViewer, but snapshot will not work until you add the snapshot service. Without it, snapshot images are not cached to the clipboard for paste. Set up the snapshot service as follows:

   1. Install Node.js 9.0 or later (skip if already installed).

   2. In a terminal, go to the FoxitPDFSDKForWeb root directory.

   3. Run npm install to install dependencies.

   4. Run npm run start-snapshot-server to start the snapshot service (default port 3002).

      To change the snapshot port, edit the /server/snapshot/package.json inside the SDK package.

   5. Add an Nginx reverse proxy in nginx.conf:

      server {
          listen 8080;
          server_name 127.0.0.1;
        
          location / {
            alias "gotopath/FoxitPDFSDKForWeb/";
            charset utf8;
            index index.html;
          }
        
          location ~ ^/snapshot/(.+)$ {
            proxy_pass http://127.0.0.1:3002/snapshot/$1$is_args$args;
            proxy_redirect off;
            proxy_request_buffering on;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          }
      }

   6. Restart Nginx and refresh the browser—snapshot should work.

Start HTTP service with Node.js

With Node.js 9.0 or later installed:

1. Extract the SDK package. In a terminal, go to the extracted folder and install dependencies:

   npm install

2. Start the web server:

   npm start

3. Open the webViewer in a browser.

   Full-featured webViewer:

   http://localhost:8080/examples/UIExtension/complete_webViewer/

   Basic webViewer:

   http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

   Tip

   With npm start, proxy setup is included and snapshot works without extra Nginx configuration. To change http-server or snapshot ports, edit package.json in the SDK package.

   Example—change default ports 8080 and 3002 as needed:

   {
     "serve":{
       "port": 8080, 
       "public": "/",
       "proxy": {
           "target": "http://127.0.0.1:3002",
           "changeOrigin": true
       }
     }
   }