{"id":20393358,"url":"https://github.com/foxitsoftware/create-react-app-example","last_synced_at":"2026-03-10T15:30:49.594Z","repository":{"id":75785206,"uuid":"394541423","full_name":"foxitsoftware/Create-react-app-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-02T01:01:00.000Z","size":333,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-08T11:43:58.470Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foxitsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-10T05:57:42.000Z","updated_at":"2024-07-02T01:01:03.000Z","dependencies_parsed_at":"2025-05-08T11:37:13.685Z","dependency_job_id":"cbefa562-b55d-4c53-9c6d-9b762f9d7f1b","html_url":"https://github.com/foxitsoftware/Create-react-app-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foxitsoftware/Create-react-app-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/Create-react-app-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FCreate-react-app-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30340094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T15:03:31.997Z","status":"ssl_error","status_checked_at":"2026-03-10T15:01:30.431Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:48:22.185Z","updated_at":"2026-03-10T15:30:49.575Z","avatar_url":"https://github.com/foxitsoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Foxit PDF SDK for Web Example - React.js created by \"create-react-app\"\n\nThis guide shows two examples. One introduces how to quickly run the out-of-the-box sample for react.js created by \"\ncreate-react-app\" in Foxit PDF SDK for Web package, and the other presents a way to integrate Foxit PDF SDK for Web into\nReact app created by \"create-react-app\".\n\n## Quickly run the out-of-the-box sample for create-react-app\n\n_Note:The root folder of `Foxit PDF SDK for Web` is referred as `root` in the following._\n\nFoxit PDF SDK for Web provides a boilerplate project for React app which was created by \"create-react-app\".\n\n### Overview the project structure\n\n```bash\n├─public\n│   └── index.html\n├─src/\n│  ├─components/\n│  │  ├─FoxitWebPDFApp.js\n│  │  ├─FoxitWebPDFContexts.js\n│  │  ├─PDFViewerRenderer.css\n│  │  └─PDFViewerRenderer.js\n│  ├─App.css\n│  ├─App.js\n│  ├─index.css\n│  ├─index.js\n│  └──license-key.js\n├─.eslintignore\n├─config-overrides.js\n├─package.json\n```\n\n#### Key directory and files descriptions\n\n| File/Folder                           | Description                                                                                                                                                                                                                                                                                     |\n|:--------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| src/                                  | Contains all JS and CSS files for the app.                                                                                                                                                                                                                                                      |\n| src/components/FoxitWebPDFApp.js      | Initialize FoxitPDFSDK for Web and share pdfui instance through `React Context`.                                                                                                                                                                                                                |\n| src/components/FoxitWebPDFContexts.js | Contains `PDFUIInstanceContext` and `PDFUIRenderToElementContext`. Subcomponents can obtain a `pdfui` instance via `PDFUIInstanceContext.Consumer`, and `PDFUIRenderToElementContext` is used in `PDFViewerRenderer.js` to provide a React ref to the `FoxitWebPDFApp` component to render PDF. |\n| src/components/PDFViewerRenderer.js   | Provides an entry point for the application layer to flexibly specify where to render the PDF                                                                                                                                                                                                   |\n| src/license-key.js                    | The license-key                                                                                                                                                                                                                                                                                 |\n| src/App.js                            | The entry point for application.                                                                                                                                                                                                                                                                |\n| config-overrides.js                   | Adjust the Webpack configuration                                                                                                                                                                                                                                                                |\n| package.json                          | Lists dependencies, version build information and ect.                                                                                                                                                                                                                                          |\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com) ( Node \u003e= 14.0.0 and npm \u003e= 5.6 )\n- [Foxit PDF SDK for Web](https://developers.foxit.com/products/web/)\n\n### Getting started\n\nLet's call the *Foxit PDF SDK for Web* as SDK.\n\n- Clone this repository to any location\n\n  ```bash\n  git clone https://github.com/foxitsoftware/Create-react-app-Example.git\n  ```\n\n- Place the `license-key.js` into `./src/`, You can find the license information at `SDK/examples/`.\n\n- Navigate to `./create-react-app-foxitpdfsdkweb` folder, and execute:\n\n```bash\n    npm install\n    npm run start\n```\n\nNow everything is set up. Open your browser, navigate to \u003chttp://localhost:3000/\u003e to launch this application.\n\n### Reference the fonts\n\nIf some text in a PDF document requires a specific font to render correctly, you need to specify a font loading path\nduring initialization. In this example, you can refer to the `fontPath` configuration in `src/components/FoxitWebPDFApp.js`. What we need\nto do is to copy the `external` folder in the SDK to the `public` folder so that the special font can be rendered\nnormally.\n\n### Reference the `Service-Worker-Allowed` HTTP header\n\nStarting 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:\n\n```http\nService-Worker-Allowed /;\n```\n\n#### Nginx 配置示例\n\nIf 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：\n\n```nginx\nserver {\n    location /sw.js {\n        add_header Service-Worker-Allowed /;\n    }\n}\n```\n\n#### Webpack Dev Server 配置示例\n\nIf 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：\n\n```js\n// webpack.config.js\nmodule.exports = {\n    // 其他配置\n    devServer: {\n        headers: {\n            'Service-Worker-Allowed': '/'\n        }\n    }\n};\n```\n\n## Integrate Web SDK to an existing project created by \"create-react-app\"\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com)  ( Node \u003e= 14.0.0 and npm \u003e= 5.6 )\n- [React.js created by create-react-app](https://reactjs.org/docs/create-a-new-react-app.html)\n- [Foxit PDF SDK for Web](https://developers.foxit.com/products/web/)\n\n### Getting started\n\n1. Suppose you already have a project created\n   with [`create-react-app`](https://reactjs.org/docs/create-a-new-react-app.html) and the directory name is `app`. If\n   not, you can also create an empty project yourself:\n\n   ```bash  \n   `npx create-react-app app`\n   ```\n\n2. In `app` folder, Update `package.json`:\n\n    ```json\n    \"scripts\": {\n        \"start\": \"react-app-rewired --max_old_space_size=8192 start\",\n        \"build\": \"react-app-rewired --max_old_space_size=8192 build\",\n        \"test\": \"react-app-rewired --max_old_space_size=8192 test --env=jsdom\",\n        \"eject\": \"react-app-rewired --max_old_space_size=8192 eject\"\n    },\n    ```\n\n    This step avoids `'JavaScript heap out of memory'` errors during the build process.\n\n3. In `app` folder, add `config-overrides.js`:\n   ```js\n    const CopyWebpackPlugin = require(\"copy-webpack-plugin\");\n    const { override, addWebpackPlugin, addWebpackExternals} = require('customize-cra');\n    const path = require(\"path\")\n    \n    const libraryModulePath = path.resolve('node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library');\n    const libPath = path.resolve(libraryModulePath, 'lib');\n    \n    module.exports = override(    \n        addWebpackPlugin(\n            new CopyWebpackPlugin({\n                patterns: [{\n                    from: libPath,\n                    to: 'foxit-lib',\n                    force: true\n                }]\n            })\n        ),\n        addWebpackExternals(\n            'UIExtension', \n            'PDFViewCtrl'\n        )\n    )\n   ```\n\n4. Copy the `external` folder inside SDK to `public` folder.\n5. Copy these files to your `src` folder:\n   ```txt\n   src/component/FoxitWebPDFApp.js\n   src/component/FoxitWebPDFContexts.js\n   src/component/PDFViewerRenderer.css\n   src/component/PDFViewerRenderer.js\n   ```\n   Of course, in order to ensure that the project structure is not disrupted, you can create another directory to store them.\n\n6. Add the following code into your component(Please remember to import them):\n    ```js\n    \u003cFoxitWebPDFApp\u003e\n        \u003cPDFViewerRenderer /\u003e\n        \u003cPDFUIInstanceContext.Consumer\u003e\n          {(pdfui) =\u003e {\n            return \u003c\u003e\u003c/\u003e;\n          }}\n        \u003c/PDFUIInstanceContext.Consumer\u003e\n        \u003cPDFUIInstanceContext.Consumer\u003e\n            {(pdfui) =\u003e {\n                return \u003c\u003e\u003c/\u003e;\n            }}\n        \u003c/PDFUIInstanceContext.Consumer\u003e\n    \u003c/FoxitWebPDFApp\u003e\n    ```\n   For detailed usage, please refer to `src/App.js`\n\n7. Update the container size and ensure it is displayed correctly, you can refer to `src/App.css`:\n    ```css\n   .App {\n        width: 100vw;\n        height: 100vh;\n   }\n   ```\n8. Add `license-key.js` to the `.eslintignore` file:\n    ```text\n    license-key.js\n    ```\n\n9. Install your dependencies and run:\n    ```bash\n    cd app\n    npm install\n    npm install -S @foxitsoftware/foxit-pdf-sdk-for-web-library \n    npm install -D copy-webpack-plugin customize-cra react-app-rewired\n    npm run start\n    ```\n    \u003e **NOTE**\n    \u003e If you get this error: `TypeError: compilation.getCache is not a function`\n    \u003e Please refer to: \u003chttps://github.com/webpack-contrib/copy-webpack-plugin/issues/575\u003e\n\n10. Remove the Strict mode in `src/index.js`:\n    ```diff\n    // ...\n    ReactDOM.render(\n    -     \u003cReact.StrictMode\u003e\n            \u003cApp /\u003e\n    -     \u003c/React.StrictMode\u003e,\n        document.getElementById('root')\n    );\n    // ...\n    ```\n\n11. Now everything is set up. Open your browser, navigate to \u003chttp://localhost:3000/\u003e to launch your application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Fcreate-react-app-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Fcreate-react-app-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Fcreate-react-app-example/lists"}