The best way to set up LEMP stack for local development – 2021 edition

Ivan Bernatović — Sat, 06 Feb 2021 14:12:27 +0000

The original post was published on my dev blog and can be read here. Please consider visiting my blog.

Linux is THE platform for developing web applications. Developing apps on the platform which is running on a production environment is the best choice for learning how stuff works. This guide will show you how to install and configure software that’s commonly referred to as LEMP stack:

Nginx – HTTP server software
PHP 8 – more precisely PHP FPM
MariaDB – a fork of MySQL
Install Composer dependency manager
Configure your PHP and Nginx so you can host your projects in your home directory without the usual issues with file and folder permissions

The major requirement is to have Ubuntu 20.04 or higher installed or any other Ubuntu-based distribution which uses apt as the package manager. First, we’re going to install everything, then we will deal with configuration.

Installing Nginx – the E in LEMP

The first thing we’re going to install is HTTP server called Nginx. It is a popular server software with easy to use configuration syntax. We need to update our package repositories and then install Nginx. Open terminal and type the following:

sudo apt update
sudo apt install nginx

Check if Nginx is installed by typing nginx -v in terminal. You should see the version in the output. Also, when you type localhost in your web browser address bar you should see Welcome to nginx! message which confirms our Nginx server is working well.

There are a few important things to know about Nginx. The main configuration file is located /etc/nginx/nginx.conf. Another important part is setting up server blocks (virtual hosts in Apache world). All of the available server blocks are located in /etc/nginx/sites-available directory. To activate available server block configuration we need to create a symbolic link in /etc/nginx/sites-enabled. We will get to configuring server blocks in a minute.

Installing MariaDB – the M in LEMP

Now we need to install a database management system (DBMS). We choose MariaDB, which is modern relational DBMS and arguably better version of MySQL (of which it is a fork). Type following command in terminal:

sudo apt install mariadb-server mariadb-client

Check if MariaDB is installed by running mysql --version. Now, to configure the root user you should run mysql_secure_installation.

Installing PHP 8 – the P in LEMP

Next thing to install is PHP. Since we’re using a newer version of Ubuntu (20.04 or above) default version of PHP in package repositories is PHP 7.4. In this tutorial, we’re going to install PHP 8 instead because we want to be on the latest version. There are a few options but the easiest one is to install PHP from a well supported PPA such as ondrej/php. To add this PPA to your sources, run this:

sudo add-apt-repository ppa:ondrej/php
sudo apt update

Now you can install PHP 8 and a bunch of common extensions that you’ll most likely need.

sudo apt install php8.0 php8.0-fpm php8.0-zip php8.0-xml php8.0-mbstring php8.0-curl php8.0-gd php8.0-mysql

Now run php -v in the terminal and you should see a similar output:

PHP 8.0.1 (cli) (built: Jan 13 2021 08:23:31) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.1, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.1, Copyright (c), by Zend Technologies

Configuring PHP for development needs

To avoid various file permissions issues, I want to serve my sites from my home directory. I prefer /home/ivan/projects as my directory of all web projects. I want to avoid dealing with permissions issues.

We need to create a dedicated PHP FPM configuration file. First, let’s copy the default config file intended for www-data user.

sudo cp /etc/php/8.0/fpm/pool.d/www.conf /etc/php/8.0/fpm/pool.d/your_user.conf

We need to make a few changes so open the newly copied file by running sudo nano /etc/php/8.0/fpm/pool.d/your_user.conf. We need to make the following changes:

Change the [www] to [your_user] to change the pool name
Change the line user = www-data to user = your_user
Change the line group = www-data to group = your_user
Change the listen = /run/php/php8.0-fpm.sock to listen = /run/php/php8.0-your_user-fpm.sock

Now run sudo systemctl restart php8.0-fpm.service to load the new config and restart the main FPM process.

Now let’s install the most popular dependency manager for PHP – Composer. To install the latest version of Composer just run curl-sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer. That command will install Composer globally on your OS for all users. Run composer -v to verify the installation. You should also add your user to the www-data group by running sudo adduser your_user www-data.

Server block configuration example

