Forem: Shah Nawaz Shuvo

My NextJS Setup

Shah Nawaz Shuvo — Mon, 28 Sep 2020 10:18:57 +0000

If you are starting out with Next.js and Server Side Rendering for the first time, then the initial project setup may take a significant amount of your time. It is not likely that you will be working with plain Next.js. You should require some tooling and a manageable and scalable project structure. In this post, I will share a Next.js boilerplate structure that I am using.

Next.js is a React framework that offers Server-Side Rendering (SSR) and Static Site Generation (SSG) along with some other handy features like:

Incremental Static Generation
TypeScript Support
Fast Refresh
Filesystem-based Routing
API Routes
Built-in CSS Support
Code Splitting and Bundling

I will give a brief overview of my Next.js setup with TypeScript, ESLint, Jest, and TailwindCSS from scratch. This will give you a good starting point for your Next.js projects. So, If you are starting a new project in Next but you are not sure how to set it up then this post is for you. This might save you some time on the initial setup and get you up and running quickly. Let's get started.

Installing NextJS

We will use create-next-app to generate your Next.js application. You need to have NodeJS 10.13 or later installed. We will use npm as a package manager.

npx create-next-app my_next_app

This will create a fresh Next.js application in the my_next_app directory. The folder-structure of your app should look like this:

my_next_app
├── node_modules
├── package.json
├── package-lock.json
├── pages
│   ├── api
│   │   └── hello.js
│   ├── _app.js
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── README.md
└── styles
    ├── globals.css
    └── Home.module.css

Now, we will change this structure a little bit. We will create a directory called src in the root of our project and move pages, public and styles directories in the src directory. We can also make directories like components, helpers, 'lib' etc in the src directory to organize everything properly. Now start our dev server.

npm run dev

This will run the Next.js development server on 127.0.0.1:3000. If everything is fine then you should see the Next.js project starter page on your localhost:3000.

Setting Up TypeScript

It is very easy to set up TypeScript in your Next.js project. First, install TypeScript along with React and Node types.

npm install --save-dev typescript @types/react @types/node

Now, we can change the .js files to .ts(x) files.

src/pages/api/hello.js -> hello.ts
src/pages/_app.js -> _app.tsx
src/pages/index.js -> index.tsx

Hope you get the idea. Now replace the content of your src/pages/_app.tsx with the following code:

/* 
 * _app.tsx file
 */
import { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps ){
  return <Component {...pageProps} />
}

export default App

Like the above, we need to replace all the js code to its equivalent ts code. After that stop the dev server (if it's running) and start it again. Next.js will automatically detect TypeScript and generate a tsconfig.json file and a next-env.d.ts file for you. Your basic TypeScript setup is done.

Setting up ESLint

For large TypeScript of JavaScript projects code consistency and following the best practices are very important. That's where ESLint comes in. To setup ESLint in your Next.js application install ESLint as a devDependency

npm i -D eslint eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

Then we have to create a eslintrc.json file and put the following content in it.

// eslintrc.json file
{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
    "React": "writable"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Setting up Jest for Testing

Now it's time to set up the testing framework Jest. Jest works pretty well with React and Next. First, install Jest as a devDependency.

npm i -D jest ts-jest babel-jest react-test-renderer @types/jest @testing-library/react @testing-library/jest-dom

Now, we create a .babelrc file with the following:

# .babelrc file
{
    "presets": ["next/babel"]
}

Then we shall create a jest.config.js file with the following content:

// jest.config.js file
module.exports = {
    collectCoverageFrom: [
      "**/*.{js,jsx,ts,tsx}",
      "!**/*.d.ts",
      "!**/node_modules/**",
    ],
    setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
    testPathIgnorePatterns: ["/node_modules/", "/.next/"],
    transform: {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
    },
    transformIgnorePatterns: [
      "/node_modules/",
      "^.+\\.module\\.(css|sass|scss)$",
    ],
    moduleNameMapper: {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
    },
    //additional prop from a github issue: https://github.com/zeit/next.js/issues/8663
    preset: "ts-jest",
    testEnvironment: "jsdom",
    globals: {
      // we must specify a custom tsconfig for tests because we need the typescript transform
      // to transform jsx into js rather than leaving it jsx such as the next build requires.  you
      // can see this setting in tsconfig.jest.json -> "jsx": "react"
      "ts-jest": {
        tsConfig: "tsconfig.jest.json",
      },
    },
  }

After that, we have to create a tsconfig.jest.json file like the following:

// tsconfig.jest.json
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "jsx": "react"
    }
}

Now, we have to create a setupTests.js file like the following:

/*
 * setupTests.js file
 */
// optional: configure or set up a testing framework before each test
// if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// used for __tests__/testing-library.js
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

The last file we need to create for Jest is a cssTransform.js in the config/jest directory.

/*
 * cssTransform.js file
 */
module.exports = {
    process() {
      return 'module.exports = {};'
    },
    getCacheKey() {
      return 'cssTransform'
    },
}

Then finally in our package.json file, we have to add the following two scripts.

// package.json file
{
  ...,
  "scripts": {
    ...,
    "test": "jest --watch",
    "test:ci": "jest --ci"
  },
  ...
}

