{"id":20856508,"url":"https://github.com/cityofnewyork/patterns-create-react-app","last_synced_at":"2026-03-03T19:03:40.772Z","repository":{"id":39017956,"uuid":"241662303","full_name":"CityOfNewYork/patterns-create-react-app","owner":"CityOfNewYork","description":"Sample application using React Scripts (Create React App) with the NYCO Common Agency Patterns library integration. Maintained by @nycopportunity","archived":false,"fork":false,"pushed_at":"2023-01-05T23:45:12.000Z","size":11096,"stargazers_count":4,"open_issues_count":20,"forks_count":0,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-10T21:09:39.911Z","etag":null,"topics":["create-react-app","demonstration","documentation","nycopatterns","nycopportunity","react","react-scripts","sample","tutorial"],"latest_commit_sha":null,"homepage":"https://nycopatterns.cityofnewyork.us","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/CityOfNewYork.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}},"created_at":"2020-02-19T16:14:33.000Z","updated_at":"2024-09-19T13:47:33.000Z","dependencies_parsed_at":"2023-02-05T00:03:28.474Z","dependency_job_id":null,"html_url":"https://github.com/CityOfNewYork/patterns-create-react-app","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/CityOfNewYork/patterns-create-react-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CityOfNewYork%2Fpatterns-create-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CityOfNewYork%2Fpatterns-create-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CityOfNewYork%2Fpatterns-create-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CityOfNewYork%2Fpatterns-create-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CityOfNewYork","download_url":"https://codeload.github.com/CityOfNewYork/patterns-create-react-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CityOfNewYork%2Fpatterns-create-react-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30056056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"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":["create-react-app","demonstration","documentation","nycopatterns","nycopportunity","react","react-scripts","sample","tutorial"],"created_at":"2024-11-18T04:32:12.943Z","updated_at":"2026-03-03T19:03:40.756Z","avatar_url":"https://github.com/CityOfNewYork.png","language":"JavaScript","readme":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and integrated the [NYCO Patterns library](https://nycopatterns.cityofnewyork.us) as a dependency **without ejection**. This integration is compatible with React Scripts **v3.4**. Version 4 of React Scripts introduces [breaking changes to asset include paths](https://github.com/facebook/create-react-app/issues/9870).\n\n# React Scripts + NYCO Patterns integration\n\n**$1** Install dependencies after [initializing a React Project](https://create-react-app.dev/docs/getting-started).\n\n    npm install sass @nycopportunity/patterns @nycopportunity/patterns-framework@^0.2.4\n\n* [**Dart Sass**](https://github.com/sass/dart-sass). This will enable [React Scripts'](https://github.com/facebook/create-react-app) use of the Webpack [sass-loader](https://webpack.js.org/loaders/sass-loader/) for compiling **.scss** files.\n\n* [**NYCO Patterns library**](https://nycopatterns.cityofnewyork.us) (referred to as *library*).\n\n* [**NYCO Patterns Framework**](https://github.com/CityOfNewYork/nyco-patterns-framework) (referred to as *framework*). The latest library is compatible with version `0.2.1` of the framework.\n\n**$2** Use the `SASS_PATH` environment variable to configure your include paths. Initialize or add to your **.env** the following:\n\n    SASS_PATH=src:node_modules/@nycopportunity:node_modules/@nycopportunity/patterns/src:node_modules/@nycopportunity/patterns-framework/src:node_modules/animate.scss\n\n**$3** Change the **index.css** to **index.scss** and set the library's asset paths variables to use the local project's path.\n\n    $cdn: '/src/';\n    $path-to-fonts: 'fonts';\n    $path-to-svg: 'svg';\n\n**$4** Import patterns into the main stylesheet. The following line will import everything. [*View this repository's index.scss file to browse the import configuration options*](blob/main/src/index.scss).\n\n    @import '~@nycopportunity/patterns/src/scss/imports';\n\n**$5** Copy distributed assets from the NYCO Patterns framework into the src directory of the project:\n\n    ./node_modules/@nycopportunity/patterns/dist/fonts \u003e ./src/fonts\n    ./node_modules/@nycopportunity/patterns/dist/svg \u003e ./src/svg\n    ./node_modules/@nycopportunity/patterns/dist/icons.svg \u003e ./src/icons.svg\n\n**$6** Run `npm start` to begin development.\n\n---\n\n**Notes**:\n\n* The configuration above is largely dependent on what patterns in the library you will be using in your project. The above steps are based on the usage of *all* NYCO Patterns stylesheets.\n\n* Node Sass can be used in place of Dart Sass, however, future pattern libraries will be migrating to Dart Sass.\n\n* The latest version of the framework *may* be used but not all of the patterns in the library are be compatible with it.\n\n* Below is a breakdown of the include paths for the `SASS_PATH` variable. Not all of them are required if only a few of the patterns are being used.\n\n```\nsrc\nnode_modules/@nycopportunity\nnode_modules/@nycopportunity/patterns/src\nnode_modules/@nycopportunity/patterns-framework/src\nnode_modules/animate.scss\n```\n\n* The font and svg assets only need to migrated into the project if using the NYCO Pattern's [fonts](https://github.com/IBM/plex) and/or [icons](https://nycopatterns.cityofnewyork.us/icons). You may also include fonts and svgs via [Google Fonts Embed](https://fonts.google.com/specimen/IBM+Plex+Sans) (fonts only) or the [CDN method of integration](https://github.com/CityOfNewYork/nyco-patterns-framework/blob/main/docs/installation.md#cdn).\n\n* Icons still require the provided [Framework Utility Script](https://github.com/CityOfNewYork/nyco-patterns-framework/tree/main/src/utilities/icons) ([or a similar method](https://css-tricks.com/ajaxing-svg-sprite/)) to add them to the DOM. However, the CDN path to the distributed icons can be passed to the method as opposed to hosting them with the project.\n\n* Guidance for this example is based on the following:\n  * Create React App's [*Adding a Sass Stylesheet* documentation](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)\n  * Webpack's [*sass-loader* documentation](https://webpack.js.org/loaders/sass-loader/)\n\n**Happy Coding!**\n\n---\n\n![The Mayor's Office for Economic Opportunity](NYCMOEO_SecondaryBlue256px.png)\n\n[The Mayor's Office for Economic Opportunity](http://nyc.gov/opportunity) (NYC Opportunity) is committed to sharing open source software that we use in our products. Feel free to ask questions and share feedback. **Interested in contributing?** See our open positions on [buildwithnyc.github.io](http://buildwithnyc.github.io/). Follow our team on [Github](https://github.com/orgs/CityOfNewYork/teams/nycopportunity) (if you are part of the [@cityofnewyork](https://github.com/CityOfNewYork/) organization) or [browse our work on Github](https://github.com/search?q=nycopportunity).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcityofnewyork%2Fpatterns-create-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcityofnewyork%2Fpatterns-create-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcityofnewyork%2Fpatterns-create-react-app/lists"}