DEV Community: Hussain Md. Safwan

Nginx configuration for beginners

Hussain Md. Safwan — Mon, 29 Mar 2021 06:30:59 +0000

Nginx (pronounced as Engine X) is a reverse proxy server. What is a reverse proxy you ask? Well, say you wanna make a GET request to an address called www.example.com but the twist is that there are several servers under that domain, serving identical or different versions of the website, say for different languages, and your PC (the client) doesn't know which server to make the request to. Here drops the concept of a reverse proxy. We can configure a proxy server in between the client (your PC) and the server (servers serving for www.example.com in this illustration) that can route the request to the appropriate server based on load balancing or other deterministic criteria.

Okay, what's up with Nginx?

Nginx reverse proxy is what you need when you intend to cram multitudes of different websites under on single server differentiated by nothing but a port number. One way of accessing the sites would be to manually mention the port number along with the domain, like www.domain.tld:3000 - which, obviously, isn't the most practical way of doing it. What we want here is to have a mechanism within the server that somehow maps the domain name to the specific port it should point to. That's exactly what you're here for right?

Install Nginx

Installing nginx is quite easy.

sudo apt-get install nginx

Check wether its installed successfully by checking the version,

nginx -v

Before configuring the actual server, we need to unlink the default file stored in /etc/nginx/sites-enabled from the file of same name stored in /etc/nginx/sites-available. We do that with,

cd /etc/nginx/sites-enabled && unlink default

Configure Nginx

Now we're all set to configure the actual server. To do that, we cd to /etc/nginx/conf.d and create a file with .conf extension. The file can basically assume any valid filenames.

cd
cd /etc/nginx/conf.d
nano site-config.conf

The nano interface should open now which lets you edit the .conf file you just created. Within the .conf, we can add as many server blocks as we want, where each block represents a process running on a specific port. Here I'll show the minimal configuration for two sites running on ports 3000 and 5000 respectively.


server {
        listen 80; // default port
        server_name domain1.tld, www.domain1.tld; //domain name

        location / {
                proxy_pass http://127.0.0.1:3000; // redirection port
        }
}

server {
        listen 80; // default port
        server_name domain2.tld, www.domain2.tld; // add your domain name here

        location / {
                proxy_pass http://127.0.0.1:5000; // add your <IP address:port> here
        }
}

Test and Deploy

What actually is happening over here is that the server by default listens to the port 80, unless one is mentioned explicitly (like www.domain1.tld:3000), which we are enforcing a change on by assigning the proxy_pass parameter to the server IP address with a port.

Every server usually comes with an Apache engine pre-installed which needs to be disabled to allow nginx to take on the role. We specifically need to make room for nginx on ports 80 and 443.

sudo fuser -k 80/tcp
sudo fuser -k 443/tcp

Next, we need to screen for any syntax error in the .conf file,

nginx -t

Should any syntax errors occur, the test returns a fail and an OK if everything is fine.

Finally, we need to restart nginx to apply the changes made.

sudo systemctl reload nginx

and see if its running by,

systemctl status nginx

if that shows a green active flag, then you're ready to check that out. To see that in action, simply pull out a browser window and type in the domain name.

Detecting click outside the scope in react

Hussain Md. Safwan — Sat, 07 Nov 2020 05:21:09 +0000

Detecting click outside a certain context is often needed to perform operations such as dismissing any floating components such as modals and dropdown drawers. In react, such flexibility can easily be achieved with a simple user-defined hook.

In this tutorial, there's a button that, when pressed, triggers a modal and we intend to dismiss the modal when a click occurs outside the scope.

The trick here is to define a custom hook, that takes in three parameters,

A ref that refers to the element to be acted upon, the modal in this case.
A callback function that illustrates the action to be carried out.
The state variable to be toggled.

While inside the hook, we wait for a click event to occur and when it does, it is to be checked if the click zone is contained within the scope of the given ref, if not, the callback function is called.
The skeleton might be like this,