The Jest framework is set up now. We will add a simple test now. For this, we will create a small component and test if that component renders without any error. Here I used the Avatar component which simply shows an avatar image. My src/components/avatar.tsx file looks like the following:

// src/components/avatar.tsx file
function Avatar() {
    return (
        <div className="avatar">
            <img src="/avatar.png" alt=""/>
        </div>
    )
}

export default Avatar

We will render this component in our Index page which is the src/pages/index.tsx file. To test this component let us create a src/components/__tests__/avatar.test.tsx file.

// src/components/__tests__/avatar.test.tsx file
import React from "react"
import Avatar from "../avatar"
import TestRenderer from "react-test-renderer"
import { cleanup } from "@testing-library/react"

afterEach(cleanup);

describe('Avatar', () => {
    it('should render without throwing an error', () => {
        const testRenderer = TestRenderer.create(<Avatar />);
        expect(testRenderer.toJSON()).toMatchSnapshot();
    });
})

To run the test use

npm run test

Setting up TailwindCSS

TailwindCSS is a utility-first CSS framework and it works well with React and Next. We will add Tailwind as a PostCSS plugin to our project. To install TailwindCSS and PostCSS:

npm i -D tailwindcss postcss-preset-env postcss-flexbugs-fixes

Now, we have to create a tailwind.config.js file and a postcss.config.js file in our project root.

// tailwind.config.js file
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./src/components/**/*.{js,ts,jsx,tsx}', './src/pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
  variants: {},
  plugins: [],
}

// postcss.config.js file
module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

Now replace everything from your src/styles/globals.css with the following:

@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

Now, import this globals.css file in your src/pages/_app.tsx file like:

// src/pages/app.tsx file
import '../styles/globals.css'

We are all set up now and ready to start building our Next.js application. One final thing I want to do is to add some Tailwind utility classes to our page. Here is our src/pages/index.tsx

// src/pages/index.tsx

import Head from 'next/head'
import Avatar from '../components/avatar'

export default function Home() {
  return (
    <div className="flex h-screen items-center justify-center">
      <Head>
        <title>My Next App</title>
      </Head>
      <Avatar />
    </div>
  )
}

Finally, we are done setting up everything and testing that they are all working properly. Now, you can start building your awesome Next.js app on top of this boilerplate. You can also find the project boilerplate on Github. Hope this will help you get started with Next.js quickly. Happy coding.

Deploy FastAPI Application on Ubuntu with Nginx, Gunicorn and Uvicorn

Shah Nawaz Shuvo — Tue, 08 Sep 2020 16:06:09 +0000

FastAPI is a promising new Python framework that supports concurrency and type system out of the box. It has many cool features that I like and it's fast. In this post, I will briefly go over the process of deploying a simple FastAPI application on Ubuntu running on an EC2 instance. This post will assume that you know and already configured quite a few things and will only focus on deploying the actual application.

Pre-requisites

First of all, you will need a running EC2 instance with Ubuntu 18.04 or later. This will also work for VPS servers like DigitalOcean or Linode.
If you are using EC2 instance, make sure you configured the VPC and security groups properly and your port 80 is open for inbound and outbound traffic.
You have to have Nginx installed and running.
You will need Python 3.7 or above installed and any Python virtual environment tool like virtualenv, pipenv, conda, etc. installed.
You need to have your FastAPI application on Github/Bitbucket/Gitlab for easy deployment.

After you have ensured that all of the above requirements are met you can move on to the next step. The actual deployment.

Prepare the Application

Now, SSH into the server, create and navigate to the directory that you want your application to be stored into. Say it's /var/www/myapp.

$ mkdir /var/www/myapp 
$ cd /var/www/myapp

We have to make sure that our user has proper read-write access to this directory. In this post, I will use virtualenv to manage a Python virtual environment. You can use whichever you like or prefer. Inside /var/www/myapp we have to do the following one by one:

$ virtualenv -p python3.8 venv
$ mkdir src
$ . venv/bin/activate
(venv) $ cd src

Once inside the src directory, we have to pull our application source code there. Our application source code should contain a requirements.txt file with all the dependencies unless we are using a PIPFILE.

(venv) $ git init
(venv) $ git remote add origin <your-repo-url>
(venv) $ git pull origin <your-branch-name>
(venv) $ pip install -r requirements.txt
(venv) $ pip install gunicorn uvicorn

Configure Nginx

Now our application is ready to be run and tested. To be able to serve the application over HTTP we have to make an Nginx config for our application.

(venv) $ sudo vim /etc/nginx/sites-available/myapp

Put the followings on that file:

server{
       server_name <your-site-name>;
       location / {
           include proxy_params;
           proxy_pass http://127.0.0.1:8000;
       }
}

Now we save the file and exit. Then we make a symbolic link to this config file in the /etc/nginx/sites-enabled directory.

(venv) $ sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

Then we restart the Nginx service.

(venv) $ sudo systemctl restart nginx.service

Now we can start our uvicorn server to check if our application is working or not.

(venv) $ gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

In the place of main:app we can use whatever is correct for our application. Now that our application is running and the proxy server is configured properly we should be able to visit the URL and see our application from a browser.

