{"id":18865833,"url":"https://github.com/proustibat/connected-molkky","last_synced_at":"2025-09-18T16:46:23.744Z","repository":{"id":39897711,"uuid":"220629865","full_name":"proustibat/connected-molkky","owner":"proustibat","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-31T11:31:01.000Z","size":665,"stargazers_count":2,"open_issues_count":38,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-31T13:19:38.875Z","etag":null,"topics":["babel","babel-node","babel-node-react","circleci","docker","docker-compose","enzyme","eslint","expressjs","jest","materializecss","nodejs","nodemon","react","react-testing-library","renovate","socket-io","sonarcloud","ssr","webpack"],"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/proustibat.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-11-09T11:05:33.000Z","updated_at":"2023-03-08T05:12:05.000Z","dependencies_parsed_at":"2023-01-26T23:30:27.060Z","dependency_job_id":"3772d6e0-938b-45a7-9a74-9a3ddda8eec9","html_url":"https://github.com/proustibat/connected-molkky","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/proustibat/connected-molkky","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proustibat%2Fconnected-molkky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proustibat%2Fconnected-molkky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proustibat%2Fconnected-molkky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proustibat%2Fconnected-molkky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/proustibat","download_url":"https://codeload.github.com/proustibat/connected-molkky/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proustibat%2Fconnected-molkky/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275797926,"owners_count":25530257,"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","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["babel","babel-node","babel-node-react","circleci","docker","docker-compose","enzyme","eslint","expressjs","jest","materializecss","nodejs","nodemon","react","react-testing-library","renovate","socket-io","sonarcloud","ssr","webpack"],"created_at":"2024-11-08T05:04:45.394Z","updated_at":"2025-09-18T16:46:23.690Z","avatar_url":"https://github.com/proustibat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Connected Molkky\n[![CircleCI](https://circleci.com/gh/proustibat/connected-molkky/tree/master.svg?style=svg\u0026circle-token=511d3d6891047a304594ef257911443a66a80519)](https://circleci.com/gh/proustibat/connected-molkky/tree/master)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=proustibat_connected-molkky\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=proustibat_connected-molkky)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=proustibat_connected-molkky\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=proustibat_connected-molkky)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=proustibat_connected-molkky\u0026metric=code_smells)](https://sonarcloud.io/dashboard?id=proustibat_connected-molkky)\n[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=proustibat_connected-molkky\u0026metric=sqale_index)](https://sonarcloud.io/dashboard?id=proustibat_connected-molkky)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=proustibat_connected-molkky\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=proustibat_connected-molkky)\n\n* [Prerequisites](#prerequisites)\n* [Install](#install)\n* [Configuration](#configuration)\n* [Development](#development)\n* [API](#api)\n* [Testing and linting](#testing-and-linting)\n* [Production](#production)\n* [CI and quality reports](#ci-and-quality-reports)\n* [Docker](#docker)\n    + [Docker-compose to work locally](#docker-compose-to-work-locally)\n    + [Docker images for production](#docker-images-for-production)\n* [How To](#how-to)\n    + [Create a new route](#create-a-new-route)\n    + [Create a sub route](#create-a-sub-route)\n    + [Use the react router with the express server side rendering](#use-the-react-router-with-the-express-server-side-rendering)\n    + [Use MaterializeCSS javascript component in your React component](#use-materializecss-javascript-component-in-your-react-component)\n\n***\n\n## Prerequisites\n\nBe sure [Node](https://nodejs.org/en/) and [npm](https://www.npmjs.com/get-npm) are installed.\nWe use [Yarn](https://yarnpkg.com/lang/en/) instead of npm but it doesn't matter.\n\n## Install\n\n```$xslt\ngit clone git@github.com:proustibat/connected-molkky.git\ncd connected-molkky\nyarn\n```\n\n## Configuration\n\nCreate a `.env` file at the root of the project as follows (replace variables depending on your environment):\n\n```$xslt\nNODE_ENV=development\nSERVER_PORT=8888\nBS_PORT=3000\n```\n\n## Development\n\n```$xslt\nyarn dev\n```\nIt runs server on port SERVER_PORT (8888) and watches files with nodemon\n\n```$xslt\nyarn front\n``` \nIt runs webpack to watch front files.\nOpen [localhost:8888](http://localhost:8888) to start working.\n\n## Testing and linting\n\n```$xslt\nyarn test\nyarn lint --fix\n```\n\n## Production\n\n```$xslt\nyarn build\nyarn start\n```\n\nIt copy necessary files in dist and public folders, build server and client files.\nThen it runs the node server on port 8888.\nOpen [localhost:8888](http://localhost:8888) to see it in action.\n\n## API\n\n[Endpoints are documented here on postman](https://documenter.getpostman.com/view/1117131/SW11Vxdm?version=latest)\n\nYou can find them or adding some in `src/server/routes/api`. Don't forget to add new api routes to the index file.\n\n\n## CI and quality reports\n\n- [CircleCI](https://circleci.com/gh/proustibat/connected-molkky)\n- [SonarCloud](https://sonarcloud.io/dashboard?id=proustibat_connected-molkky)\n- [PackTracker.io](https://app.packtracker.io/organizations/396/projects/300)\n\n## Docker\n\n### Docker-compose to work locally\n// TODO\n\n### Docker images for production\n// TODO\n\n***\n\n## How To\n\n### Create a new route\n\nThis example assumes you want to create a new page at the url '/hello'.\n\n1. Create the view in `src/front/pages/Hello/index.js` :\n    ```$xslt\n    import React from 'react';\n    export default () =\u003e \u003cdiv\u003eHello\u003c/div\u003e;\n    ```\n\n2. Create the route in `src/server/routes/pages/hello/index.js`:\n    ```$xslt\n    import Hello from '@pages/Hello';\n    import React from 'react';\n    import express from 'express';\n    import renderTemplate from '@root/server/renderTemplate';\n    \n    const router = express.Router();\n    \n    router.get('/', (req, res) =\u003e {\n      const data = { title: 'Hello World' };\n      res.writeHead(200, { 'Content-Type': 'text/html' });\n      res.end(renderTemplate(\u003cHello {...data} /\u003e));\n    });\n    \n    module.exports = router;\n    ```\n   Note that `data` will be the props of the component.\n\n3. Add new created route to `src/server/pages/routes/index.js`: \n    ```$xslt\n    // ...\n    import hello from './hello';\n    \n    export default {\n        // ...,\n        hello\n    };\n    ```\n\n4. Declare the javascript file for client in the app (`src/front/App.js`):\n   Import your component: \n   ```$xslt\n   // Import your component\n   import Hello from '@pages/Hello';\n   ...\n   ...\n    }, {\n      isMatching: (pathname) =\u003e pathname === '/hello',\n      component: Hello,\n    }, {\n      isMatching: () =\u003e true,\n      component: null,\n    }];\n    ```\n   \n   Note the order of the array is important and also the last object that defines the default behavior.\n\n\nYou can run [localhost:8888/hello](http://localhost:8888/hello) and the button should display an alert when it's clicked.\n\n### Create a sub route\n\nThis example assumes a route `/hello` exists, you wanna create `/hello/world`:\n\n1. Create the view in `./src/front/pages/Hello/World/index.js`:\n    ```$xslt\n    import React from 'react';\n    export default () =\u003e \u003cdiv\u003eHello World\u003c/div\u003e;\n    ```\n   \n2. Add this into `src/server/routes/hello/index.js`:\n    ```$xslt\n    ...\n    import World from '@pages/Hello/World';\n    ...\n    \n    router.get('/world', (req, res) =\u003e {\n      const data = { title: 'Hello wub route' };\n      res.writeHead(200, { 'Content-Type': 'text/html' });\n      res.end(renderTemplate(\u003cWorld {...data} /\u003e));\n    });\n    \n    module.exports = router;\n    ```\n  \n3. Map route and component in `./src/front/App.js`:\n    ```$xslt\n    ...\n    import World from '@pages/Hello/World';\n    ...\n    \n    export default class App {\n      ...\n          isMatching: (pathname) =\u003e pathname === '/hello/world',\n          component: World,\n        }, {\n          isMatching: () =\u003e true,\n          component: null,\n        }];\n      ...\n    ```\n\nYou can run [localhost:8888/hello/world](http://localhost:8888/hello/world) and the button should work.\n\n### Use the react router with the express server side rendering\n\n// TODO\n\n### Use MaterializeCSS javascript component in your React component\n\n// TODO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproustibat%2Fconnected-molkky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fproustibat%2Fconnected-molkky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproustibat%2Fconnected-molkky/lists"}