{"id":18336409,"url":"https://github.com/launchpadlab/alejandro-lpl-frontend","last_synced_at":"2025-04-09T19:55:40.825Z","repository":{"id":38425832,"uuid":"378936539","full_name":"LaunchPadLab/alejandro-lpl-frontend","owner":"LaunchPadLab","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-27T05:20:21.000Z","size":3335,"stargazers_count":0,"open_issues_count":15,"forks_count":0,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2025-04-09T19:55:36.886Z","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/LaunchPadLab.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":"2021-06-21T13:16:35.000Z","updated_at":"2021-06-21T13:22:06.000Z","dependencies_parsed_at":"2023-01-28T18:30:56.241Z","dependency_job_id":null,"html_url":"https://github.com/LaunchPadLab/alejandro-lpl-frontend","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/LaunchPadLab%2Falejandro-lpl-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Falejandro-lpl-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Falejandro-lpl-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Falejandro-lpl-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LaunchPadLab","download_url":"https://codeload.github.com/LaunchPadLab/alejandro-lpl-frontend/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103911,"owners_count":21048245,"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-11-05T20:07:50.119Z","updated_at":"2025-04-09T19:55:40.806Z","avatar_url":"https://github.com/LaunchPadLab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lpl-onboarding-frontend\nThis repository serves as the front-end template for virtually all of LaunchPad Lab's projects that utilize [React](https://reactjs.org/). It comes pre-configured with internal libraries, state management, and API middleware to allow developers to jump directly into building features.\n\n## Contents\n\n- [Quickstart](#quickstart)\n- [Prerequisites](#prerequisites)\n- [Setting up a new project](#setting-up-a-new-project)\n- [Scripts](#scripts)\n- [Environment variables](#environment-variables)\n- [Developer tools](#developer-tools)\n  - [Commit hooks](#commit-hooks)\n  - [Dot index files](#dot-index-files)\n  - [Subsection generator](#subsection-generator)\n  - [Server status overlay](#server-status-overlay)\n  - [API proxy (advanced)](#api-proxy-advanced)\n- [Boilerplate](#boilerplate)\n  - [Subsections](#subsections)\n  - [Main Layout](#main-layout)\n\n## Quickstart\n\n```\n$ git clone git@github.com:LaunchPadLab/lpl-onboarding-frontend.git\n$ cd lpl-onboarding-frontend\n$ load_secrets\n$ yarn start\n```\n\n## Prerequisites\n\nThe following programs are required in order to run the client template:\n+ Node: `^8.11.0 || ^10.13.0`\n  + Download/upgrade using [nvm](https://github.com/nvm-sh/nvm)\n+ Yarn: `^1.0.0`\n  + Download via [homebrew](https://yarnpkg.com/en/docs/install)\n\n## Setting up a new project\n1. Clone this template into a separate directory with the name of your project\n    ```bash\n    git clone git@github.com:LaunchPadLab/client-template.git \u003cproject-name\u003e\n    ```\n1. Run `yarn setup`\n    1. Answer `Y` to clearing the git history\n    1. Provide a name (e.g., `client-template`)\n    1. Provide a display name, (e.g., `LPL's Client Template`)\n1. Follow the [Project Setup Checklist](PROJECT_SETUP_CHECKLIST.md) for setting up a GitHub repository, continuous integration, and a Heroku deployment pipeline\n\n## Scripts\n\nThese scripts are available to be executed via the command line:\n+ `yarn setup`: downloads all necessary node modules, clears the git history, and sets the name of your project.\n+ `yarn start`: compiles the site in development mode at a localhost URL. The site will reload when any changes are made.\n+ `yarn lint`: lints the project code with [`eslint`](https://www.npmjs.com/package/eslint). This script will be run automatically on every commit.\n+ `yarn test`: runs unit tests with [Jest](https://facebook.github.io/jest/) and integration tests with [Cypress](https://www.cypress.io/). Tests can also be run individually using:\n  + `yarn test:unit`\n  + `yarn test:integration`\n+ `yarn build`: compiles the site in production mode to the `/build` folder.\n+ `yarn server`: serves the contents of the `/build` folder using the production server (`server.js`).\n+ `yarn analyze-bundle`: (advanced) creates a view for inspecting bundle sizes for performance optimizations.\n\n## Environment variables\n\nEnvironment variables will be pulled from `config/application.yml` via [figaro-js](https://github.com/LaunchPadLab/figaro-js) and injected into the code as `process.env`. You can use the initializer file `config/figaro.js` to customize which variables are required or hidden from the public build. This public `process.env` is available on the `window` and will reload on page refresh.\n\n_Note: `process.env.NODE_ENV` is automatically set via the webpack `mode` and cannot be overridden. In order to add environment-specific behavior that deviates from this default, you can create a custom variable (e.g. `SENTRY_ENV`)._\n\n## Pull Requests\nThis repo contains a template for Pull Request (PR) descriptions to help you to give easy and consistent instructions and context to a Code Reviewer and QA Reviewer.\nMore information on PR best practices for both Authors and Reviewers are included in the [LPL Pull Request Guidelines](https://github.com/LaunchPadLab/opex-public/blob/master/gists/pull-request-guidelines.md).\n\n## Developer tools\n\nThe following tools are bundled with this template to help speed the development process:\n\n### Commit hooks\n\nA pre-commit hook will automatically lint and prevent a commit if there are linting errors found that were not fixable.\n\nPull requests will trigger [review apps](https://devcenter.heroku.com/articles/github-integration-review-apps) in Heroku (review [app.json](app.json) for config details).\n\n### Dot index files\n\nThis template includes [DotIndexWebpackPlugin](https://www.npmjs.com/package/dot-index-webpack-plugin), which will automatically create index files for directories in the code base. Index files will be generated whenever the app is run in development mode, and will be ignored by `git`.\n\n_Note: When checking out a new branch or merging in changes, you may need to rebuild the dot index files before linting succeeds. You can accomplish this by running `yarn start`._\n\n### Subsection generator\n\nFor creating new subsections, it is recommended to use the [subsection generator](https://github.com/LaunchPadLab/lp-subsection-generator), which comes pre-installed as a dev dependency. You can run this generator using the following command: `yarn generate-subsection \u003csubsectionName\u003e`\n\n### Server status overlay\nThis overlay is only shown in non-production environments. It pings the [api](./src/js/services/api.js) at the index route (`GET /`) to make sure that the api is up and running. This helps flag a common but subtle issue where data cannot be retrieved because the api is not available.\n\n\n_Note: this requires the API to support responding to a GET request at `/`._\n\n### API proxy (advanced)\n\nExternal API requests can be proxied by setting the `PROXIED_API_URL` and `PROXIED_API_TOKEN` (optional) env vars.\nOnce this is done, any requests made to `/proxy` will be passed along to the specified url.\n\n## Boilerplate\n\nThe following app boilerplate is included in this template:\n\n### Subsections\nEach client template starts with [Home](./src/js/main/home) and [Styleguide](./src/js/main/styleguide) subsections that have already been generated and added to the global `Routes` and `reducer` files.\n\nThe `Home` subsection can either be reused or removed by the developer, while it is recommended to leave the `Styleguide` subsection for a designer to create functional component markup and associated sass styling to accelerate development.\n\n### Main Layout\nThe app-wide [Layout](./src/js/main/Layout.js) file comes with the following feature(s) out of the box:\n\n#### Skip Navigation Link\nThere is a [skip navigation link](https://webaim.org/techniques/skipnav/) that will show up at the top of the screen when a user first hits tab. This is linked to a `\u003cmain\u003e` tag in the app-wide `Layout.js` file that wraps the children rendered from each individual subsection.\n\nIf the application __does not__ use this layout to render the site-wide header and/or navigation (which are provided OOTB as `\u003cHeader /\u003e` and `\u003cFooter /\u003e` components), then the placement of the `\u003cmain id=\"main-content\" /\u003e` __must__ be moved accordingly to wrap the actual content of the site and preserve the functionality of the skip navigation link.\n\n_Note: as long as the main Layout file is still in use, the `\u003cSkipNavLink /\u003e` can stay in this file._\n\nTo change the styling of this component, you can modify the individual [sass file](./src/scss/components/_skip-nav-link.scss).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Falejandro-lpl-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaunchpadlab%2Falejandro-lpl-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Falejandro-lpl-frontend/lists"}