How to redirect ssl www to ssl non-www in nginx

I recently got my beta access with https://letsencrypt.org/ and wanted to make sure my SSL is enabled for all traffic to my blog, so I figured I can easily rewrite non ssl traffic using www or non-www to send everyone to one consistent URL which is the non-www with SSL.

You can use this simple virtual.conf

server {  
    listen      80;
    server_name alicoding.com;
    rewrite     ^   https://$server_name$request_uri? permanent;
}


server {  
    listen 443 ssl;
    server_name alicoding.com;

    ssl_certificate        /etc/letsencrypt/live/alicoding.com/fullchain.pem;
    ssl_certificate_key    /etc/letsencrypt/live/alicoding.com/privkey.pem;
    if ($host = www.$server_name) {
      rewrite ^(.*) https://$server_name$request_uri? permanent;
    }
}

Let me explain what's going on here...

server {  
    listen      80;
    server_name alicoding.com;
    rewrite     ^   https://$server_name$request_uri? permanent;
}

This block basically listen to any non SSL traffic (http) and redirect to https:// and try to preserve the request_uri at the end.

For the second part you can ignore everything and just look at the magic here:

  if ($host = www.$server_name) {
    rewrite ^(.*) https://$server_name$request_uri? permanent;
  }

What happen here is that we are checking for any requested URL with www and redirect them to non-www version with ssl version enabled.

If you have any question hit me on twitter @alicoding :)

ES6: Default Parameters function

Often when we define a function we either have to supply a default or check if the value is passed and if not will either report back or throw. In ES6 you could supply a default parameters inside the function in case you want to use a default or to catch bug.

This is how you used to do it in < ES6

function example(first, second, third) {  
   first = first || 'default value 1';
   second = second || { test: 'value' };
   third = third || 10;
   console.log(first, second.test, third);
}

example();  
// will log: default value 1 value 10
example('hello', {test: 'string'});  
// will log: hello string 10

In ES6 you can do:

function example(first='default value 1', second={test: 'value'}, thrid=10) {  
   console.log(first, second.test, third);
}

example();  
// will log: default value 1 value 10
example('hello', {test: 'string'});  
// will log: hello string 10

Check out MDN for Default parameters for more information here.

If you have any question or you think this post can be optimized in anyway please feel free to tweet me @alicoding

Language code URL in React-Intl

Recently we've changed our URL structure for one of the Mozilla's projects to make it readable and the most make sense for both developers and users.

What it used to be:

http://localhost:3000/page-name-en-us

What we want the end result to be:

http://localhost:3000/en-US/page-name

Our approach in solving this since we are using React, Webpack and React-Router for handling our routes we can simply add some codes to handle the routes in our entry file in my case we call this client.jsx which is defined in webpack.config.js

client.jsx

import React from 'react';  
import Router from 'react-router';  
import routes from './routes.jsx';  
import i18n from '../locales/i18n.js';  
import assign from 'react/lib/Object.assign';


Router.run(routes, Router.HistoryLocation, function (Handler, state) {  
  var lang = i18n.isSupportedLanguage(i18n.currentLanguage) ? i18n.currentLanguage : i18n.defaultLang;
  var queryString = state.query;

  // checking if language code is part of the URL e.g. /en-US/thank-you
  if(i18n.urlOverrideLang(queryString).test) {
    // but is the language code supported in our app?
    if(i18n.isSupportedLanguage(i18n.urlOverrideLang().lang)) {
      var messages = i18n.intlDataFor(i18n.urlOverrideLang().lang);
      values = assign(values, messages);
    } else {
      pathname = pathname.split('/')[2] ? pathname.split('/')[2] : '';
      return this.replaceWith(pathname, {}, queryString);
    }
    // if not we will hijack the URL and insert the language code in the URL
  } else if(!i18n.urlOverrideLang(queryString).test) {
    return this.replaceWith("/" + lang + pathname, {}, queryString);
  }
  React.render(<Handler {...values} />, document.querySelector("#my-app"));
});

I have created a little helper functions to do a lot of the work above and they are very useful client side functions:

i18n.js

import assign from 'react/lib/Object.assign';  
var locales = ['en-US', 'de', 'fr'];

// This is essentially bulk require for our translation files which is in JSON format
var req = require.context('./', true, /\.json.*$/);  
var dictionaries = getAllMessages(req);

