{"id":18293484,"url":"https://github.com/nwaywood/react-fullstack-template","last_synced_at":"2025-04-05T11:31:06.888Z","repository":{"id":55371989,"uuid":"99061483","full_name":"nwaywood/react-fullstack-template","owner":"nwaywood","description":"React template with a NodeJS backend","archived":false,"fork":false,"pushed_at":"2022-12-10T16:07:46.000Z","size":2396,"stargazers_count":21,"open_issues_count":12,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-21T03:34:27.684Z","etag":null,"topics":["css-in-js","nodejs","react-router","reactjs"],"latest_commit_sha":null,"homepage":"","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/nwaywood.png","metadata":{"files":{"readme":"README.md","changelog":"history.md","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":"2017-08-02T02:07:32.000Z","updated_at":"2024-11-04T23:39:38.000Z","dependencies_parsed_at":"2023-01-26T08:46:54.431Z","dependency_job_id":null,"html_url":"https://github.com/nwaywood/react-fullstack-template","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/nwaywood%2Freact-fullstack-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwaywood%2Freact-fullstack-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwaywood%2Freact-fullstack-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwaywood%2Freact-fullstack-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nwaywood","download_url":"https://codeload.github.com/nwaywood/react-fullstack-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247330593,"owners_count":20921659,"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":["css-in-js","nodejs","react-router","reactjs"],"created_at":"2024-11-05T14:24:43.313Z","updated_at":"2025-04-05T11:31:06.539Z","avatar_url":"https://github.com/nwaywood.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Fullstack Template\n\nThis repository contains a project template for React/NodeJS development\n\n1. [Features](#features)\n1. [Getting Started](#getting-started)\n1. [Application Structure](#application-structure)\n1. [Development](#development)\n1. [Deployment](#deployment)\n1. [Linting and Formatting](#linting-and-formatting)\n1. [History](#history)\n\n## Features\n\n* [react](https://github.com/facebook/react)\n* [react-router](https://github.com/ReactTraining/react-router)\n* [emotion](https://github.com/tkh44/emotion)\n* [flow](https://flow.org/en/)\n* [webpack](https://github.com/webpack/webpack)\n* [babel](https://github.com/babel/babel)\n* [eslint](http://eslint.org)\n* [prettier](https://github.com/prettier/prettier)\n* [nodemon](http://nodemon.io)\n* [koa](https://github.com/koajs/koa)\n\n## Getting Started\n\nNote: node 7.6 or later is required for this template to work since it uses ES6 generators\n\nSetup directory for project:\n\n```bash\ngit clone git@github.com:nwaywood/react-fullstack-template.git \u003cyour-project-name\u003e\ncd \u003cyour-project-name\u003e\nrm -rf .git\n```\n\nFrom the root directory, install the project dependencies and check that it works:\n\n```bash\nnpm install           # install dependencies\nnpm run serve         # run the server\n```\n\nand then from another terminal:\n\n```bash\nnpm start             # compile and launch\n```\n\n## Application Structure\n\n```\n.\n├── app                            # Frontend application\n│   ├── public                     # Static resources (html, images etc)\n│   └── src                        # Source code, which is bundled into the `dist` folder by `webpack`\n│       ├── index.js               # The entrypoint for the React application\n│       ├── AppErrorBoundary.js    # Generic top level Error Boundary for the application\n│       ├── globalCSS.js           # Any global CSS used in the application (should be kept to a minimum)\n│       └── ...                    # Domain specific components\n├── dist                           # Build directory, which is served by the server as static directory\n└── server                         # Root folder for server code\n```\n\nNote: The structure of domain specific components within `/src` follow the `presentational` vs `component` model. Refer to [this](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.469taxbj0) blog post for more information\n\n## Development\n\n```bash\nnpm start\n```\n\nto start the development server. And to communicate with the api:\n\n```bash\nnpm run serve:watch\n```\n\nand the devServer will proxy api calls to the backend koa server... magic!\n\n## Deployment\n\n```bash\nnpm run build          # compile project into /dist folder\n```\n\nthen you can serve the production app with\n\n```bash\nnpm run serve\n```\n\nBy default the production server listens on port `3000`\n\nIf you want to run the application on port other than `3000`, simply define it as environment variable:\n\n```bash\nPORT=4000 npm run serve\n```\n\n### Docker\n\nBuild the docker image:\n\n`docker build -t YOUR_IMAGE_NAME .`\n\nRun the container:\n\n`docker run -it -p 3000:3000 --name YOUR_CONTAINER_NAME YOUR_IMAGE_NAME`\n\n## Linting and Formatting\n\nThis project uses `prettier` integrated with `eslint` to show formatting errors via `eslint`. To automatically fix\nthese formatting errors you can run `npm run format`. However, it is recommended to integrate this functionality with\nyour editor to improve the development workflow.\n\n## History\n\nFor an overview of the evolution of this template and key design decisions we have made, see [here](https://github.com/nwaywood/react-fullstack-template/tree/master/history.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwaywood%2Freact-fullstack-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnwaywood%2Freact-fullstack-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwaywood%2Freact-fullstack-template/lists"}