Connected Molkky

Prerequisites
Install
Configuration
Development
API
Testing and linting
Production
CI and quality reports
Docker
- Docker-compose to work locally
- Docker images for production
How To

Prerequisites

Be sure Node and npm are installed. We use Yarn instead of npm but it doesn't matter.

Install

git clone [email protected]:proustibat/connected-molkky.git
cd connected-molkky
yarn

Configuration

Create a .env file at the root of the project as follows (replace variables depending on your environment):

NODE_ENV=development
SERVER_PORT=8888
BS_PORT=3000

Development

yarn dev

It runs server on port SERVER_PORT (8888) and watches files with nodemon

yarn front

It runs webpack to watch front files. Open localhost:8888 to start working.

Testing and linting

yarn test
yarn lint --fix

Production

yarn build
yarn start

It copy necessary files in dist and public folders, build server and client files. Then it runs the node server on port 8888. Open localhost:8888 to see it in action.

API

Endpoints are documented here on postman

You can find them or adding some in src/server/routes/api. Don't forget to add new api routes to the index file.

CI and quality reports

Docker

Docker-compose to work locally

// TODO

Docker images for production

// TODO

How To

Create a new route

This example assumes you want to create a new page at the url '/hello'.

Create the view in src/front/pages/Hello/index.js :

import React from 'react';
export default () => <div>Hello</div>;

Create the route in src/server/routes/pages/hello/index.js:

import Hello from '@pages/Hello';
import React from 'react';
import express from 'express';
import renderTemplate from '@root/server/renderTemplate';

const router = express.Router();

router.get('/', (req, res) => {
  const data = { title: 'Hello World' };
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(renderTemplate(<Hello {...data} />));
});

module.exports = router;

Note that data will be the props of the component.

Add new created route to src/server/pages/routes/index.js:

// ...
import hello from './hello';

export default {
    // ...,
    hello
};

Declare the javascript file for client in the app (src/front/App.js): Import your component:

// Import your component
import Hello from '@pages/Hello';
...
...
 }, {
   isMatching: (pathname) => pathname === '/hello',
   component: Hello,
 }, {
   isMatching: () => true,
   component: null,
 }];

Note the order of the array is important and also the last object that defines the default behavior.

You can run localhost:8888/hello and the button should display an alert when it's clicked.

Create a sub route

This example assumes a route /hello exists, you wanna create /hello/world:

Create the view in ./src/front/pages/Hello/World/index.js:

import React from 'react';
export default () => <div>Hello World</div>;

Add this into src/server/routes/hello/index.js:

...
import World from '@pages/Hello/World';
...

router.get('/world', (req, res) => {
  const data = { title: 'Hello wub route' };
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(renderTemplate(<World {...data} />));
});

module.exports = router;

Map route and component in ./src/front/App.js:

...
import World from '@pages/Hello/World';
...

export default class App {
  ...
      isMatching: (pathname) => pathname === '/hello/world',
      component: World,
    }, {
      isMatching: () => true,
      component: null,
    }];
  ...

You can run localhost:8888/hello/world and the button should work.

Use the react router with the express server side rendering

// TODO

Use MaterializeCSS javascript component in your React component

// TODO

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@babel/plugin-proposal-class-properties`
npm	`@babel/polyfill`
npm	`babel-eslint`
npm	`browser-sync-reuse-tab`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

circleci

.circleci/config.yml

sonarcloud 1.0.1

circleci/node 11.15.0

circleci/node 11.15.0

circleci/node 11.15.0

circleci/node 11.15.0

docker-compose

docker-compose.yml

dockerfile

Dockerfile

node 10

prod.Dockerfile

node 10

rasp.Dockerfile

arm32v7/node 10.16.2

npm

package.json

@babel/polyfill 7.7.0

advlib 0.1.4

body-parser 1.19.0

cookie-parser 1.4.4

debug 4.1.1

express 4.17.1

http-errors 1.7.3

lodash 4.17.15

materialize-css 1.0.0

morgan 1.9.1

node-fetch 2.6.0

node-sass-middleware 0.11.0

normalize.css 8.0.1

open 7.0.0

path 0.12.7

react 16.12.0

react-dom 16.12.0

react-router-dom 5.1.2

regenerator-runtime 0.13.3

serialize-javascript 2.1.0

socket.io 2.3.0

socket.io-client 2.3.0

@babel/cli 7.7.0

@babel/core 7.7.2

@babel/node 7.7.0

@babel/plugin-proposal-class-properties 7.7.0

@babel/plugin-proposal-throw-expressions 7.2.0

@babel/plugin-transform-regenerator 7.7.0

@babel/plugin-transform-runtime 7.6.2

@babel/preset-env 7.7.1

@babel/preset-react 7.7.0

@packtracker/webpack-plugin 2.2.0

@svgr/webpack 4.3.3

@testing-library/react 9.3.2

babel-eslint 10.0.3

babel-jest 24.9.0

babel-loader 8.0.6

babel-plugin-inline-react-svg 1.1.0

babel-plugin-module-resolver 3.2.0

browser-sync 2.26.7

browser-sync-reuse-tab 1.0.3

child_process 1.0.2

copyfiles 2.1.1

cross-env 6.0.3

cz-conventional-changelog 3.0.2

dotenv 8.2.0

enzyme 3.10.0

enzyme-adapter-react-16 1.15.1

enzyme-to-json 3.4.3

eslint 6.6.0

eslint-config-airbnb 18.0.1

eslint-import-resolver-webpack 0.11.1

eslint-plugin-import 2.18.2

eslint-plugin-jsx-a11y 6.2.3

eslint-plugin-react 7.16.0

eslint-plugin-react-hooks 2.3.0

jest 24.9.0

jest-enzyme 7.1.2

jest-junit 9.0.0

mock-socket 9.0.2

nodemon 1.19.4

prop-types 15.7.2

rimraf 3.0.0

supertest 4.0.2

sys 0.0.1

webpack 4.41.2

webpack-cli 3.3.10

webpack-visualizer-plugin 0.1.11

Check this box to trigger a request for Renovate to run again on this repository

proustibat / connected-molkky Goto Github PK