function getAllMessages(req) {  
  var messages = {};
  req.keys().forEach(function (file) {
    var locale = file.replace('./', '').replace('.json', '');
    messages[locale] = req(file);
  });
  return messages;
}

// we need to make sure we transform the given locale to the right format first
// so we can access the right locale in our dictionaries for example: pt-br should be transformed to pt-BR
function formatLocale(lang) {  
  lang = lang.split('-');
  return lang[1] ? `${lang[0]}-${lang[1].toUpperCase()}` : lang[0];
}

function getMessages(locale) {  
  var messages = dictionaries[locale] ? dictionaries[locale] : dictionaries['en-US'];
  return assign({}, dictionaries['en-US'], messages);
}


var locale = formatLocale(navigator.language);  
module.exports = {  
  intlData: {
    locales : ['en-US'],
    // Sometimes we will include a language with partial translation
    // and we need to make sure the object that we pass to `intlData`
    // contains all keys based on the `en-US` messages.
    messages: getMessages(locale)
  },
  defaultLang: 'en-US',
  currentLanguage: locale,
  isSupportedLanguage: function(lang) {
    return !!dictionaries[lang];
  },
  // This method will check if we have language code in the URL
  // by extracting the pathname from `window.location` and split
  // them to find language code. The expected language code is in the
  // first parameter e.g. /en-US/thank-you. If we don't find the language code
  // we will assume that the URL does not contain language code and return false for `test`
  urlOverrideLang: function(path) {
    var localPath = path || location.pathname;
    var localeCode = localPath.split('/')[1];
    var pathname = localPath.split('/')[2];
    return {
      test: locales.indexOf(localeCode) !== -1,
      pathname: pathname,
      lang: locales.indexOf(localeCode) !== -1 ? localeCode : null
    };
  },
  intlDataFor: function(lang) {
    var locale = formatLocale(lang);
    return {locales: [locale], messages: getMessages(locale)};
  }
};

Now in our app we can define routes like this

import { Route } from 'react-router';

module.exports = (  
  <Route>
    <Route name="home" path="/:locale/?" handler={yourHandler}/>
    <Route name="home" path="/:locale/page-name/?" handler={yourHandler2}/>
  </Route>
);

And that's it folks! Now you have language code in the URL! If you are confused or have any question please feel free to tweet @alicoding :)

JSConf Training Track - Testing IE on Linux or Mac

I know this is probably a bit old now, but I have to share this post anyway since it sits on my draft box for a while now and I think it is a good post and good for my own record if I want to look back at something :)

One of the track at JSConf 2015 is how to test IE on Linux or Mac by Rey Bango which I find it very useful especially when Microsoft starting to get more attention and they are doing really well in term of supporting the open-web. Many people might still disagree on this point, but Rey also made a good point at his session about the more we use and support different browser in our app the better it will be for us consumer and developers.

NOTE: To be exact on what Rey said there... Rey actually said that so not only one engine dominant the web, but the above is my interpretation :P

There are different ways to test IE on Mac or Linux. Most of the stuff you can look from http://dev.modern.ie/ or http://uservoice.modern.ie

There is also IE Compatibility Cookbook

http://bit.ly/iedevguides
http://bit.ly/f12devtools

Well, another question you might ask before going any further here. Why should I test my web application on IE? Simple answer... 55% of the users online still use IE! https://statcounter.com/

Also, why big corporation don't upgrade from IE6,7,8 to IE 11 or edge? Obvious it's a large investment for them to upgrade and they have made their application very specific to that specific browser's version, and I'm sure you don't want your bank to upgrade their software without good testing, right?

So, let's continue how do I test Internet Explorer and Microsoft Edge on Linux or Mac?

In the session Rey introduce us to Microsoft Remote Desktop (Mac download link) and using ngrok to tunnel your application from localhost.

That's pretty much it! You just need Microsoft Remote Desktop and ngrok your application, get the url run it with the Remote desktop client and you just got yourself IE on your Mac or Linux to test your app!

If you have any trouble just hit me on twitter @alicoding and I'm happy to help :)

Localizing React app using React-Router with React-Intl

In the past, when we do our localization work we'll usually write our own library to do localization, and one of the example is node-webmaker-i18n.