Configure ASGI Server

Now that our application is deployed and configured properly one last thing to do is to create a service for the Gunicorn server so that it is always running and it automatically starts when the server is rebooted. We will user systemd to create the service.

(venv) $ deactivate
$ sudo vim /etc/systemd/system/myapp.service

In this new file we have to put the following:

[Unit]
Description=Gunicorn instance to serve MyApp
After=network.target

[Service]
User=<username>
Group=www-data
WorkingDirectory=/var/www/myapp/src
Environment="PATH=/var/www/myapp/venv/bin"
ExecStart=/var/www/myapp/venv/bin/gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

[Install]
WantedBy=multi-user.target

Modify the locations as of your own setup and then save and exit the file.

$ sudo systemctl start myapp.service

This will start our new service and our ASGI server will be running in the background.

Trying out Vim

Shah Nawaz Shuvo — Sun, 28 Jun 2020 15:58:24 +0000

Vim (Vi IMproved) is a highly configurable text editor built to make creating and changing any kind of text very efficiently. It is included as "vi" with most UNIX systems and with Apple OS X.I attempted to learn Vim quite a few times before but could not cope up with it. But recently I thought I should at least know very basic usage of Vim. So I started learning the absolute basics. Here I am putting all the basic commands and usage of Vim for any absolute beginner like me. This can be helpful to get started with Vim I think. But there is a lot of things to learn about this handy tool that will take much time and practice. One will get proficient in using Vim only by using it consistently.

Vim has two basic modes:

One is INSERT mode, in which you write text as if in normal text editor.
Another is NORMAL mode which provides you efficient ways to navigate and manipulate text. This is also called Command mode cause we can do various vim commands on this mode.

To change between modes, use esc for normal mode and i for insert mode.

VIM Commands

Command	Action
:e filename	Open filename for editon
:w	Save file
:q	Exit vim
:q!	Quit without saving
:x	Save and Exit
:sav name	Save current file as name
.	Repeat last change made in `NORMAL` mode

Cursor Movements

h to move cursor left (←)
l to move cursor right (→)
k to move cursor up (↑)
j to move cursor down (↓)
b moves to the beginning of the word
e moves to the end of the word
w moves to the beginning of the next word

Number Based Movements

Using a number before each command can execute that command that many times. e.g 3w will move to the 3rd next word.

Insert Text Repeatedly

To insert the same text multiple times use <number>i<text>esc. e.g 3<i>go<esc> will write gogogo.

Find a Character

To find and move to the next (or previous) occurrence of a character, use f and F, e.g. fo finds next 'o'. You can combine f with a number. e.g. you can find 3rd occurrence of 'q' with 3fq.

Go to Matching Parenthesis

