ngnix redirect non www to www

if you want to redirect non www to www domain you need to add one more serverblock at the top of your nginx config file as beloww

server {  
        listen 80;
        server_name techtrekking.net;
        # $scheme will get the http protocol
        return 301 $scheme://www.techtrekking.net$request_uri;
}

This works for normal website as well as ghost blog.
For example if you type techtrekking.net or www.techtrekking.net it will get redirected to www.techtrekking.net.

Sample server block. THis serves following purpose

  • redirect non www to www
  • add blog in subfolder /blog
server {  
        listen 80;
        server_name yoursite.com;
        # $scheme will get the http protocol
        return 301 $scheme://www.yoursite.com$request_uri;
}

server {  
        listen 80;
        listen [::]:80;

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name techtrekking.com www.techtrekking.com;

        location / {
                proxy_pass http://yoursite:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /blog {
                proxy_pass http://yoursite:3100;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;

        }


        location ~ /.well-known {
                allow all;
        }

}

Apache redirect non www to www using .htaccess

Its ok to allow users to access your website using www and non www address but for consistency and SEO considerations its desiratble to use one version. If you are using apache web server this can be achived by using htaccess file.

Non Www To Www

301 re-write rule in your .htaccess file so that both addresses (http://example.com and http://www.example.com) resolve to the same URL.

If you want to redirect http://www.example.com to http://example.com, you can use this:

RewriteCond %{HTTP_HOST} ^www.example.com$  
RewriteRule ^/?$ "http://example.com/" [R=301,L]  

If you want to redirect http://example.com to http://www.example.com, you can use this:

RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]  
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]  

Http To Https

RewriteEngine On  
 RewriteCond %{HTTPS} !=on
 RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

Please note this can be used when you are using apache webserver and this is not recommended if you are using nginx. IF you wan to try it using nginx please see post
how to redirect non www to www for nginx

Webpack for react sub apps

Webpack is used to pre-compile your react component into ES5 so that it can be recognised by browsers. But what if you are webapp is hybrid and react is taking over only small portion of your webapp.

Lets suppose you have two react components, lets call them app1 and app2. Both will take over different div tag on two different pages on your website.

In this case, you can use following webpack code to precompile both of them.

var webpack = require('webpack')  
var path = require('path')

module.exports = {  
    entry:{
        app1: './src/app1.js',
        app2:  './src/app2.js'
    },
    output:{
        path: path.join(__dirname, "public/build"),
        filename: '[name].js'

    },
    devtool: '#source-map',
    module:{    
        loaders: [
            { 
                test: /.jsx?$/,
                exclude:/(node_modules)/,
                loader: 'babel-loader',
                query:{
                    presets:['react','es2015']
                }
            }
        ]

    }
}

This will create app1.js app1.js.map for app1 and app2.js app2.js.map for app2 at the destination folder.

This is working fine for me, please let me know if you run into any issues while using this.

Making server request in React Components using Axios

Axios is Promise based HTTP client for the browser and node.js. This library can be used in react component to fetch data from RESTful APIs.

Installation
$ npm install axios --save
Example
import React, { Component } from 'react'  
var axios = require('axios');  
...
        axios.get('/api/family')
            .then(response => {
            console.log(response);
            console.log(response.data);
            this.setState({
              family: response.data
            });

            console.log("family :" + this.state.family);

            })
          .catch(function (error) {
            console.log(error);
          })
...
Use of arrow function

Arrow function does not attach ‘this’ to current object and hense old this is preserved. This is needed to update state and get it reflected on rendered object.

Sample project

Please refer to this Github repo for complete code
https://github.com/conquistadorjd/react-05-mysql-api

Live project.

Please refer to following heroku site for live demo
https://react-05-mysql-api.herokuapp.com/