{"id":27643234,"url":"https://github.com/andy9775/yarsp","last_synced_at":"2025-07-19T19:34:28.726Z","repository":{"id":283909775,"uuid":"73658939","full_name":"andy9775/YARSP","owner":"andy9775","description":"Yet Another React Starter Pack: A starter pack for ReactJS containing code splitting, testing and an api endpoint.","archived":false,"fork":false,"pushed_at":"2016-12-09T23:38:34.000Z","size":59,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-24T00:11:28.344Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andy9775.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2016-11-14T02:24:19.000Z","updated_at":"2017-09-21T06:14:11.000Z","dependencies_parsed_at":"2025-03-23T01:02:27.590Z","dependency_job_id":"3d2ea505-c429-4049-81ec-8faf192f9d53","html_url":"https://github.com/andy9775/YARSP","commit_stats":null,"previous_names":["andy9775/yarsp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andy9775/YARSP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy9775%2FYARSP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy9775%2FYARSP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy9775%2FYARSP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy9775%2FYARSP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andy9775","download_url":"https://codeload.github.com/andy9775/YARSP/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy9775%2FYARSP/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265999051,"owners_count":23862219,"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":"2025-04-24T00:10:55.534Z","updated_at":"2025-07-19T19:34:28.710Z","avatar_url":"https://github.com/andy9775.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YARSP [![Build Status](https://travis-ci.org/andy9775/YARSP.svg?branch=master)](https://travis-ci.org/andy9775/YARSP) [![Coverage Status](https://coveralls.io/repos/github/andy9775/YARSP/badge.svg)](https://coveralls.io/github/andy9775/YARSP) [![codecov](https://codecov.io/gh/andy9775/YARSP/branch/master/graph/badge.svg)](https://codecov.io/gh/andy9775/YARSP) [![Code Climate](https://codeclimate.com/github/andy9775/YARSP/badges/gpa.svg)](https://codeclimate.com/github/andy9775/YARSP)\nYet Another React Starter Pack: A starter pack for ReactJS containing code splitting, testing and an api endpoint.\n\nProunounced as `yarr! + sp`\n\n# What is it\nYARSP is a starter pack / boiler plate package for ReactJS projects. It includes webpack and provides:\n\u003cul\u003e\n  \u003cli\u003eCode splitting\u003c/li\u003e\n  \u003cli\u003eSupports SASS\u003c/li\u003e\n  \u003cli\u003eDynamic route loading\u003c/li\u003e\n  \u003cli\u003eStructure includes an API end point\u003c/li\u003e\n  \u003cli\u003eFunctions and helpers to create testable code\u003c/li\u003e\n  \u003cli\u003eES2015\u003c/li\u003e\n  \u003cli\u003eCode Coverage (mocha, sinon, chai, istanbul, enzyme)\u003c/li\u003e\n  \u003cli\u003econtinuous integration\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/\"\u003eIsomorphic\u003c/a\u003e/Universal javascript\u003c/li\u003e\n\u003c/ul\u003e\n\n# Scripts\n| **Script**                | **Explanation**                                                                                                                            |\n|---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|\n| `npm run dev`             | Start the development server. Includes Hot Module Reloading (HMR) - just change a react component and watch the page update automatically. |\n| `npm start`               | Build the app and start the production server. All ES2015 code is run through babel and converted to ES5 and run through webpack.          |\n| `npm test`                | Run tests                                                                                                                                  |\n| `npm run build`           | Run the build scripts for the application. Runs babel and webpack scripts.                                                                 |\n| `npm run prod`            | Run the app in production mode by building it and starting the express server                                                              |\n| `npm run make-dir:build`  | Create the `./build` directory if it doesn't exist. `./build` holds the babel output.                                                      |\n| `npm run clean-dir:build` | Clean the `./build` directory if it exists, else create it.                                                                                |\n| `npm run make-dir:dist`   | Create the `./public/dist` directory. `./public/dist/` holds the webpack output.                                                           |\n| `npm run clean-dir:dist`  | Clean the `./public/dist` directory, else create it.                                                                                       |\n| `npm run babel`           | Run babel on the application to convert ES2015 to ES5.                                                                                     |\n| `npm run pack`            | Run webpack on the application.                                                                                                            \nTypicall only `npm start`, `npm run dev` and `npm test` should be run - all other scripts are called by those three.\n\n# Configuration\n###### Environment Variables\n| **Environment variable** \t| **Default production value** \t| **Default development value** \t| **Explanation**                                                                                                           \t| **Type**      \t| **Environment** \t|\n|--------------------------\t|------------------------------\t|-------------------------------\t|---------------------------------------------------------------------------------------------------------------------------\t|---------------\t|-----------------\t|\n| HMR_PORT                 \t| --                         \t| 3001                          \t| Port to bind hot module reloading to.                                                                                     \t| Number        \t| Development     \t|\n| SERVER_PORT              \t| 3000                         \t| 3000                          \t| Which port the node server should bind to (production and development setting)                                            \t| Number        \t| All             \t|\n| NODE_ENV                 \t| NONE                         \t| NONE                          \t| Specify operating environment. Expects 'production', 'development', or 'test'                                             \t| String        \t| All             \t|\n| SERVE_STATIC             \t| false                        \t| true                          \t| Specify if express should serve static pages. If false a proxy like nginx should be responsible for service static pages. \t| bool          \t| Production      \t|\n\n# Examples\nCurrently a simple todo app is built with a very simple API endpoint as well as a home page and about page as a proof of use. Advanced apps will (and should) expand on the current layout and configuration.\n\n\n# Q \u0026 A\nYou have development dependencies inside of your production dependencies list - what gives?\n\u003eThis allows you to build the app on the server without having to move around two sets of code - ES2015 and ES5. By having one bit of code in version control, ES2015, and building the production code via babel it makes your version control files smaller since your not moving around duplicate files (classes, functions, variables, etc.). The application is also structured to build the resulting production files when run in production mode. While this goes against NPM's guidelines, we are not publicly distributing our app via NPM - therefore its ok.\u003cbr\u003e\u003cbr\u003e There is also the option of creating a script which installs all of our devDependencies, builds the app (transpiles ES2015), uninstalls the devDependencies and continues the start process. The downside of this is the need to install **all** of your devDependencies which increases build times.\u003cbr\u003e\u003cbr\u003eIn an ideal world NPM would have an `npm setup` command with `setup` dependencies. This would be run before `npm start` and would install all setup dependencies prior to running, and uninstall them after running if a setup script is defined.\n\nWhat, no gulp/grunt?\n\u003eGulp and Grunt are useful tools where and when they are needed - but NPM does everything that most web apps would need, so why add yet another tool and another file to maintain. If this is really a problem and your app really needs to use gulp/grunt and NPM won’t do what you need it to do, then you probably shouldn't be using a starter kit to begin with. Feel free however to pick and choose some parts from this starter pack! \u003ca href=\"https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.ahpe1cj10\"\u003eFurther reading\u003c/a\u003e\u003cbr\u003e\u003cbr\u003eA tool is just that, a tool. Use Gulp/Grunt if you have a complex testing or setup process - I have nothing against it - but start with npm scripts first and then graduate.\n\n\n# TODO\n\u003cul\u003e\n  \u003cli\u003eUpgrade HMR to React Hot Loader 3\u003c/li\u003e\n  \u003cli\u003eEnable nodemon and configure to reload server (endpoints, routes, etc.) while still retaining HMR features\u003c/li\u003e\n  \u003cli\u003eStyles?\u003c/li\u003e\n  \u003cli\u003eUpdate README and include examples\u003c/li\u003e\n  \u003cli\u003eSplit reducers (webpack code splitting)\u003c/li\u003e\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandy9775%2Fyarsp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandy9775%2Fyarsp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandy9775%2Fyarsp/lists"}