In text that is structured with parentheses or brackets, ( or { or [, use % to jump to the matching parenthesis or bracket.

Start/End of Line

To reach the beginning of a line, use 0. For end of line use $.

Find Word Under Cursor

Find the next occurrence of the word under cursor with *, and the previous with #.

Go to Line

gg takes you to the beginning of the file; G to the end. To jump directly to a specific line, give its line number along with G. e.g 5G will take you to the fifth line of the file.

Search for Text

Searching text is a vital part of any text editor. In Vim, press /, and give the text to search for. The search can be repeated for next and previous occurrences with n and N respectively.For advanced use cases, it's possible to use regexps that help to find text of particular form.

Insert New Line

To insert text into a new line after the current line use o and to insert a new line before the current line use O.

After new line is created, the editor is set to insert mode.

Removing a Character

x and X delete the character under the cursor and to the left of the cursor, respectively.

Also adding a number before x of X can perform the action that many times. e.g 5x will remove the next five characters including the character under the cursor and 5X will remove the previous five characters excluding the character under cursor.

Replace a Character

User r to replace only one character under the cursor.

Deleting

d is the delete command. It can be combined it with movements, e.g. dw deletes the characters on the right side of the cursor upto the beginning of the next word. de deletes all the characters of the word on the right side of the cursor including the character under cursor. db will delete the previous word if the cursor is under the first letter of a word or else it will delete the characters left to the cursor upto the beginning of the word.

It also copies the content, so that you can paste it with p to another location.

dd will delete the whole line.

Repeat Command

To repeat the previous command, just use . (period).

Replace Mode

Use R to enter REPLACE mode. In this mode characters under the cursor can be replaced.

Visual Mode

Use v to enter the VISUAL mode and V to enter VISUAL LINE mode. In this mode the text can be selected by the movement keys before deciding what to do with it.

Selected text can be deleted/cut using d or coppied using y. It can be pasted after the cursor using p or before the cursor using P.

My First Impression of Julia

Shah Nawaz Shuvo — Sun, 14 Jun 2020 06:49:02 +0000

Some days ago I came across a programming language that I had no idea about before. It was announced in 2012 and since the community has grown, with over 13,000,000 downloads as of March 2020 (and is used at more than 1,500 universities)^[1]. The language has a very pretty name and it’s Julia. It is a high-level, high-performance, dynamic programming language actually designed to address the requirements of high-performance numerical and scientific computing while also being useful for general-purpose programming. Julia 1.0 was released in 2015 and it made its place in the ML and Data Science world in such short time. In the time of this writing the latest version of Julia is 1.4.2.

Paradigm

Julia is a multi-paradigm programming language with Multiple Dispatch as its core. It is also Homo iconic, meaning a program written in it can be manipulated as data using the language, and thus the program's internal representation can be inferred just by reading the program itself. Thus it has powerful Metaprogramming capabilities. It combines features of imperative, functional, and object-oriented programming. Julia provides ease and expressiveness for high-level numerical computing, in the same way as languages such as R, MATLAB, and Python, but also supports general programming. To achieve this, Julia builds upon the lineage of mathematical programming languages, but also borrows much from popular dynamic languages, including Lisp, Perl, Python, Lua, and Ruby. Julia is garbage-collected, uses eager evaluation, and includes efficient libraries for floating point calculation, linear algebra, random number generation, and regular expression matching. It supports concurrent, (composable) parallel and distributed computing. A just-in-time compiler that is referred to as "just-ahead-of-time" in the Julia community is used.

Language Features

According to the official website^[2], the main features of the language are:

Multiple dispatch: providing ability to define function behavior across many combinations of argument types
Dynamic type system: types for documentation, optimization, and dispatch
Good performance, approaching that of statically-typed languages like C
A built-in package manager
Lisp-like macros and other metaprogramming facilities
Call Python functions: use the PyCall package
Call C functions directly: no wrappers or special APIs
Powerful shell-like abilities to manage other processes
Designed for parallel and distributed computing
Co-routines: lightweight green threading
User-defined types are as fast and compact as built-ins
Automatic generation of efficient, specialized code for different argument types
Elegant and extensible conversions and promotions for numeric and other types
Efficient support for Unicode, including but not limited to UTF-8

Type System

Describing Julia in the lingo of type systems, it is: dynamic, nominative and parametric. Generic types can be parameterized, and the hierarchical relationships between types are explicitly declared, rather than implied by compatible structure. One particularly distinctive feature of Julia's type system is that concrete types may not subtype each other: all concrete types are final and may only have abstract types as their supertypes. While this might at first seem unduly restrictive, it has many beneficial consequences with surprisingly few drawbacks. It turns out that being able to inherit behavior is much more important than being able to inherit structure, and inheriting both causes significant difficulties in traditional object-oriented languages.

It has an automatic generation of efficient, specialized code for different argument types. In Julia, the types are run-time objects, and can also be used to convey information to the compiler. Due to the run-time type inference and a strong focus on performance from the inception of the project, Julia’s computational efficiency exceeds that of other dynamic languages. This language solves the two language problem by combining the ease of use of Python and R with the speed of C++.

Julia's type system is designed to be powerful and expressive, yet clear, intuitive and unobtrusive. Many Julia programmers may never feel the need to write code that explicitly uses types. Some kinds of programming, however, become clearer, simpler, faster and more robust with declared types.

Syntax and Package System

Among the languages that inspired Julia is Ruby, so it should come as no surprise that Julia adopted one of Ruby's more iconic features: the do...end block. As is the case with many other features that Julia has adopted, its implementation of do...end is simpler and more flexible than Ruby's. Julia is as easy to learn and use as Python.

Julia has a built-in package manager and includes a default registry system. Packages are most often distributed as source code hosted on GitHub, though alternatives can also be used just as well. Packages can also be installed as binaries, using artifacts. Julia's package manager is used to query and compile packages, as well as managing environments. Federated package registries are supported, allowing registries other than the official to be added locally.

Parallel Computing

Julia has a high-level syntax which makes it easy and accessible language for the programmers from any background. The Julia programs are able to compile efficient native code for multiple platforms via LLVM. It can be said that this language is built for parallelism due to its primitives for parallel computing. The parallelism is divided into three main categories — Julia Co-routines (green threading), multi-threading and multi-core or distributed processing. With scientific computing in mind, this language natively implements interfaces to distribute a process across multiple cores or machines.

Efficiency

This language can be said as the fastest high-performance open source computing language for data, analytics, algorithmic trading, machine learning, artificial intelligence, and other scientific and numeric computing applications. While popular languages like Python can be slower being an interpreted language, Julia has been designed for high-performance functions by the developers. The applications in Julia can be easily compiled to efficient native code. If you call a function in Julia it consumes a little time in the first run but when the same function has been called repeatedly, it shows a much faster outcome than other languages.

My Thoughts on Julia

I have only scratched the surface of the programming language. Surely one weekend is not enough to get a total feel of the capabilities of any language. But with the small amount of study and research I have found some very good features and reviews of Julia. It is a modern programming language designed with performance and ease of use in mind. The Ruby-like syntax is really helpful for developers to quickly pick up the language but the type system can be hard to grasp at first. If you are familiar with Lisp or even Golang you will find it relatively easy to understand and reason about. Functional programming knowledge is another good thing to have while learning Julia. The official documentation page is very descriptive and will provide you with an in-depth idea about the syntax and language features and uses. The package manager is pretty good and Julia already has more than 3000 packages available and the number is growing everyday.

Though the main power of Julia lies in Scientific Computation it is also a great choice for data analytics, machine learning, artificial intelligence, deep learning, computer vision etc. And one can also use it as a general purpose language.

I really like to learn about new and emerging technologies and try to adopt them early if I can. Many big organizations are already using Julia for building their ML or AI solutions and many universities are using it for their research work worldwide. A data scientist can highly benefit in the near future by adopting Julia now. It may not be as popular as any main stream languages today but in a few years it may become a main stream language itself.

Finally I would like to add this. If you want to bet on some tech for the future of data analytics and machine learning then Julia might be the right one.

Reference

Using Svelte.js with Laravel Part 2: Make Svelte scaffold in Laravel 6

Shah Nawaz Shuvo — Mon, 09 Sep 2019 15:49:15 +0000

Svelte is a radical new approach to building user interfaces. In my last post I used a package called laravel-svelte-preset to get Svelte scaffolding in Laravel 5.8. But this package is not yet compatible with new Laravel 6. In this post we will manually make a Svelte scaffold in Laravel 6. For this we will start fresh.

First install a fresh Laravel 6 project.

$ composer create-project --prefer-dist laravel/laravel laravelt

After installation complete move to project directory.

$ cd laravelt

Now we have to install an npm package. This package is also from WeWowWeb. The package is called laravel-mix-svelte. This will simply add to Laravel Mix the capability to compile Svelte code.

$ npm install wewowweb/laravel-mix-svelte

After installation is finished open your webpack.mix.js file and make it look like the following.

// webpack.mix.js
const mix = require('laravel-mix');

require('laravel-mix-svelte');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .svelte();

After this install the following dependencies.

$ npm install --save jquery popper.js bootstrap svelte

Now we have to make some files manually and code a little bit by ourselves. Inside your resources/js directory make a directory named components and inside components make a file named App.svelte. Your App.svelte should look like this.

// App.svelte
<script>
    import { onMount } from "svelte";

    onMount(() => {
      console.log("the component has mounted");
    });
</script>

<main>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Example Component
                    </div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Now edit your resources/js/app.js.

// app.js
require('./bootstrap');

import App from "./components/App.svelte";

const app = new App({
  target: document.body
});

window.app = app;

export default app;

Now for the resources/views/welcome.blade.php file. It should look like the following.

// welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    </head>
    <body>

        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Finally we have to add bootstrap to the mix. Make two .scss files in the resources/sass directory named _variables.scss and app.scss.

// _variables.scss
// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

// app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

We are almost done here. We literally made a Svelte.js scaffold in our Laravel 6 application. Now we can transpile Svelte by webpack and get our Svelte component in Laravel application.

$ npm run dev && php artisan serve

Now hopefully we will see a page containing a sample Svelte component when we browse our local server. I hope you guys will try it out and please let me know how it goes. I'm just experimenting with this a little. Hope you all like it. Cheers.

Using Svelte.js with Laravel Part 1: Setting up Laravel application with Svelte

Shah Nawaz Shuvo — Tue, 11 Jun 2019 16:38:54 +0000

Svelte is a radical new approach to building user interfaces. It is not a frontend framework. It is lightweight and has simple syntax that compiles to vanilla JavaScript. In this post we will integrate Svelte.js with laravel and build a small application.

In this first part we will be setting up a fresh Laravel project locally and replace the Vue.js scaffolding that comes with Laravel with Svelte.js scaffolding. We can do it with the following steps.

Installing Laravel

To install a fresh Laravel project we need Composer. Make sure we have PHP 7.2 and composer installed first. I am not going to get into installing PHP, composer, Node.js, npm etc. and setting up local server for Laravel. I assume we have all that initial things set up and we are ready to go. You can use XAMPP/ WAMPP/ MAMPP or any other dev server you prefer.

To create a new Laravel project via composer we need to use the following command in our desired directory where we want our project to be stored.

$ composer create-project --prefer-dist laravel/laravel project_name

This will install a fresh Laravel project on our local machine. lets cd into our new project directory and run the project.

$ cd project_name
$ php artisan serve

We shall get the following output.

Laravel development server started: <http://127.0.0.1:8000>

Our project is served on http://127.0.0.1:8000. Browse this link and we will see the Laravel 5 welcome page.

Installing Svelte Preset

Now we will be installing laravel-svelte-preset by We Wow Web. To do that run the following commands.

$ composer require wewowweb/laravel-svelte-preset

Now to get the initial scaffolding of the project run the following.

$ php artisan preset svelte

Now to install the JavaScript dependencies.

npm install && npm run dev

The package will provide us with the initial set of files.

/js/app.js
/js/components/App.svelte
webpack.mix.js

Now our Svelte is fully set up with our Laravel project instead of Vue.

Svelte Application Setup

Now to mount the Svelte app in our Laravel blade file we need to open the resources/views/welcome.blade.php file in our preferred editor and replace everything from the page with the following.


<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

This will mount our Svelte app from resources/js/components/App.svelte file into welcome.blade.php. Now if we check our browser we will get the following page instead of Laravel 5 welcome page.

This is a short and simple way to integrate Svelte.js with Laravel 5.8 with laravel-svelte-preset. In this series we will be building a simple app with Svelte frontend and Laravel API. We will be starting our project in the next part of this series. Let me know what you think of it and what type of project we can build here. Cheers.

Update: This preset only works in Laravel 5.8. But now Laravel 6 has been released and this does not work in Laravel 6. To make this work for Larvel 6 we have to do some little tweaks ourselves. I will explain it in the next part.

Deploy Laravel Application with Nginx on Ubuntu 18.04 on DigitalOcean

Shah Nawaz Shuvo — Mon, 10 Jun 2019 15:24:41 +0000

This is a complete guide on deploying a Laravel application on a fresh Ubuntu 18.04 droplet on DigitalOcean. We can follow the same steps to deploy on any similar host (like Linode) with Ubuntu 18.04 OS. For this you will need a fresh droplet with Ubuntu 18.04 server set up and root access of that server. We also need a domain/subdomain pointed to that server’s IP address (You can do that by setting ‘A Value’ in your DNS manager). If we are all set up to this point then lets move ahead and set up our new Ubuntu server.

Installing Prerequisites

Now we are going to install the following:

Nginx
MySQL 5.7
PHP 7.2

First of all run the following command:

$ apt-get update

1. Nginx

Nginx is one of the most popular web servers in the world and is responsible for hosting some of the largest and highest-traffic sites on the internet. It is more resource-friendly than Apache in most cases and can be used as a web server or reverse proxy.

1.1. Installing Nginx

$ apt-get install nginx

1.2. Adjusting Firewall

Before testing Nginx, the firewall software needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access.

List the application configurations that ufw knows how to work with by typing:

$ ufw app list

We should get a listing of the application profile

//Output
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

Now we can enable HTTP by typing

$ ufw allow 'Nginx HTTP'

Lets verify the change by typing

$ ufw status

We should see HTTP traffic allowed in the displayed output:

//Output
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Nginx HTTP                 ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

1.3. Checking the Web Server

At the end of the installation process, Ubuntu 18.04 starts Nginx. The web server should already be up and running. We can check by the following command

$ systemctl status nginx

//Output
● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Sun 2019-06-09 00:00:00 ; 3h 33min ago
     Docs: man:nginx(8)
  Process: 2062 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
  Process: 1803 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
 Main PID: 2064 (nginx)
    Tasks: 5 (limit: 4915)
   CGroup: /system.slice/nginx.service
           ├─2064 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           ├─2066 nginx: worker process
           ├─2068 nginx: worker process
           ├─2071 nginx: worker process
           └─2072 nginx: worker process

Now if we go to our server_ip_or_domain from our browser we will the following page

2. MySQL 5.7

On Ubuntu 18.04, only the latest version of MySQL is included in the APT package repository by default. At the time of writing, that's MySQL 5.7. To install run the following command:

$ apt-get install mysql-server

This will install MySQL, but will not prompt you to set a password or make any other configuration changes. Because this leaves our installation of MySQL insecure, we will run the next command.

$ mysql_secure_installation

This will take us through a series of prompts where we can make some changes to our MySQL installation’s security options like set a password for the root user etc. We must set a password for the root user. To log in to the root user with the newly set password we can run the following command

$ mysql -u root -p

To test whether mysql is running run the following command

$ systemctl status mysql

// Output
● mysql.service - MySQL Community Server
   Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: enabled)
   Active: active (running) since Sun 2019-06-09 00:00:00; 3h 53min ago
  Process: 1948 ExecStart=/usr/sbin/mysqld --daemonize --pid-file=/run/mysqld/mysqld.pid (code=exited, status=0/SUCCESS)
  Process: 1792 ExecStartPre=/usr/share/mysql/mysql-systemd-start pre (code=exited, status=0/SUCCESS)
 Main PID: 1950 (mysqld)
    Tasks: 28 (limit: 4915)
   CGroup: /system.slice/mysql.service
           └─1950 /usr/sbin/mysqld --daemonize --pid-file=/run/mysqld/mysqld.pid

3. PHP 7.2

PHP 7.2 is included in the default Ubuntu repository for 18.04. We can list each of the available PHP 7.2 packages with the following command

$ apt-cache pkgnames | grep php7.2

Next, we can install the packages that our application requires

$ apt-get install php curl git unzip
$ apt-get install php-pear php-fpm php-dev php-zip php-curl php-xmlrpc php-gd php-mysql php-mbstring php-xml libapache2-mod-php

Finally, we can restart Nginx to allow PHP to run

$ systemctl restart nginx

And confirm the PHP version by

$ php --version

// Output
PHP 7.2.16-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Mar  7 2019 20:23:29) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.16-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies

The main config file of PHP 7.2 will be saved as /etc/php/7.2/fpm/php.ini. We can use the any text editor to modify relevant settings in that file

$ nano /etc/php/7.2/fpm/php.ini

Now we need another tool before we can get into setting up Laravel. This tool is composer. Composer is a popular dependency management tool for PHP, created mainly to facilitate installation and updates for project dependencies. To install composer we have to run the following commands

$ cd ~
$ curl -sS https://getcomposer.org/installer -o composer-setup.php

To install composer globally, use the following command which will download and install Composer as a system-wide command named composer, under /usr/local/bin

$ php composer-setup.php --install-dir=/usr/local/bin --filename=composer

//Output
All settings correct for using Composer
Downloading...

Composer (version 1.6.5) successfully installed to: /usr/local/bin/composer
Use it: php /usr/local/bin/composer

To test our installation, we can run

$ composer

And we will get the following output with all composer's arguments

Output
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.6.5 2018-05-04 11:44:59

Usage:
  command [options] [arguments]
...

Project Setup

As we are done installing all the dependencies. Now its time for us to set up the main project. Here I am going to use git to pull my Laravel project from a remote repository and maintain version control of the application.

Database Setup

But first we have to create a new database for the application. To create MySQL database and users, we have to follow these steps.

At the command line, we have to log in to MySQL as the root user.

$ mysql -u root -p

Insert root password to enter into mysql shell.

To create a database user, we have to type the following command. Replace username with the user you want to create, and replace password with the user's password.

$ mysql> GRANT ALL PRIVILEGES ON *.* TO 'username'@'localhost' IDENTIFIED BY 'password';

Then type \q to exit the mysql program.

To log in to MySQL as the user we just created, type the following command. Replace username with the name of the user you created in previous step.

$ mysql -u username -p

Insert user password to enter into mysql shell.

To create a database, we have to type the following command. Replace dbname with the name of the database that you want to create.

$ mysql> CREATE DATABASE dbname;

Application Setup

We are going to host our application in /var/www/html directory of our server. You can use any other directory if you want. We will be using git to upload the project files and maintain version control. I suppose we know the basics of Git. Lets dive in.

Create an empty Git repository in /var/www/html directory.

$ cd /var/www/html
$ git init

Say our remote repository is on Github and we have the link https://github.com/username/project-name.git and this repo has a production branch. Now lets add this remote repo to our newly created empty repo and pull the project files from the remote.

$ git remote add origin https://github.com/username/project-name.git
$ git pull origin production

We may have to enter our github username and password here. Then We have to wait until the full branch is uploaded to the server. Now we will configure the Laravel application on our server. Make sure we are in our project directory (Here it is /var/www/html).

$ cp .env.example .env
$ nano .env

This will open the .env file in the nano editor so that we can make the necessary changes.

// .env file
APP_NAME=application_name
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=application_url

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dbname
DB_USERNAME=username
DB_PASSWORD=password

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

After editing we will save the file by Ctrl+o and exit it by Ctrl+x.
Now lets install all dependencies via composer.

$ composer update

After all the dependencies are installed successfully run the following commands.

$ composer dump-autoload
$ php artisan config:clear
$ php artisan key:generate
$ php artisan migrate
$ php artisan db:seed

Our laravel application is almost set up now. The only thing remaining to do now is to make an Nginx config file. We can use the /etc/nginx/sites-available/default.conf file or we can make a new config file. Either way it will work. Here we are going to use the default file.

$ nano /etc/nginx/sites-available/default.conf

Clear everything from the file and add the following snippet.

// /etc/nginx/sites-available/default.conf file
server {
    listen 80;
    listen [::]:80;

    root /var/www/html/public;
    index index.php index.html index.htm index.nginx-debian.html;

    server_name <our.application.name>;

    location / {
    try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
      try_files $uri /index.php =404;
      fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
      fastcgi_index index.php;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Save and close the file. Now we have to make a symbolic link of this file to the /etc/nginx/sites-enabled/ directory. To accomplish that run the following command.

$ ln -S /etc/nginx/sites-available/default.conf /etc/nginx/sites-enabled/

To test whether the nginx config is correct we can run the following command.

$ nginx -t

If the config file is correct then it will output the following.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Now we have to restart Nginx service.

$ systemctl restart nginx

At this point our Laravel application is deployed successfully on our Ubuntu 18.04 server. Now to test we browse the server's IP or domain from the browser and will see our application live.

In this post I tried to give you guys a full guide to how you can deploy your Laravel application with Nginx on Ubuntu 18.04 on DigitalOcean or Linode or any other similar hosting platform. Hope this will help you all in some way. Peace.

Laravel Horizon with Nginx and Ubuntu 18.04 on DigitalOcean

Shah Nawaz Shuvo — Tue, 28 May 2019 19:27:20 +0000

I had been working with an eCommerce SaaS application a few months ago. Parts of it is built with Laravel 5 and the application is hosted on DigitalOcean on an Ubuntu Server. It's not yet in production but still the setups are pretty much the same. My specific server environment was an Ubuntu 18.04 OS, Nginx 1.14 web server and PHP 7.2

This application has many queued and scheduled tasks to handle. Many tasks had been made automated using Laravel's Scheduler and all the mailing jobs are queued. I used a very handy tool from Laravel called Horizon to monitor and maintain the queues, schedules and events. My intention here is to document the procedure I followed to setup the environment and how I made it work properly.

I am not going to get in details of deploying a laravel project on DigitalOcean droplet. I am diving straight in Horizon setup and it will work for any version of laravel greater than 5.4. I used redis-server as laravel's queue management storage.

Step 1: Installing Redis Server on Ubuntu 18.04

First of all we have to ssh into our DigitalOcean droplet and after successful login we will get root access to our Ubuntu server.

We have to use the following commands to install Redis

$ apt-get update
$ apt-get upgrade
$ apt-get install redis-server
$ systemctl enable redis-server.service

Redis can be started without a configuration file using a built-in default configuration. But to make any extra parameter changes we can use its configuration file that is: /etc/redis/redis.conf. We have to edit the Redis configuration file in a text editor to make changes

$ vim /etc/redis/redis.conf

The above configuration tells Redis to remove any key using the LRU algorithm when the max memory of 256mb is reached. Save the configuration file and restart the Redis service:

$ systemctl restart redis-server.service

Use redis-cli tool to verify the connection between Redis server and redis-cli.

$ redis-cli

127.0.0.1:6379> ping
PONG
127.0.0.1:6379>

Step 2: Installing Predis for using Redis with Laravel

Before using Redis with Laravel, you will need to install the predis/predis package via Composer:

$ composer require predis/predis

After predis is installed we have to configure it for our application. The configuration file for redis is located in the config/database.php configuration file. Within this file, you will see a redis array containing the Redis servers utilized by your application:

/* config/database.php file */
'redis' => [

    'client' => 'predis',

    'default' => [
        'host' => env('REDIS_HOST', '127.0.0.1'),
        'password' => env('REDIS_PASSWORD', null),
        'port' => env('REDIS_PORT', 6379),
        'database' => env('REDIS_DB', 0),
    ],

    'cache' => [
        'host' => env('REDIS_HOST', '127.0.0.1'),
        'password' => env('REDIS_PASSWORD', null),
        'port' => env('REDIS_PORT', 6379),
        'database' => env('REDIS_CACHE_DB', 1),
    ],

],

Step 3: Installing Horizon

We have to use composer to intall Laravel Horizon.

$ composer require laravel/horizon

After installing Horizon, publish its assets using the horizon:install Artisan command:

$ php artisan horizon:install

We should also create the failed_jobs table which Laravel will use to store any failed queue jobs:

$ php artisan queue:failed-table
$ php artisan migrate

Horizon's primary configuration file will be located at config/horizon.php. This configuration file allows us to configure our worker options and each configuration option includes a description of its purpose. In the file we must define connection as redis.

/* config/horizon.php file */
'environments' => [
        'production' => [
            'supervisor-1' => [
                'connection' => 'redis',
                'queue' => ['default'],
                'balance' => 'simple',
                'processes' => 10,
                'tries' => 3,
            ],
        ],

        'local' => [
            'supervisor-1' => [
                'connection' => 'redis',
                'queue' => ['default'],
                'balance' => 'simple',
                'processes' => 3,
                'tries' => 3,
            ],
        ],
    ],

Now Horizon is installed. We have to start horizon with an Artisan command and keep the command running to be able to use horizon to process queues at this point. To do that navigate to project root and run:

$ php artisan horizon

After Horizon is run we can find it on http://project.link/horizon. We will see a dashboard page like below:

Step 4: Dashboard Authorization

But this will work only in local environment of the application. To use it in production we have to add dashboard authorization to it so that no one can access the page without logging in. Within the app/Providers/HorizonServiceProvider.php file, there is a gate method. This authorization gate controls access to Horizon in non-local environments. You are free to modify this gate as needed to restrict access to your Horizon installation:

/**
 * Register the Horizon gate.
 *
 * This gate determines who can access Horizon in non-local environments.
 *
 * @return void
 */
protected function gate()
{
    Gate::define('viewHorizon', function ($user) {
        return in_array($user->email, [
            'admin@application.com',
        ]);
    });
}

This will allow the user with the email admin@application.com to access /horizon route and use horizon.

Step 5: Automate Horizon

If we are deploying Horizon to a live server, we should configure a process monitor to monitor the php artisan horizon command and restart it if it quits unexpectedly. When deploying fresh code to our server, we will need to instruct the master Horizon process to terminate so it can be restarted by your process monitor and receive your code changes. To handle that we will need supervisor. To install supervisor :

$ apt-get install supervisor

After installation is complete we have to run the following command to run supervisor at startup.

$ systemctl enable supervisord

Now we have to create a new file in /etc/supervisor/conf.d/ named horizon.conf and add the below configuration:

[program:horizon]
process_name=%(program_name)s
command=php /full/path/to/our/application/artisan horizon
autostart=true
autorestart=true
user=root
redirect_stderr=true
stdout_logfile=/full/path/to/our/application/horizon.log

Now to read and reload the config and restart the process we have to run the below commands:

$ supervisorctl reread
$ supervisorctl update
$ supervisorctl start horizon

This will setup Laravel horizon properly and make it run automatically on the server. But if some changes have been made
to the Queues or Schedules Horizon must be restarted to make those change take effect on the server. To do that navigate to project root and run:

$ php artisan horizon:terminate

These were pretty much the steps I followed to setup Laravel Horizon on Ubuntu 18.04 server on a DigitalOcean droplet. Hope this guide will help some of you to easily accomplish the task and be more productive.