This guide shows two examples. One introduces how to quickly run the out-of-the-box sample for react.js created by " create-react-app" in Foxit PDF SDK for Web package, and the other presents a way to integrate Foxit PDF SDK for Web into React app created by "create-react-app".

Note:The root folder of Foxit PDF SDK for Web is referred as root in the following.

Foxit PDF SDK for Web provides a boilerplate project for React app which was created by "create-react-app".

├─public
│   └── index.html
├─src/
│  ├─components/
│  │  ├─FoxitWebPDFApp.js
│  │  ├─FoxitWebPDFContexts.js
│  │  ├─PDFViewerRenderer.css
│  │  └─PDFViewerRenderer.js
│  ├─App.css
│  ├─App.js
│  ├─index.css
│  ├─index.js
│  └──license-key.js
├─.eslintignore
├─config-overrides.js
├─package.json

• Nodejs and npm ( Node >= 14.0.0 and npm >= 5.6 )
• Foxit PDF SDK for Web

Let's call the Foxit PDF SDK for Web as SDK.

• Clone this repository to any location

  git clone https://github.com/foxitsoftware/Create-react-app-Example.git

• Place the license-key.js into ./src/, You can find the license information at SDK/examples/.

• Navigate to ./create-react-app-foxitpdfsdkweb folder, and execute:

    npm install
    npm run start

Now everything is set up. Open your browser, navigate to http://localhost:3000/ to launch this application.

If some text in a PDF document requires a specific font to render correctly, you need to specify a font loading path during initialization. In this example, you can refer to the fontPath configuration in src/components/FoxitWebPDFApp.js. What we need to do is to copy the external folder in the SDK to the public folder so that the special font can be rendered normally.

Starting from FoxitPDFSDK for Web version 10.0.0, since service worker is used, it is necessary to add this field in the HTTP response header of the Service Worker script. Its value is the maximum allowed scope path:

Service-Worker-Allowed /;

If you are using Nginx as your server, you can add the Service-Worker-Allowed response header by modifying the Nginx configuration file. Below is an example configuration：

server {
    location /sw.js {
        add_header Service-Worker-Allowed /;
    }
}

If you use Webpack Dev Server for local development, you can add Service-Worker-Allowed response headers by configuring devServer. The following is a configuration example：

// webpack.config.js
module.exports = {
    // 其他配置
    devServer: {
        headers: {
            'Service-Worker-Allowed': '/'
        }
    }
};

• Nodejs and npm ( Node >= 14.0.0 and npm >= 5.6 )
• React.js created by create-react-app
• Foxit PDF SDK for Web

1. Suppose you already have a project created with create-react-app and the directory name is app. If not, you can also create an empty project yourself:

   `npx create-react-app app`

2. In app folder, Update package.json:

   "scripts": {
       "start": "react-app-rewired --max_old_space_size=8192 start",
       "build": "react-app-rewired --max_old_space_size=8192 build",
       "test": "react-app-rewired --max_old_space_size=8192 test --env=jsdom",
       "eject": "react-app-rewired --max_old_space_size=8192 eject"
   },

   This step avoids 'JavaScript heap out of memory' errors during the build process.

3. In app folder, add config-overrides.js:

    const CopyWebpackPlugin = require("copy-webpack-plugin");
    const { override, addWebpackPlugin, addWebpackExternals} = require('customize-cra');
    const path = require("path")
    
    const libraryModulePath = path.resolve('node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library');
    const libPath = path.resolve(libraryModulePath, 'lib');
    
    module.exports = override(    
        addWebpackPlugin(
            new CopyWebpackPlugin({
                patterns: [{
                    from: libPath,
                    to: 'foxit-lib',
                    force: true
                }]
            })
        ),
        addWebpackExternals(
            'UIExtension', 
            'PDFViewCtrl'
        )
    )

4. Copy the external folder inside SDK to public folder.

5. Copy these files to your src folder:

   src/component/FoxitWebPDFApp.js
   src/component/FoxitWebPDFContexts.js
   src/component/PDFViewerRenderer.css
   src/component/PDFViewerRenderer.js

   Of course, in order to ensure that the project structure is not disrupted, you can create another directory to store them.

6. Add the following code into your component(Please remember to import them):

   <FoxitWebPDFApp>
       <PDFViewerRenderer />
       <PDFUIInstanceContext.Consumer>
         {(pdfui) => {
           return <></>;
         }}
       </PDFUIInstanceContext.Consumer>
       <PDFUIInstanceContext.Consumer>
           {(pdfui) => {
               return <></>;
           }}
       </PDFUIInstanceContext.Consumer>
   </FoxitWebPDFApp>

   For detailed usage, please refer to src/App.js

7. Update the container size and ensure it is displayed correctly, you can refer to src/App.css:

   .App {
       width: 100vw;
       height: 100vh;
   }

8. Add license-key.js to the .eslintignore file:

   license-key.js
   

9. Install your dependencies and run:

   cd app
   npm install
   npm install -S @foxitsoftware/foxit-pdf-sdk-for-web-library 
   npm install -D copy-webpack-plugin customize-cra react-app-rewired
   npm run start

   NOTE If you get this error: TypeError: compilation.getCache is not a function Please refer to: webpack/copy-webpack-plugin#575

10. Remove the Strict mode in src/index.js:

    // ...
    ReactDOM.render(
    -     <React.StrictMode>
            <App />
    -     </React.StrictMode>,
        document.getElementById('root')
    );
    // ...

11. Now everything is set up. Open your browser, navigate to http://localhost:3000/ to launch your application.