{"id":16293631,"url":"https://github.com/badsyntax/backpack-jsonschema","last_synced_at":"2025-10-15T18:47:27.457Z","repository":{"id":136892927,"uuid":"128638329","full_name":"badsyntax/backpack-jsonschema","owner":"badsyntax","description":null,"archived":false,"fork":false,"pushed_at":"2018-04-08T12:22:55.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T05:15:07.676Z","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/badsyntax.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}},"created_at":"2018-04-08T12:21:55.000Z","updated_at":"2018-04-08T12:22:56.000Z","dependencies_parsed_at":"2023-04-14T01:30:47.672Z","dependency_job_id":null,"html_url":"https://github.com/badsyntax/backpack-jsonschema","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fbackpack-jsonschema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fbackpack-jsonschema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fbackpack-jsonschema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fbackpack-jsonschema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/badsyntax","download_url":"https://codeload.github.com/badsyntax/backpack-jsonschema/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027412,"owners_count":21035594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-10-10T20:11:55.396Z","updated_at":"2025-10-15T18:47:27.356Z","avatar_url":"https://github.com/badsyntax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e *This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app) +\n  [backpack-react-scripts](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts).*\n  It is very similar to one that you would create using [Create React App](https://github.com/facebookincubator/create-react-app)\n  without [backpack-react-scripts](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts),\n  so please refer to [it's documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)\n  for more usage information.\n\n# [_Put your project name here_]\n\n[_Add a brief description of your project here._]\n\n## npm script commands\n\n`backpack-react-scripts` is listed as a `devDependency` in your [package.json](./package.json) and exposes the following\nnpm scripts:\n\n- `npm start`: Runs the app in development mode. Open [http://localhost:3000/](http://localhost:3000/) to\n  view it in the browser. The page will reload if you make edits. You will see the build errors in the console.\n- `npm test`: Runs the test watcher in an interactive mode. By default, runs tests related to files changes\n  since the last commit.\n- `npm run build`: Builds the app for production to the build folder. It correctly bundles React in production mode\n  and optimizes the build for the best performance. The build is minified and the filenames include the hashes.\n  Your app is ready to be deployed!\n- `npm run lint`: Lints all javascript using [`eslint-config-skyscanner`](https://www.npmjs.com/package/eslint-config-skyscanner).\n\n## Excluding React / ReactDOM from the output bundle\n\nSometimes you need to exclude React (or any module) from your app's bundle for performance / code sharing reasons\n(i.e. if it's on the page already). To do this, add the following to your `package.json`:\n\n```json\n{\n  ...\n  \"backpack-react-scripts\": {\n    \"externals\": {\n      \"react\": \"React\",\n      \"react-dom\": \"ReactDOM\"\n    }\n  }\n}\n```\n\nNow when you run `npm run build`, every `'react'` / `'react-dom'` import is replaced with `window.React` / `window.ReactDOM`.\nYou'll also notice that the output bundle size is dramatically smaller. *Note:* You are responsible for ensuring that React is\nloaded before your app is!\n\n## Server Side Rendering (SSR)\n\nMost of the time you wont need server side rendering, however if you need to generate your app's HTML on\nthe server and send the markup down on the initial request to improve perceived page load or to allow search engines\nto crawl your pages for SEO purposes, then create a file named `ssr.js` in your app's root folder:\n\n```\nmy-app/\n  src/\n    ...\n    index.js\n    ssr.js    // \u003c-- create this file\n```\n\nInside `ssr.js`, export the components that you wish to expose for server side rendering - the file contents should look\nsomething like this:\n\n```js\nimport App from './App';\n\nexport default { App };\n```\n\nRun `npm run build` as you would to build a production browser bundle - you should notice an additional `ssr.js` file in\nthe output directory:\n```\nmy-app/\n  build/\n    static/\n    asset-manifest.json\n    favicon.ico\n    index.html\n    ssr.js                // \u003c-- new output file\n```\n\nThis file can now be required and pre-rendered on the server like so (rough implementation):\n\n`server.js`:\n\n```js\nconst React = require('react');\nconst express = require('express');\nconst ReactDOMServer = require('react-dom/server');\n\nconst components = require('./my-app/build/ssr').default;\n\nconst router = express.Router();\n\nrouter.get('/', (req, res) =\u003e {\n  const element = React.createElement(components.App);\n  const html = ReactDOMServer.renderToString(element);\n\n  res.render('index', { html });\n});\n\nmodule.exports = router;\n```\n\n`index.html`:\n\n```html\n\u003cdiv id=\"root\"\u003e{{{html}}}\u003c/div\u003e\n```\n\nIf you call `ReactDOM.render()` on a node that already has this server-rendered markup (`\u003cdiv id=\"root\"\u003e` in the example\nabove), React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.\n\n**Note:** Your external module imports (anything you import from `node_modules/` i.e. `import React from 'react';`) are bundled\ninto the `ssr.js` output file. If you want to exclude any external modules from the output file for performance / code sharing\nreasons (i.e. if it's beign required elsewhere and is already in memory) you can do so by adding the following to your\n`package.json`:\n\n```json\n{\n  ...\n  \"backpack-react-scripts\": {\n    \"ssrExternals\": [\n      \"react\",\n      \"react-dom\"\n    ]\n  }\n}\n```\n\n## Compiling `node_modules` dependencies\n\nBy default, modules imported from your app's `node_modules` directory will not get compiled by Babel. This is mostly for webpack\nperformance reasons but also because 3rd party dependencies published to npm typically only expose precompiled ES5 code.\nPublishing non ES5 code is not advised as there is no reliable way for the consumer to know what ES2015 features you are using.\nThat being said there are some exceptions, particularly when you want to share React components that import CSS stylesheets.\nFor this purpose you can add the following to your `package.json`:\n\n```json\n{\n  ...\n  \"backpack-react-scripts\": {\n    \"babelIncludePrefixes\": [\n      \"my-module-prefix-\",\n      \"some-module\"\n    ]\n  }\n}\n```\n\nThe above example assumes that the module you want to compile is named with the prefix `my-module-prefix-` and a module\nwith the name `some-module`. All entries in this array act as prefixes. It is used by all webpack configurations\nas well as the Jest configuration — if you want to avoid compiling a dependency in tests, you should mock it.\n\n## Disabling AMD parsing for certain modules\n\nIf you need to disable AMD module support for whatever reason, you can add the following to your `package.json`:\n\n```json\n{\n  ...\n  \"backpack-react-scripts\": {\n    \"amdExcludes\": [\n      \"globalize\"\n    ]\n  }\n}\n```\n\nThe above example disables AMD support for the `globalize` dependency and overcomes issues such as:\n\n```sh\nFailed to compile.\n./node_modules/globalize/dist/globalize.js\nModule not found: Can't resolve 'cldr' in './node_modules/globalize/dist'\n```\n\n## Cross-origin loading of dynamic chunks\n\nYou can configure [cross-origin loading](https://webpack.js.org/configuration/output/#output-crossoriginloading) of dynamic chunks like so:\n\n```json\n  \"backpack-react-scripts\": {\n    \"crossOriginLoading\": \"anonymous\"\n  }\n```\n\n\u003e **Note:** `lodash` is disabled by default.\n\n## CSS Modules\n\nAll Sass files are by default treated as [CSS Modules](https://github.com/css-modules/css-modules). You can opt out of this behaviour using the following config option:\n\n```\n\"backpack-react-scripts\": {\n  \"cssModules\": false\n}\n```\n\nIf you decide to opt out, Sass files will not be treated as CSS Modules by default. However, you can opt-in on a per-file basis using the naming convention: `*.module.scss`.\n\nFor example, with `cssModules` set to `false`:\n- The file `App.scss` will not be treated as CSS Module\n- The file `App.module.scss` _will_ be treated as CSS Module\n\nThis allows you to upgrade your project file by file to CSS Modules.\n\n\u003e Backpack components will _always_ be treated as CSS Modules, even if you opt out\n\n## Upgrading `backpack-react-scripts`\n\nThe [Backpack team](mailto:backpack@skyscanner.net) provide ongoing maintenance and bugfixes to `backpack-react-scripts`. Please refer to\n[it's changelog](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts/CHANGELOG.md) for upgrade guides.\n\n## Adding your own custom build configuration\n\nIf you're finding the need to customise the configuration of `backpack-react-scripts`, then please get in touch with\nthe [Backpack team](mailto:backpack@skyscanner.net) - we are open to contributions.\n\nIf this is unsuitable, then you can always run `npm run eject` which copies all the configuration files and the transitive\ndependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like\n`npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this\npoint, you’re on your own.\n\n**Note: this is a one-way operation - once you eject, you can’t go back!**\n\nPlease don't do this if you don't have to - the curated feature set is there to promote standardisation across Skyscanner's\nfront-end stack.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadsyntax%2Fbackpack-jsonschema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbadsyntax%2Fbackpack-jsonschema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadsyntax%2Fbackpack-jsonschema/lists"}