Moon Light Box

Time is Money

React native - Unable to load script from assets 'index.android.bundle'.

| Comments

Step 1. Change React Native Web Server Port

AwesomeProject > react-native start --port 8082

...
...
 Running packager on port 8082.
 
 Keep this packager running while developing on any JS projects. Feel
 free to close this tab and run your own packager instance if you
 prefer.
...
...

Step 2. Reverse adb port

AwesomeProject > react-native run-android
AwesomeProject > adb kill-server
AwesomeProject > adb reverse tcp:8081 tcp:8082
AwesomeProject > adb reverse --list

...
...
(reverse) tcp:8081 tcp:8082
...
...

Step3. Enable Hot Reloading in App.

React - emojione.unicodeToImage() doesn't work with react.js browser rendering

| Comments

I installed emojione 3.1.2 via npm and it worked well on webpack development environment.

But when I build project with webpack in production environment, emojione got something wrong.

I google and find this url which occurred the same problem.
https://github.com/emojione/emojione/issues/541

Step1. Download Emojione CDN files in your project.

https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js
https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css

Step2. Modified below code in emojione.min.js

from
ns.regUnicode = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(?:\uD83C\uDFF3)\uFE0F?\u200D?(?:\uD83C\uDF08)|(?:\uD83D\uDC41)\uFE0F?\u200D?(?:\uD83D\uDDE8)\uFE0F?|[#-9]\uFE0F?\u20E3|(?:(?:\uD83C\uDFF4)(?:\uDB40[\uDC60-\uDCFF]){1,6})|(?:\uD83C[\uDDE0-\uDDFF]){2}|(?:(?:\uD83D[\uDC68\uDC69]))\uFE0F?(?:\uD83C[\uDFFA-\uDFFF])?\u200D?(?:[\u2695\u2696\u2708]|\uD83C[\uDF3E-\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83D[\uDC68\uDC69]|\uD83E[\uDDD0-\uDDDF])(?:\uD83C[\uDFFA-\uDFFF])?\u200D?[\u2640\u2642\u2695\u2696\u2708]?\uFE0F?|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])[\u200D\uFE0F]{0,2}){1,3}(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])\uFE0F?){2,4}|(?:\uD83D[\uDC68\uDC69\uDC6E\uDC71-\uDC87\uDD75\uDE45-\uDE4E]|\uD83E[\uDD26\uDD37]|\uD83C[\uDFC3-\uDFCC]|\uD83E[\uDD38-\uDD3E]|\uD83D[\uDEA3-\uDEB6]|\u26f9|\uD83D\uDC6F)\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])?\u200D?[\u2640\u2642]?\uFE0F?|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85-\uDFCC]|\uD83D[\uDC42-\uDCAA\uDD74-\uDD96\uDE45-\uDE4F\uDEA3-\uDECC]|\uD83E[\uDD18-\uDD3E])\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2194-\u2199\u21a9-\u21aa]\uFE0F?|[\u0023\u002a]|[\u3030\u303d]\uFE0F?|(?:\ud83c[\udd70-\udd71]|\ud83c\udd8e|\ud83c[\udd91-\udd9a])\uFE0F?|\u24c2\uFE0F?|[\u3297\u3299]\uFE0F?|(?:\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51])\uFE0F?|[\u203c\u2049]\uFE0F?|[\u25aa-\u25ab\u25b6\u25c0\u25fb-\u25fe]\uFE0F?|[\u00a9\u00ae]\uFE0F?|[\u2122\u2139]\uFE0F?|\ud83c\udc04\uFE0F?|[\u2b05-\u2b07\u2b1b-\u2b1c\u2b50\u2b55]\uFE0F?|[\u231a-\u231b\u2328\u23cf\u23e9-\u23f3\u23f8-\u23fa]\uFE0F?|\ud83c\udccf|[\u2934\u2935]\uFE0F?)|[\u2700-\u27bf]\uFE0F?|[\ud800-\udbff][\udc00-\udfff]\uFE0F?|[\u2600-\u26FF]\uFE0F?|[\u0030-\u0039]\uFE0F", "g");

to
ns.regUnicode = /<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(?:\uD83C\uDFF3)\uFE0F?\u200D?(?:\uD83C\uDF08)|(?:\uD83D\uDC41)\uFE0F?\u200D?(?:\uD83D\uDDE8)\uFE0F?|[#-9]\uFE0F?\u20E3|(?:(?:\uD83C\uDFF4)(?:\uDB40[\uDC60-\uDCFF]){1,6})|(?:\uD83C[\uDDE0-\uDDFF]){2}|(?:(?:\uD83D[\uDC68\uDC69]))\uFE0F?(?:\uD83C[\uDFFA-\uDFFF])?\u200D?(?:[\u2695\u2696\u2708]|\uD83C[\uDF3E-\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83D[\uDC68\uDC69]|\uD83E[\uDDD0-\uDDDF])(?:\uD83C[\uDFFA-\uDFFF])?\u200D?[\u2640\u2642\u2695\u2696\u2708]?\uFE0F?|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])[\u200D\uFE0F]{0,2}){1,3}(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])\uFE0F?){2,4}|(?:\uD83D[\uDC68\uDC69\uDC6E\uDC71-\uDC87\uDD75\uDE45-\uDE4E]|\uD83E[\uDD26\uDD37]|\uD83C[\uDFC3-\uDFCC]|\uD83E[\uDD38-\uDD3E]|\uD83D[\uDEA3-\uDEB6]|\u26f9|\uD83D\uDC6F)\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])?\u200D?[\u2640\u2642]?\uFE0F?|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85-\uDFCC]|\uD83D[\uDC42-\uDCAA\uDD74-\uDD96\uDE45-\uDE4F\uDEA3-\uDECC]|\uD83E[\uDD18-\uDD3E])\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2194-\u2199\u21a9-\u21aa]\uFE0F?|[\u0023\u002a]|[\u3030\u303d]\uFE0F?|(?:\ud83c[\udd70-\udd71]|\ud83c\udd8e|\ud83c[\udd91-\udd9a])\uFE0F?|\u24c2\uFE0F?|[\u3297\u3299]\uFE0F?|(?:\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51])\uFE0F?|[\u203c\u2049]\uFE0F?|[\u25aa-\u25ab\u25b6\u25c0\u25fb-\u25fe]\uFE0F?|[\u00a9\u00ae]\uFE0F?|[\u2122\u2139]\uFE0F?|\ud83c\udc04\uFE0F?|[\u2b05-\u2b07\u2b1b-\u2b1c\u2b50\u2b55]\uFE0F?|[\u231a-\u231b\u2328\u23cf\u23e9-\u23f3\u23f8-\u23fa]\uFE0F?|\ud83c\udccf|[\u2934\u2935]\uFE0F?)|[\u2700-\u27bf]\uFE0F?|[\ud800-\udbff][\udc00-\udfff]\uFE0F?|[\u2600-\u26FF]\uFE0F?|[\u0030-\u0039]\uFE0F/g

Step3. Exclude "emojione.min.js" and "emojione.min.css" from webpack build process.

webpack.prod.config.js

...
...
...
module: {
        rules: [
        ...
        ...
        ...
            {
                test: /\.(jsx|js)?$/,
                include: [path.resolve('src')],
                exclude: [
                    path.resolve('node_modules'),
                    path.resolve('src/main/js/EmojiOne') <---- Add this line.
                ],
                use: 'babel-loader'
            },
         ...
         ...
         ...
        ]
},
...
...
...

Koa2 - How to Use It?

| Comments

1. New Add Server.js and index.html(You can put it on folder "dist")

const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const logger = require('koa-logger');
const serve = require('koa-static');
const compress = require('koa-compress');
const Router = require('koa-router');

const app = new Koa();

// https://github.com/koajs/static
const SERVE_OPTIONS = {
    maxage: 30 * 24 * 60 * 60 * 1000
};

const distFolder = path.resolve(__dirname, 'dist');

const root = new Router();
root.get('*', async (ctx) => {
    ctx.type = 'html';
    ctx.body = fs.createReadStream(`${distFolder}/index.html`);
});

const router = new Router();
router.use('/', root.routes(), root.allowedMethods());

app.use(logger());
app.use(compress());
app.use(serve(buildFolder, SERVE_OPTIONS));
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(80);

2. Execute it :)

# node Server.js

3. Browse http://127.0.0.1

Webpack3 - Set Production Building Configuration

| Comments

https://medium.com/netscape/webpack-3-react-production-build-tips-d20507dba99a

http://www.zcfy.cc/article/two-quick-ways-to-reduce-react-app-s-size-in-production-1930.html

https://webpack.js.org/plugins/

https://medium.com/rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a@

https://juejin.im/entry/57cd199467f3560057c99607

https://rhadow.github.io/2015/05/30/webpack-loaders-and-plugins/

http://foio.github.io/wepack-code-spliting/

https://loveky.github.io/2017/03/29/webpack-module-ids/

MariaDB - Re-Start Cluster Failed

| Comments

[ERROR] WSREP: It may not be safe to bootstrap the cluster from this node. It was not the last one to leave the cluster and may not contain all the updates. To force cluster bootstrap with this node, edit the grastate.dat file manually and set safe_to_bootstrap to 1 .
// see https://severalnines.com/blog/how-bootstrap-mysqlmariadb-galera-cluster
--wsrep-recover

# vim /YOUR_MYSQL_DB_PATH/grastate.dat

# GALERA saved state
version: 2.1
uuid:    e02c98a9-e147-11e6-b6e9-e2d770b0c2ba
seqno:   -1
safe_to_bootstrap: 0 -> 1
# docker exec -it mariadb bash

SHOW STATUS LIKE 'wsrep_%';

mysql -u root -p

...
wsrep_incoming_addresses     | 10.10.10.10:3306,10.10.10.11:3306,10.10.10.12:3306
...
wsrep_local_state_comment    | Synced
...

https://severalnines.com/blog/how-bootstrap-mysqlmariadb-galera-cluster
http://benjr.tw/95413
https://dba.stackexchange.com/questions/151941/how-to-restart-mariadb-galera-cluster
http://zjzone.cc/index.php/2017/04/18/mariadb-galera-ji-qun-zi-dong-hui-fu-jiao-ben/