{"id":18622067,"url":"https://github.com/caprover/caprover-frontend","last_synced_at":"2025-04-04T16:12:58.848Z","repository":{"id":40461874,"uuid":"165351445","full_name":"caprover/caprover-frontend","owner":"caprover","description":"Frontend App for https://github.com/caprover/caprover","archived":false,"fork":false,"pushed_at":"2024-10-24T00:54:39.000Z","size":12271,"stargazers_count":61,"open_issues_count":35,"forks_count":87,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-24T14:33:54.056Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/caprover.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":"2019-01-12T05:41:24.000Z","updated_at":"2024-10-24T09:39:21.000Z","dependencies_parsed_at":"2023-11-21T06:23:00.061Z","dependency_job_id":"51025b76-0668-4a3f-82e8-463776d4a30e","html_url":"https://github.com/caprover/caprover-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/caprover%2Fcaprover-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caprover%2Fcaprover-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caprover%2Fcaprover-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caprover%2Fcaprover-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caprover","download_url":"https://codeload.github.com/caprover/caprover-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208139,"owners_count":20901570,"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-07T04:15:04.043Z","updated_at":"2025-04-04T16:12:58.832Z","avatar_url":"https://github.com/caprover.png","language":"TypeScript","funding_links":["https://opencollective.com/caprover"],"categories":[],"sub_categories":[],"readme":"# Frontend App for CapRover\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Development\n\nRun CapRover backend service in debug mode. Change `.env.development` to match your backend. Then run `yarn start`\n\n\u003e **Note**: To create a simple backend API in debug mode, you can use [Play with Docker](https://labs.play-with-docker.com/). Just simply run the following commands and you'll be set:\n\u003e\n\u003e ```bash\n\u003e apk update \u0026\u0026 apk add nodejs npm python3\n\u003e git clone https://github.com/caprover/caprover.git\n\u003e cd caprover\n\u003e npm i\n\u003e npm run clean\n\u003e echo \"done\"\n\u003e ```\n\u003e\n\u003e Then click on Open Port button and get the URL for port `3000`, it should be something like this (make sure to remove trailing slash): `http://ip172-18-0-76-abcdef123456-3000.direct.labs.play-with-docker.com`\n\nWe strive to keep CapRover code base consistent. This will ensure a high level of consistency and lower maintenance load.\n\n### Available Scripts\n\nIn the project directory, you can run:\n\n#### `yarn start`\n\nRuns the app in the development mode.\n\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\n\nYou will also see any lint errors in the console.\n\n### `yarn run build`\n\nBuilds the app for production to the `build` folder.\n\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\n\nYour app is ready to be deployed!\n\n## Theming\n\nCapRover's fronted supports dark and light modes. It is based on `antd` colour schemes. Therefore, all used `antd` components within the project support both modes by default. However if we implement a custom component or want to change some global colors some steps needs to be considered.\n\n### Implement Dark Mode in custom component\n\nTo ensure your elements work with both dark and light modes, following points needs to be considered:\n\n-   **Don't use JSX inline styles for colors, use classNames instead and create rules within the `styles/style.less` or the according theme**\n-   Use `antd` variables as `@layout-body-background, @body-background, @skeleton-color` for the colors.\n    -   Use `@layout-body-background` for page backgrounds [`#f0f2f5`, `#000`]\n    -   Use `@background-color-light` for log views or input areas [`#fafafa`, `rgba(255, 255, 255, 0.04)`]\n    -   Use `@body-background` for elements within a card [`#fff`, `#000`]\n    -   Use `@skeleton-color` for all border colors. [`#f2f2f2`, `#303030`]\n-   Use the class `.inner-card` for nested cards, like the network stats.\n-   If you need additional colors, that are present within an `antd` component, grab the according variable located in `~antd/lib/style/themes/default.less`\n\n#### Dev Mode \u0026 Hot Reload\n\nIt can happen that modifying the `app.less` during `yarn run dev` leads to `FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory less`. To overcome this, we need to set `max-old-space-size`.\n\n```bash\nexport NODE_OPTIONS=\"--max-old-space-size=8192\"\n```\n\n### Global Variables\n\nTo add global less variables place them in `styles/vars.less`.\n\n### Override Antd specific Variables\n\nTo override `antd` specific colors modify the according constant in `config-overrides.js` -\u003e [`lightVars`, `darkVars`].\n\n## Contribution\n\nThanks for contributing to the frontend code! Since contributors list for CapRover automatically picks up the contributors from the main backend repo, please make a minor update the frontend commit in the dockerfile, so your name will get displayed on the main page as a contributor.\n\nhttps://github.com/caprover/caprover/blob/master/dockerfile-captain.release#L18\n\n## Learn More\n\nFor more details and documentation, please visit [https://CapRover.com](https://caprover.com/)\n\n## Tests\n\n### e2e\ne2e testing are nocking the network callback.\nHowever, you need to run the project before running the e2e testing to allow the headless browser to navigate through your pages.\nTo run end to end testing you just have to run `yarn start` then `yarn test:e2e` or `yarn test:e2e--open` if you want to display the result.\n## Backers\n\nThank you to all our backers! 🙏\n\n![Contributors](https://contrib.rocks/image?repo=caprover/caprover-frontend)\n\n[![Donate](https://opencollective.com/caprover/donate/button.png?color=blue)](https://opencollective.com/caprover#backer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaprover%2Fcaprover-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaprover%2Fcaprover-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaprover%2Fcaprover-frontend/lists"}