GUIPSS

👉 Browsing Articles Tagged : typescript - Go back to the home page

Docker: get the content of a container and upload it to an s3 bucket with nodejs

Posted on: 2020-04-01

Categories: typescript - docker - nodejs

We can use aws-sdk and Dockerode and play with streams to upload to take the result of the Docker "GET archive" docker endpoint and upload it to an s3 bucket. Here is an example with typescript:

import AWS from 'aws-sdk';
import Docker from 'dockerode';

const s3 = new AWS.S3();
const docker  = new Docker();

async function uploadToS3 () {
  const container  = this.docker.getContainer('my-container');
  // here the response we get is a readable stream...
  const dockerResponse = await container.getArchive({ path: `/path/to/the/directory/to/save` });

  await new Promise((resolve, reject) => {

    this.s3.upload({
      Bucket: 'my-bucket', 
      Key: `archive.tar`, 
      // and we can give that stream directly to the AWS SDK:
      Body: dockerResponse,
    }, err => {
      if (err) { reject(err); }
    });
  
    // once the response has been entirely read, we can resolve the promise:
    dockerResponse.on('close', resolve);

    dockerResponse.on('error', e => {
      console.error(e);
      reject(e);
    });

  });
}

React Create App: How to load the generated javascript without using the provided index.html file

Posted on: 2020-03-26

Categories: typescript - react - CRA

Create-React-App (CRA) generates javascript and css files with names that contains a hash that varies everytime we build them. That is fine when you use the provided index.html file but sometime your use case does not allows that. Here is two (not perfect, but good enough) ways to load those files in another html file than the one provided by default.

The first would be to load the css and javascript files in your page directly from the assets-manifest.json file that is genereted by CRA, for example here with jQuery (in ES5) (but that could be done without it also) :

<div id="root"></div>

<script type="text/javascript">
    var BASE_URL = '/';

    function loadCss (cssFiles) {
        cssFiles.forEach(function (css) {
            $('<link>')
                .appendTo('body')
                .attr({
                    type: 'text/css',
                    rel: 'stylesheet',
                    href: css,
                });
        });
    }

    function loadNextScript (scripts) {
        if (!scripts.length) { return; }

        var script = scripts.shift();
        $.ajax(script, {
            dataType: 'script',
            success: function () { loadNextScript(scripts) },
        })
    }

    $.ajax(BASE_URL + 'asset-manifest.json', {
        dataType: "json",
        success : function (data, textStatus, jqXHR) {

            if (data && data.entrypoints && data.entrypoints.length > 0) {
                var scripts =
                    data.entrypoints
                        .filter(function (resource) {
                            return resource.match(/.+\.js$/)
                        })
                        .map(function (script) {
                            return BASE_URL + script;
                        });
                var cssFiles =
                    data.entrypoints
                        .filter(function (ressource) {
                            return ressource.match(/.+\.css$/)
                        })
                        .map(function (file) {
                            return BASE_URL + file;
                        });

                loadCss(cssFiles);
                loadNextScript(scripts);
            }
        },
        error: function () {
            console.log('unable to load react app, manifest file not accessible or corrupted');
        }
    })

</script>

I guess you could also use the asset-manifest.json file to generate the bundle during the build process and end up with just one javascript file. You can also not use the manifest file and bundle the files beforehand by putting some scripts in your package.json file, for example you can loop on the generated files and concatenate then into a bundle file:

{
  "bundle-js": "cd build/static/js/ ; for each in runtime*.js; do cat $each; echo \"\\n\"; done > ../bundle.js ; for each in *.chunk.js; do cat $each; echo \"\\n\"; done >> ../bundle.js",
  "bundle-css": "cd build/static/css/ ; for each in *.css; do cat $each; echo \"\\n\"; done > ../bundle.css",
}

Mobx, React, Typescript: Optimizing to re-render a lot of data

Posted on: 2020-03-18

Categories: typescript - mobx - react

If you have to render a lot of data that changes often, using Mobx wisely could help you build a smooth and responsive ui. If you use mobx-react observer, you should try to tie the smallest component possible to the store and not the entire array.

If you have the following store, that represent a table of colors:

class DataStore {
  @observable dataMap: Map<string, string> = new Map();

  width = 50;
  height = 50;

  constructor () {
    let i = -1;

    while (i++ < this.width) {
      let j = -1;

      while (j++ < this.height) {
        this.dataMap.set(`${i}-${j}`, 'black');
      }
    }

  }

  updateRandomCell () {
    const x = Math.floor(Math.random() * this.width);
    const y = Math.floor(Math.random() * this.height);
    const key = `${x}-${y}`;

    this.dataMap.set(key, this.dataMap.get(key) === 'black' ? 'red' : 'black');
  }

}

To render this table efficiently, the best thing to do is, instead of doing one big component tht renders everything, to split the code so that every cell is its own component that connect directly to the store. That way, you don't have to do a full re-render everytime a cell data changes. Here is the example app and the two codes compared:

// Without Child Component (The Parent Component is Directly Connected to the Store):
const Square: React.FC<any> = observer(() => {
  return (
    <div>
      {
        Array.from({ length : store.width }).map((_, i) => {
          return (
            <div style={{ display: 'flex' }}>
              {
                Array.from({ length : store.height }).map((_, j) => {
                  return (
                    <div 
                      style={{
                        width: 3,
                        height: 3,
                        background: store.dataMap.get(`${i}-${j}`)
                      }}
                    >
                    </div>
                  )
                })
              }
            </div>
          )
        })
      }
    </div>
  )
})

// With Child Compponents Directly Connected to the Store:
const Cell: React.FC<any> = observer((props: any) => {
  return (
    <div 
      style={{
        width: 3,
        height: 3,
        background: store.dataMap.get(`${props.i}-${props.j}`)
      }}
      >
    </div>
  );
});
 
const SquareWithCells: React.FC<any> = observer(() => {
  return (
    <div>
      {
        Array.from({ length : store.width }).map((_, i) => {
          return (
            <div style={{ display: 'flex' }}>
              {
                Array.from({ length : store.height }).map((_, j) => {
                  return (
                    <Cell i={i} j={j}/>
                  )
                })
              }
            </div>
          )
        })
      }
    </div>
  )
})