Let’s say you started a new PHP project your project directory, so the path to the project could look like this /home/your_user/projects/my-awesome-app and you want to serve it from a custom domain such as http://my-awesome-app.test, you’ll need to create the following server block. Run sudo nano /etc/nginx/sites-available/my-awesome-app.conf and paste this:

server {
  listen 80;
  root /home/your_user/projects/my-awesome-app/public;
  index index.php index.html index.htm;
  server_name my-awesome-app.test;
  location / {
    try_files $uri $uri/ /index.php$is_args$args;
  }
  location ~ \.php$ {
    try_files $uri /index.php = 404;
    fastcgi_pass unix:/var/run/php/php8.0-your_user-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }
}

Don’t forget to replace your_user with the name of your user profile. Save it and close. Now you have to run sudo ln -s /etc/nginx/sites-available/my-awesome-app.conf /etc/nginx/sites-enabled and sudo systemctl reload nginx.service to enable the new configuration file and reload Nginx.

The final thing is to edit /etc/hosts file to let your operating system know you’re hosting my-awesome-app.test on your machine. Run sudo nano /etc/hosts and add the following line to the bottom of the file: 127.0.0.1 my-awesome-app.test.

Conclusion

Congratulations, you’ve made it to the end. You now have a great development environment for developing LEMP-based web applications. Good luck with developing awesome apps!

How to easily make reusable forms in Vue

Ivan Bernatović — Thu, 04 Feb 2021 20:30:28 +0000

The original post was published on my web dev blog and can be read here. The only difference between the original post and this one is that on my blog you also have a working Codesandbox environment.

Web applications contain a lot of forms nowadays. Many times, we have the same form layout when creating or editing something (it can be anything: user, project, todo item, product etc.). Usually, creating and editing a resource is implemented on 2 separate pages. To keep the code DRY and avoid code repetition we should try to reuse the same form component for both scenarios. Luckily, if you use Vue you can implement reusable form components easily. Let's get started then.

Let's create a reusable form component
We will create a simple form for creating or editing a user. For simplicity, we will only have 2 fields: email and name. Without further ado, here's how the reusable form will look like in the end.

<template>
  <form @submit.prevent="$emit('on-submit', form)">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" name="email" v-model="form.email" />
    </div>

    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" v-model="form.name" />
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
    },
  },
  data() {
    return {
      form: {
        email: this.user?.email || "",
        name: this.user?.name || "",
      },
    };
  },
};
</script>

UserForm component has an optional user prop and contains 2 inputs. Each input has a binding to a data entry - form.email and form.name. On form submission, we will emit the custom on-submit event with the form object as an event payload. The user prop is an object and if passed it will be used to get values for the email and name inputs. If the prop is not passed, inputs will default to empty strings.

How to use reusable forms

Let's create a root Vue App component that will be mounted in the app and also use the UserForm component. This component will import the UserForm and render it 2 times: first to show the create user scenario, and the second time to show the update user scenario.

<template>
  <div id="app">
    <h3>Create user form</h3>
    <UserForm @on-submit="createUser" />

    <h3>Edit User form</h3>
    <UserForm :user="user" @on-submit="updateUser" />
  </div>
</template>

<script>
import UserForm from "./components/UserForm";

export default {
  name: "App",
  components: { UserForm },
  data() {
    return {
      user: {
        email: "john@example.com",
        name: "John",
      },
    };
  },
  methods: {
    createUser(userForm) {
      console.log("creating", userForm);

      // call an API to create a new user
    },
    updateUser(userForm) {
      console.log("updating", userForm);

      // call an API to update the existing user
    },
  },
};
</script>

The App component has a user object (containing email and name) as part of its data. We will use this user to showcase the update user scenario. App also has 2 methods which are handlers for the custom on-submit event for the create and update form. The handler has 1 parameter and that is the userForm object which contains email and name. The first time we use UserForm component we don't pass the user prop, only the handler for the on-submit event. This is the create mode of the form. In the second example, we pass the user object as a prop which means we will use the form component in edit (or update) mode. This time, the form will be pre-filled with the values for the email and name inputs.

Reusable forms improve maintainability and code reuse

The benefits of reusing the same component for forms are better code maintainability and code reuse. You simply have to write less code when implementing or refactoring forms. In bigger forms, it will probably slightly increase the complexity, but the benefits are even greater then.

DEV Community: Ivan Bernatović