Recently, I had to localize our React application for Webmaker and this time our team thought we might change our approach and let's not write our own, but use something that's already out there, so I did a research about different libraries for internationalization for React application and ended up using React-Intl by Yahoo.

Obviously, there are some good reason why we didn't write our own this time and why we ended up using React-Intl instead of other options. One of the reasons we didn't write our own this time simply because we don't want to reinvent the wheel and helping the community by contributing to the existing library is also a good idea. I find that React-Intl got a lot in common in term of their needs in the library that they've wrote, and they are very responsive and helpful when we had problem using their library.

Now, let's get started on how to integrate React-Intl with React app that's using React-Router for handling routes.

NOTE: We're using Webpack.js to handle our modules bundling.

entry.js

import React from 'react';  
import Router from 'react-router';  
import routes from './routes.jsx';  
import messages from './messages';

var locale = navigator.language.split('-')  
locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : navigator.language

var strings = messages[locale] ? messages[locale] : messages['en-US']  
strings = Object.assign(messages['en-US'], strings);

var intlData = {  
    locales : ['en-US'],
    messages: strings
};

Router.run(routes, Router.HistoryLocation, function (Handler, state) {  
  React.render(<Handler {...intlData} />, document.querySelector("#my-app"));
});

routes.jsx

import React from 'react';  
import { Route } from 'react-router';


var routes = (  
  <Route>
    <Route name="home" path="/" handler={require('./home.jsx')} />
  </Route>
);

module.exports = routes;  

messages.js

// This is essentially bulk require
var req = require.context('../locales', true, /\.json.*$/);  
var exports = {};

req.keys().forEach(function (file) {  
  var locale = file.replace('./', '').replace('.json', '');
  exports[locale] = req(file);
});

module.exports = exports;

Just to explain a bit what's going on here in each file.

  1. messages.js is basically just to pre-load all the locale files, so that you don't have compile time error with webpack.

  2. routes.jsx this file is pretty straightforward since it's just the normal way of declaring your routes in react-router.

  3. entry.jsx this is where it gets a bit complicated. First thing first let's talk about this line

var locale = navigator.language.split('-')  
locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : navigator.language  

This basically just extracting the language code from the browser using navigator.language then we rewrite the string to match what we have in our dictionary that was stored in messages.js file. The reason I have to do toUpperCase() here because Safari will return en-us where as Firefox and Chrome will return en-US.

var strings = messages[locale] ? messages[locale] : messages['en-US'];  

This one is pretty simple since we are just trying to retrieve the strings from our dictionary and if we can't find that locale then just fallback to en-US.

strings = Object.assign(messages['en-US'], strings);  

Sometimes we will include a language with partial translation
and we need to make sure the object that we pass to intlData
contains all keys based on the en-US messages otherwise React-intl will throw.

Now, let's look at home.jsx where we will use React-Intl to dynamically change the string based on our language.

home.jsx

import React from 'react';

export class render extends React.Component {  
  mixins: [require('react-intl').IntlMixin],
  render() {
    return (
      <div>
        <h1>{this.getIntlMessage('hello_world')}</h1>
      </div>
    );
  }
}

en-US.json

{
  'hello_world': 'Hello World'
}

th-TH.json

{
  'hello_world': 'สวัสดีชาวโลก'
}

So, I think that's it! We are now fully localized our React app using React-Intl :)
If you find any problem in my code or have any question don't forget to leave a comment down below or tweet me @alicoding and I'm happy to answer :)

Simple React Webpack and Babel Starter Kit

At Mozilla Foundation, we're starting to use React mainly to create our Web application and most of the time writing React without Webpack and Babel can be a bit annoying or really hard I can say.

Finding an example to create React app with Webpack and Babel sometimes you get tons of stuff that you don't want or don't care and having to remove stuff yourself you'll either create bugs or finding yourself spending more time fixing things that you broke than starting to code, so I created this simple repo with just the simple stuff you need to get started.

https://github.com/alicoding/react-webpack-babel

React Webpack and Babel
Simple React Webpack Babel Starter Kit

This is a simple React, Webpack and Babel application with nothing else in it.

What's in it?

Just a simple index.jsx, webpack.config.js and index.html file.

To run

You can simply run webpack build using this command:

> $ npm run build

If you want to run with webpack-dev-server simply run this command:

> $ npm run dev

Please contribute to the project if you think this can be done better in anyway even for the README :)