const customHook = (ref, callback, state) => {
  document.listenFor('click', e => {
    if ( !ref.contains(e.target) && state ) {
      callback()
    }
  }
}

A working piece might however look like,

  const [open, setOpen] = useState(false)
  const modalRef = createRef(null)

  const useOutsideClick = (ref, callback, when) => {
    const savedCallback = useRef(callback)
    useEffect(() => {
      savedCallback.current = callback
    })
    const handler = e => {
      if (ref.current && !ref.current.contains(e.target)) {
        setOpen(false)
        savedCallback.current()
      }
    }
    useEffect(() => {
      if (when) {
          document.addEventListener('click', handler)
          return () => {document.removeEventListener('click', handler)}
      }
    }, [when])
  }

  useOutsideClick(modalRef, () => {setOpen(false)}, open)

Here's a link to the sandbox.

Handling nested inputs in React

Hussain Md. Safwan — Fri, 06 Nov 2020 05:05:35 +0000

It's common for a form to have nested input fields. For example, think of a form that is intended to be filled by company officials with the following constraints,

The companies may have multiple branches
Each branch has multiple contact numbers Obviously there are two levels of nesting involved. For simplicity, let the json-ified structure of the company look like this,

{
      name: "",
      branches: [
        {
          location: "",
          contacts: [""]
        }
      ]
    }

To begin with, the initial state of the component will essentially be the above json object. Next, the add input field functionalities need to be implemented, it's achieved merely by modifying the state object,

  const addBranch = (e) => {
    let temp = {...state};
    temp.branches.push(
      {
        location: "",
        contacts: [""]
      }
    );
    setState(temp);
  };

  const addContact = (e, i) => {
    let temp = {...state};
    temp.branches[i].contacts.push('');
    setState(temp);
  };

The delete field functionality works much like that of adding, except instead of pushing into state, we delete the elements with the arrary.prototype.splice() function, here's how,

  const deleteBranch = (e, i) => {
    let temp = {...state}
    temp.branches.splice(i, 1)
    setState(temp)
  }

  const deleteContact= (e, i, j) => {
    let temp = {...state}
    temp.branches[i].contacts.splice(j, 1)
    setState(temp)
  }

Next, to close the JS chapter, let's define the functions to handle changes in the fields. Here are those with a submit function that for now console-logs the state object,

  const handleNameChange = e => {
    let temp = {...state}
    temp[e.target.name] = e.target.value
    setState(temp)
  } 

  const handleBranchChange = (e, i) => {
    let temp = {...state}
    temp.branches[i][e.target.name] = e.target.value
    setState(temp)
  } 

  const handleContactChange = (e, i, j) => {
    let temp = {...state}
    temp.branches[i].contacts[j] = e.target.value
    setState(temp)
  } 

  const submit = e => {
    console.log(state)
  }

Finally, let's talk about the JSX structure. There'll be three groups of input field (TextField, since I'm using Material-UI here). These are, name field, branch location field and the fields for individual contacts details. The basic construct will be much like,

<div style={{ padding: '50px', width: '60%', margin: 'auto'}}>
      <h2 style={{textAlign: 'center', padding: '30px 0'}}>Company Details</h2>
      <TextField variant='outlined' name='name' style={styles1} placeholder='Name of the company'
        onChange={handleNameChange} value={state.name}
      />
      {
        state.branches.map((branch, i) => (
          <div style={{padding: '25px'}}>
            <span style={{fontSize: '18px'}}>Branch {i+1}: </span>
            <TextField variant='outlined' name='location' placeholder='Location of branch'
              style={styles2} onChange={e => handleBranchChange(e, i)} value={state.branches[i].location}
            />
            <Button variant='contained' color='secondary' style={{marginLeft: '10px'}}
              onClick={e => deleteBranch(e, i)}
            ><Delete style={{ fontSize: 20}}/></Button>
            {
              branch.contacts.map((contact, j) => (
                <div style={{padding: '10px'}}>
                  <span style={{fontSize: '18px'}}>Contact {j+1}: </span>
                  <TextField variant='outlined' name='contact' placeholder='Contact'
                    style={styles3} onChange={e => handleContactChange(e, i, j)} 
                    value={state.branches[i].contacts[j]}
                  /> 
                  <Button variant='contained' color='secondary' style={{marginLeft: '10px'}} 
                    onClick={e => deleteContact(e, i, j)}
                  ><Delete style={{ fontSize: 20}}/></Button>
                </div>

              ))
            }
            <Button variant='contained' color='primary' onClick={e => addContact(e, i)}>Add Contact</Button>
          </div>
        ))
      }
      <Button variant='contained' color='primary' onClick={addBranch}>Add Branch</Button> <br/><br/>
      <Button variant='contained' size='large' color='secondary' onClick={submit}>Submit</Button>
    </div>

Note that I've excluded CSS to the entirety except for the inline styles. Here's a link to the editable playground.