{"id":23463541,"url":"https://github.com/arielfr/react-base-app","last_synced_at":"2026-04-13T03:08:30.371Z","repository":{"id":72461174,"uuid":"89725710","full_name":"arielfr/react-base-app","owner":"arielfr","description":"React Boilerplate with SSR + Hot Module Replacement (React and LESS)","archived":false,"fork":false,"pushed_at":"2021-02-25T19:11:21.000Z","size":331,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-16T01:43:22.280Z","etag":null,"topics":["adaptive","babel","express","hot-module-replacement","hot-reload","layout","nodejs","react","server-side-rendering","webpack","webpack2"],"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/arielfr.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":"2017-04-28T16:43:05.000Z","updated_at":"2021-02-25T19:11:25.000Z","dependencies_parsed_at":"2023-04-30T07:31:11.721Z","dependency_job_id":null,"html_url":"https://github.com/arielfr/react-base-app","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielfr%2Freact-base-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielfr%2Freact-base-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielfr%2Freact-base-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielfr%2Freact-base-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arielfr","download_url":"https://codeload.github.com/arielfr/react-base-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565079,"owners_count":21125415,"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":["adaptive","babel","express","hot-module-replacement","hot-reload","layout","nodejs","react","server-side-rendering","webpack","webpack2"],"created_at":"2024-12-24T09:12:48.213Z","updated_at":"2026-04-13T03:08:30.345Z","avatar_url":"https://github.com/arielfr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Boilerplate for SSR + HMR (React + SASS files) + Isomorphic Code + Adaptive Design (YES!)\n\n\u003e Side Note: I'm proud to announce that it's working with React16 with hydrate.\n\nThis is a boilerplate for creating a Server Side React Application with Client Side. This works using Isomorphic code between server and client side. HMR applies to React Components and **SASS** files. This application is a boilerplate, so you can use it to create your own React Application.\n\n**It counts with Adaptive Design, you only need to enable the `adaptive` configuration on the config files** (This is explain at more detail below).\n\nJust clone it, fork it, or copy the code and start constructing yout application. This is just a skeleton.\n\n**This application is Production Ready. You just need to compile the assets and run the app, and it will work like a charm**.\n\n### App Structure\n\nThis folder contains the application, inside you will find:\n\n- client: This is the entry point for webpack\n- pages: This folder needs to have the next structure\n    - page-name (This is the one that is going to be render automatically by the SSR)\n        - styles (This is the styles folder)\n            - index.scss (Main Styles for the page) - Non Adaptive\n        - index.js (Page that is going to be render with ReactDOM)\n        \nIf you want to use adaptive mode, you need to create two different styles files inside `styles` folder\n\n- index.desktop.scss\n- index.mobile.scss\n\nDepending on the device that enters the page, it will server `desktop` or `mobile` css automatically.\n\n#### Adaptive\n\nTo use Adaptive design on the application, you need to enable the **adaptive** configuration on the config files:\n\n```json\n\"adaptive\": true\n```\n\nThen you need to use the patter for adaptive design. That means you need two CSS files, one for `desktop` and one for `mobile`. The application is going to automatically loads the asset file depending on the device use to render.\n\nIf you want to change the component that is going to be render depending the device, a **device** prop is going to be *injected* in all the pages. So, in your application index, you are going to count with the device property and you can render the components depending on them:\n\n```javascript\nconst React = require('react');\nconst { Component } = require('react');\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    console.log('cargo...');\n  }\n\n  render() {\n    return (React.Children.only(this.props.device.type === 'desktop' ? \u003cDesktopPageComponent/\u003e : \u003cMobilePageComponent/\u003e));\n  }\n}\n\nmodule.exports = App;\n```\n\n#### Built-in Examples\n\nYou will count with two examples:\n\n- index: Example page without adaptive design\nIf you want to try the index example you need to disable the **adaptive configuration**.\n\nEndpoint to test: /\n\n- adaptive: Example page with adaptive design\nIf you want to try the index example you need to enable the **adaptive configuration**.\n\nEndpoint to test: /adaptive\n\n#### Routes\n\nThe res.render method has been **re-write**. It works like a view-engine for React. You only need to pass the name of the page that you want to render and the initial props to send:\n\n```javascript\nres.render('index', {});\n```\n\nThen the render method is going to find the Page Component that inside the index folder on pages\n\n#### Layout\n\nThe application will load a Default Layout for the page. You can send more props to the Default Layout adding them to the props sent on res:\n\n```javascript\nres.render('index', {\n  layout: {\n    key: 'This is a prop that is only going to be use by the layout'\n  }\n});\n```\n\n##### Layout Default Props\n\nThe default props receive by the layouts are:\n\n- userAgent (From Header)\n- device (From device detection middleware)\n\n\n### Page Component Default Props\n\nThe `index.js` component for the page is also going to receive default props:\n\n- device (From device detection middleware)\n\n## Configurations\n\nThe application includes the library [config](http://npmjs.com/package/config) to load the configurations. Just include the package and use it.\n\n````javascript\nconst config = require('config');\n\nconfig.get('specific.configuration');\n````\n\n## Logger\n\nThis boilerplate includes a logger helper witch use [**winston**](https://www.npmjs.com/package/winston-this) to ouput on the console. To use it just:\n\n````javascript\nconst logger = require('winston-this')('log-name');\n\nlogger.info('This is a log');\n````\n\nThis are the available methods:\n- info\n- warn\n- error\n- verbose\n- debug\n- silly\n\n## Device Detection\n\nInside the project you will find a `device-detection` middleware. This will use the `user-agent` and match with a REGEX to find out wich device it is.\n\nIts using the [device](npmjs.com/package/device) package to do this. Then, we manipulate the response to send only the next types:\n\n- desktop\n- mobile\n\nYou can find the object device on the request:\n\n```javascript\nreq.device = {\n  type: 'desktop',\n  model: ''\n}\n```\n\nIf you want to get the specific model of the device, you need to change the configuration `get-model` to `true` on `device-detection`.\n\n## Unit Testing\n\nThis application is testing ready. It already includes the next dependencies:\n\n- enzyme\n- enzyme-adapter-react-16 (Adapter for React16)\n\nIt also includes the setup.js (inside test folder) for executing tests of Enzyme for React16.\n\n### What do I need to do?\n\nYou only need to create the tests file on the test folder or in the specific component folder. The file name must end with `*.spec.js`. Example:\n\n```\nindex.spec.js\n```\n\n## Covertura\n\nIf you have tests, you can have Covertura. We include the next packages for calculating the covertura:\n\n- istanbul\n\nYou can configure it using the `.istanbul.yml` file\n\n## Run Tests \u0026 Covertura\n\nTo run the Unit Tests you just need to run the next command:\n\n```bash\nnpm run test\n```\n\n## Scripts\n\nIf you want to develop, just:\n\n```bash\nnpm run start-dev\n```\n\n## Scripts + Production\n\nIf you want to deploy the application to production, you need to build the application and the star the application\n\n```bash\nnpm run-script build\nnpm start\n```\n\n## Author\n\nAriel Rey\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farielfr%2Freact-base-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farielfr%2Freact-base-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farielfr%2Freact-base-app/lists"}