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
  • Create a new route
  • Create a sub route
  • Use the react router with the express server side rendering
  • Use MaterializeCSS javascript component in your React component

---

Prerequisites

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

Install

git clone git@github.com: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

• CircleCI
• SonarCloud
• PackTracker.io

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'.

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

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

2. 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.

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

   // ...
   import hello from './hello';
   
   export default {
       // ...,
       hello
   };
   

4. 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:

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

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

2. 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;
   

3. 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