DEV Community: Ankit Sinha

Navigating Laravel's Journey with Vercel and PlanetScale

Ankit Sinha — Wed, 22 Nov 2023 10:35:07 +0000

In the ever-expanding cosmos of development tools, Laravel stands out as my trusted comet, swiftly cutting through the vastness of code. However, for my smaller projects, I sought a deployment solution that was not just cost-effective but also a breeze to set up

Here is my step-by-step guide on how to deploy Laravel applications on Vercel with a PlanetScale database (MySql):

Create a new Laravel application.
Configure the application for Vercel.
Set up a PlanetScale database.
Configure vervel with Environment Variables
Automate the deployment process using Github Actions.

Now, let's sprinkle some creativity into your step-by-step guide:

🌌 Step 1: Creating a Laravel Constellation

We require an application for deployment. Let's swiftly conjure a new Laravel + Jetstream project—a constellation of code and creativity.

# Create a new Laravel project 
composer create-project laravel/laravel laravel-vercel-example

# Install Jetstream
composer require laravel/jetstream
php artisan jetstream:install livewire

Next, we'll set up a local database using Docker Compose, update our environment variables, and run our migrations.

# docker-compose.yml
version: '3.8'

services:
  db:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_DATABASE: laravel
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"

Next, We need to update our .env file in our project

# .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=password

Now, Once we had completed this, lets boot up db and migrate our base laravel tables,

# Start our database
docker-compose up -d

# Run migrations
php artisan migrate

Now Create a project in Github and Push this project excluding your env files to Github, as we will be using github action to automatic deploy this application in vercel.

🚀 Step 2: Configuring the Vercel

Before deploying our application to Vercel, we need to make some changes,

Set up a new Vercel project
Create a vercel.json file
Add our api/index.php entry point
Set up our trusted proxies
Ensure the vendor directory is not uploaded

Step 1. Setup a new Vecel project

We'll use the Vercel CLI to create a new project, which we plan to deploy later.

# Install the Vercel CLI
npm i -g vercel

# Login to Vercel
vercel login

# Create and link a new project
vercel link

Follow the step-by-step instructions provided by vercel login and vercel link. This will generate a .vercel directory and automatically include it in your .gitignore.
Open the .vercel/project.json file and take note of the orgId and projectId as we'll need them later.

Step 2. Create a vercel.json file

// vercel.json
{
    "version": 2,
    "framework": null,
    "functions": {
        "api/index.php": { "runtime": "vercel-php@0.6.0" }
    },
    "outputDirectory": "public",
    "routes": [
        {
            "src": "/build/(.*)",
            "dest": "/build/$1"
        },
        {
            "src": "/(.*)",
            "dest": "/api/index.php"
        }
    ],
    "env": {
        "APP_ENV": "production",
        "APP_DEBUG": "true",
        "APP_URL": "YOUR APP URL",

        "APP_CONFIG_CACHE": "/tmp/config.php",
        "APP_EVENTS_CACHE": "/tmp/events.php",
        "APP_PACKAGES_CACHE": "/tmp/packages.php",
        "APP_ROUTES_CACHE": "/tmp/routes.php",
        "APP_SERVICES_CACHE": "/tmp/services.php",
        "VIEW_COMPILED_PATH": "/tmp",

        "CACHE_DRIVER": "array",
        "LOG_CHANNEL": "stderr",
        "SESSION_DRIVER": "cookie",

        "DB_CONNECTION": "mysql",
        "DB_PORT": "3306",
        "MYSQL_ATTR_SSL_CA": "/etc/pki/tls/certs/ca-bundle.crt"
    }
}

Do change runtime if using another version of PhP:

vercel-php@0.6.0 - PHP 8.2.x (https://example-php-8-2.vercel.app)
vercel-php@0.5.3 - PHP 8.1.x (https://example-php-8-1.vercel.app)
vercel-php@0.4.1 - PHP 8.0.x (https://example-php-8-0.vercel.app)
vercel-php@0.3.3 - PHP 7.4.x (https://example-php-7-4.vercel.app)

Let’s quickly explain some of the key concepts here.

`functions`

"functions": {
      "api/index.php": { "runtime": "vercel-php@0.6.0" }
  },

Our application is essentially a single serverless function, which we'll create next. We use the community vercel-php runtime to set up the environment and automatically install dependencies with Composer.

`outputDirectory`

"outputDirectory": "public",

Vercel builds our application by running npm run build, but by default, it looks for a dist directory. However, our assets are actually saved in public/build, so we need to instruct Vercel where to find them.

If you're using a tool other than Livewire, you may need to adjust this setting accordingly.

`routes`

"routes": [
    {
        "src": "/build/(.*)",
        "dest": "/build/$1"
    },
    {
        "src": "/(.*)",
        "dest": "/api/index.php"
    }
],

The first route intercepts requests for CSS and JS assets and directs them to the appropriate files. All other requests are managed by our Laravel serverless function, as specified by the second route.

`env`

"env": {
"APP_ENV": "production",
"APP_DEBUG": "true",
"APP_URL": "YOUR APP URL",

"APP_CONFIG_CACHE": "/tmp/config.php",
"APP_EVENTS_CACHE": "/tmp/events.php",
"APP_PACKAGES_CACHE": "/tmp/packages.php",
"APP_ROUTES_CACHE": "/tmp/routes.php",
"APP_SERVICES_CACHE": "/tmp/services.php",
"VIEW_COMPILED_PATH": "/tmp",

"CACHE_DRIVER": "array",
"LOG_CHANNEL": "stderr",
"SESSION_DRIVER": "cookie",

"DB_CONNECTION": "mysql",
"DB_PORT": "3306",
"MYSQL_ATTR_SSL_CA": "/etc/pki/tls/certs/ca-bundle.crt"

}
Here, we establish our non-secret environment variables. Take note of the MYSQL_ATTR_SSL_CA variable. This is crucial for a secure connection to PlanetScale in the following steps. We will set up our secret environment variables in the Vercel dashboard later on.

🎭 Step 3. Add our `api/index.php` entry point

// api/index.php
<?php

require __DIR__ . '/../public/index.php';

This simple file redirects to the default index.php file provided by Laravel. This is necessary because Vercel only allows functions to be located in the api directory.

🛡️ Step 4. Set up our trusted proxies

Vercel hosts our code behind a load balancer, which forwards requests to port 80. This can confuse Laravel when it generates secure links. To solve this issue, we need to make a simple modification to TrustProxies.php.

// app/Http/Middleware/TrustProxies.php
<?php

namespace App\Http\Middleware;

use Illuminate\Http\Middleware\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array<int, string>|string|null
     */
    protected $proxies = '*';

    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers =
        Request::HEADER_X_FORWARDED_FOR |
        Request::HEADER_X_FORWARDED_HOST |
        Request::HEADER_X_FORWARDED_PORT |
        Request::HEADER_X_FORWARDED_PROTO |
        Request::HEADER_X_FORWARDED_AWS_ELB;
}

🚫 Step 5. Ensure the vendor directory is not uploaded

Lastly, we need to add a .vercelignore file. This will prevent our vendor (created during composer installation) and any pre-built files from being included, as Vercel will build these for us.

# .vercelignore
/vendor
/public/build

🪐 Step 3. Set up a PlanetScale database.

Visit PlanetScale and create an account if you haven't already. From the dashboard, create a new database.

Once your database is operational, click on "Connect". Generate a new password and record the configuration details.

🌐 Step 4. Configure vervel with Environment Variables

Now we'll add those configuration details to Vercel. This will allow our deployed application to access the database. Go to the dashboard and add the following environment variables:

APP_KEY which can be generated by running php artisan key:generate
DB_HOST From PlanetScale Database Dashboard
DB_DATABASE From PlanetScale Database Dashboard
DB_USERNAME From PlanetScale Database Dashboard
DB_PASSWORD From PlanetScale Database Dashboard

🚀 Step 5. Automated deployment with Github Actions

Now, we can integrate everything with Github Actions. We will set up a workflow that automatically applies migrations to PlanetScale and deploys our application to Vercel.

To start, add the following .github/workflows/main.yaml file:

on:
    push:
        branches: main
jobs:
    deploy:
        name: Deploy
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3

            - name: Setup PHP
              uses: shivammathur/setup-php@v2
              with:
                php-version: '8.2'

            - name: Install Vercel CLI
              run: npm install --global vercel@latest

            - name: Install Dependencies
              run: composer install

            - name: Migrate DB
              run: |
                php artisan migrate --force
              env:
                APP_ENV: production
                DB_CONNECTION: mysql
                DB_HOST: ${{ secrets.DB_HOST }}
                DB_PORT: 3306
                DB_DATABASE: ${{ secrets.DB_DATABASE }}
                DB_USERNAME: ${{ secrets.DB_USERNAME }}
                DB_PASSWORD: ${{ secrets.DB_PASSWORD }}
                MYSQL_ATTR_SSL_CA: /etc/ssl/certs/ca-certificates.crt

            - name: Deploy to Vercel
              run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}
              env:
                VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
                VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }

Next, add the following secrets to your Github dashboard:

From PlanetScale:
DB_HOST
DB_DATABASE
DB_USERNAME
DB_PASSWORD

From .vercel/project.json:
VERCEL_ORG_ID
VERCEL_PROJECT_ID

From Vercel settings page:

VERCEL_TOKEN

Now, with secrets in place, every push to the main branch triggers a symphony of actions—installing dependencies, running migrations, and deploying our Laravel creation to Vercel.

Finally, push everything to Github.

Let’s take a closer look at what this workflow is doing:

Your code will be checked out.

A PHP environment will be set up, giving you access to php and composer.
The Vercel CLI will be installed.
Your application dependencies will be installed.
Migrations will be run with php artisan migrate --force.
Your application will be deployed to Vercel.

You should now have a deployed and functioning application!

The Ultimate Guide To Building A Personal Website

Ankit Sinha — Sun, 28 Jun 2020 10:16:13 +0000

What’s the #1 networking tool you can have in your arsenal as a student or a professional? I’ll tell you this right now: it isn’t your resume.

Resumes are boring. College and career experts will tell you to make your resume of one page, size 12 Time New Roman document printed in black and white with no pictures.
Seriously? How are you supposed to represent and differentiate yourself with that?

Plus, your resume becomes static and outdated the moment you hand it to someone. You can’t update resumes you’ve already given out – you have to make new copies.

That’s why you need to create a personal website.

A website is the complete opposite of a resume. Everything bad about resumes can be fixed simply by having a website. I’d go as far as to say that not having a website in 2020 is like shooting yourself in the foot – it’s that useful.

Plus, having a website makes you more findable.

Let's get this straight!
Nowadays anyone and everyone can build a website, be it coming from a coding background or not,
There are many online website builders which are purely dragged and drop and don't require almost any knowledge of coding like:

Wordpress- Which basically works on themes, and there are many free themes for every genre, its petty simple drag and drop thing. Combined with various plugins like Elementor builder it's very easy to make a website.
Wix- Wix offers an excellent drag-and-drop site builder to create small websites. There are 100s of free templates available. Wix provides its own web hosting as well as domain names (free and paid). The App Market makes it easy to add extra functionality such as photo galleries or e-commerce.

Also,
If you have a little knowledge of coding you can refer any of the frontend frameworks for building your website
(Which one you should use)

Now comes the part How much I should pay?
Mostly new developers have a small budget. Lucky you, this blog is budgeted for anywhere from nothing to 25 USD.

What all you need?

Domain

The first step to building your personal site is to choose how you’re going to have it hosted. There are several ways to put up a website. For instance, you could just create a free blog at Wix or WordPress.com.

However, I believe it’s a lot more impressive to have a self-hosted site with an actual domain name (not a subdomain). This will look a lot more legitimate and will show that you’ve taken the time to learn how to build a website, which can differentiate you from the crowd.
What makes a good domain name?
For a personal website or portfolio, I’d recommend making your domain name your first name+ your last name.com. That’s seriously the best option for memorability and SEO (aka how high you show up in Google which searched).

Domain Registrars:

Freenom
- Domain Extensions - .tk,.ml,cf
- Free Domain for 1 year
Namecheap
- Domain Extensions - .in,.com,org,etc
- Price range 1$- 10$
Namecheap
- Domain Extensions - .in,.com,org,etc
- Price range 1$- 10$
Hostinger
- Domain Extensions - .in,.com,org,etc
- Price range 1$- 10$

How to get the best deal: I would suggest at least watch for three days, the prices of domain vary almost every day, also it might be cheaper at early morning, and if you are buying domain+hosting you can get crazy discount codes, even you can get a free domain when you buy hosting+domain from Hostinger

Website Hosting

There are several hosts to pick from, and some are not free.
Hosting a website is placing all your website files on a server where you can access it via IP address or URL.

After you have hosted your website it's important to change your DNS(Domain name System) in domain provider.

Hosting Providers:

InfinityFree
- 3 free hosting
- Free Hosting for 1 year
Heroku
- 3 free hosting
- Free Hosting for 1 year
GitHub Pages
- Free Hosting
Hostinger
- Price range 10$- 20$
Godaddy
- Price range 15$- 20$

How to get the best deal: I would recommend if you are going with a paid hosting, Watch for Hostinger hosting usually when purchasing domain+hosting they give lifetime SSL for free.

SSL

When purchasing a domain/hosting you can also purchase SSL for like 3$-5$.
But you can also get Free SSL from :

For Starting, SSL and Email providers are not required,
But Domain and housing a website is a must!

Make Your Website Even Better(Optional)

The purpose of this blog was to get you from zero to having a working website as easily as possible. However, you can do so much more to optimize your site’s design, speed, SEO, security, navigation, typography… your options are endless.

That’s why I want to show you some of the things you can do to take your site to the next level.

Personal Website SEO

Making Sure You Show Up in Google Searches

This brings us to the topic of Search Engine Optimization or SEO. Now, I’m going to be honest – SEO can be a complex business. After all, we’re talking about trying to make our websites look good to a mindbogglingly complicated algorithm, which has details that Google keeps closely guarded. Oh, and of course, millions upon millions of other sites are trying to do the same thing.

The good news is that Google’s algorithm (as well as the algorithms of other search engines) has gotten much, much better over time. Its mission has always been to serve up the most relevant results for what a person searches, and it’s gotten pretty good at doing that.

It’s also a lot faster at indexing new sites that pop up. when I started building websites, I remember having to manually submit them to search engines and then sometimes wait months to see them show up. Now, Google will index your site automatically – often in just a couple of days.

What I’m going to recommend is a set of three simple steps, which can each have a big impact:

Have the right content on your site
Get links from other authoritative and highly-trafficked sites
Make sure your site is mobile-friendly

Let’s start with your website’s content. The main way that Google figures out what’s on your site – and hence how relevant it is to a person’s search terms – is pretty simple: It reads your site! Google uses small pieces of code called spiders to “crawl” the content of the internet and index it.

Secondly, you need to understand the role that links from other sites play in your own site’s ranking. To put it simply, your site will rank more highly when it has:

Links from a lot of sites (if they’re gotten legitimately – not in paid or spammy ways)
Links from authoritative sites (typical sites with either a lot of traffic or sites run by institutions like governments or universities)

Lastly, I do want to mention that Google puts a high priority on mobile-friendliness.

More than 50% of internet traffic now comes from cell phones and mobile devices, and Google has taken notice.

If you need any help, you can contact me. I’ll either help you directly or point you to people or resources that can be of assistance.
You can also just connect with me on theankitsinha.com without a need for help.
I’d love to meet you! 💓
Also, Do comment if you like this post! And if you have a personal website I would love to have a look! 🌟

Good Luck!

What is a Web Framework, and Which one you should use?

Ankit Sinha — Fri, 19 Jun 2020 07:37:12 +0000

Framework is a word used a lot in the context of the development cycle.
So, what even is a framework?
When we talk about frameworks, those frameworks normally fall into three different categories
1.Frontend Frameworks
2.Backend Frameworks
3.User interface frameworks
But even once you know what frameworks are, which one should you learn or use, and why you should use it? So in this blog, we will discuss what is a framework, what frameworks are out there? and how to make decisions about what kind of framework you should use for your projects!

What are Frameworks

A framework is a standardized set of concepts, practices, and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.
In the world of web design & development, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents, etc.) which can be used to support the development of websites, as a basis to start building a site.

If we look at a couple of different web applications we can see that there are a lot of similar features. Many have user authentication, Custom Notifications, Task Scheduling, pages that render on loading, they connect to databases, they have profiles you can look at, they all have stylized feeds of information, etc.
If we want, we can write all of that logic every time we want to build a new application, however, there are also a lot of tools available that can do that for us making our work easier and hence saving a lot of time.

Also, a lot of the time when we build applications we want to format our code in certain ways that help us become more efficient and help other developers understand our code. Web frameworks help us achieve a structure in our applications, and they give us additional features we can add to them without too much extra work.

Frameworks give us a place to start so that we can focus on features rather than configuration details.

Code is read many more times than it is written, and it is so important when you are working with other developers that they know where the code for certain tasks is being written so they can use it in their code.

For eg. If you use a framework like Laravel, you know all the authentication files are at Auth folder, So any new developer with a basic knowledge of the Laravel framework can easily do any required changes.

The frameworks also have conventions for how the code is written and structured, which standardizes how the developers write their code.

Frontend Frameworks

The frontend of a web application is the part you see and interact with. It consists of the web design and the interaction of the site. In terms of programming languages, this is almost always comprised of the CSS, HTML, and JavaScript of the page.

The usual components are:

CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion.
Typography style definitions for HTML elements.
Solutions for cases of browser incompatibility so the site displays correctly in all browsers.
Creation of standard CSS classes that can be used to style advanced components of the user interface.

Frontend frameworks:

Angular 7+
- Built by Google
- Well supported
- Proper Documentation Available
- Encourages reusability
- Improves application scalability
React
- Built by Facebook
- Bundles frontend code into components
- Proper Documentation Available
- Organizes code and data to make code more reusable
- Large learning curve
Vue
- Easy to learn
- Very fast
- Takes parts from Angular and React and optimizes them
- All tools associated with it are packaged well
- less widely adopted than some others

Choosing a Frontend Framework

The world of frontend frameworks is evolving especially fast, it seems like a new frontend framework is on the rise every few months. Learn what makes sense to you, and don't worry too much about what the "hottest" one at the moment is.

Backend Frameworks

Backend frameworks are a lot more varied. They are written in a variety of programming languages and have a wide variety of features.
Below, like the above list, is a very incomplete list of some of the frameworks out there for writing application backends.

Laravel
- Language- Php
- Supports Composer for package management
- Offers tons of packages
- Great community
- Lots of learning resources available for free
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
Django
- Language- Python
- Happy medium between being very opinionated and less structured
- Can be difficult to integrate a fancy front-end.
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
Flask
- Language- Python
- Less opinionated and more customizable than Django
- Gives you less out of the box (you have to build more)
- All tools associated with it are packaged well
- less widely adopted than some others
Ruby on Rails
- Language- Ruby
- Very opinionated
- Has great tools like scaffolding so you can build things fast
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
- The asset pipeline helps with front-end development
- Ruby takes longer to run programs than some other programming languages
Meteor
- Language- JavaScript
- Gives you a lot of functionality out of the box (like user authentication, database connections, and view rendering)
- Integrates very well with modern front-ends
GatsbyJS
- Language- JavaScript
- Powered by GraphQL
- Very High Data sources compatibility(directly pull data from Contentful, Drupal, WordPress, etc.)
Express
- Language- JavaScript
- Very customizable
- Very lightweight
- Less built-in features
- Node is very fast

Choosing a Backend Framework

Usually, you choose a backend framework based on the programming language it is written in. Also, take into account what features you want to add, if you want authentication (or user login) for your website, for example, writing it in Django where Authentication is built-in will be a lot easier than writing it in Flask where you would need an additional service.

User Interface Frameworks

User interface frameworks help create stylized and professional looking web applications. Most include some sort of grid system so that you align elements, they have color schemes so that is handled for you, and they stylize your HTML components using CSS so that they look clean and professional. These are within the frontend domain; however, normally when we refer to frontend frameworks we are talking about JavaScript frameworks.

User interface frameworks include:

Bootstrap
- Built by Twitter
- Easy to learn and looks professional
- Can be easy to spot "Bootstrap Sites"
- Can be difficult to customize components
Materialize
- Created and designed by Google
- Clean looking
- A bit more "fun" than Bootstrap
- Follows Google's Material style guide
- Lots of styling and color options
Foundation
- Advanced responsive layout
- Lots of examples
- Professional looking
- Used by-Adobe, EA,HP,Samsung,eBay,Disney.

Choosing a User Interface Framework

Choosing a User Interface framework mostly comes down to personal preference in appearance and the goals of the site. The different styles may appeal to different industries or may convey a different message to users.

Data Source- Medium,Google Searches,Ali Spittel

Also, I would love to hear any feedback and review from you. Please tell me what you liked in the comment section below. Happy Learning!✨

My Visual Studio Code Setup

Ankit Sinha — Sun, 14 Jun 2020 07:57:53 +0000

I love the text editor setup I've been using for the past year and a half, so I want to show off my setup! Visual Studio Code has far surpassed my experiences with Spyder, Sublime Text, and Idle (the built-in Python editor) which I used for the years before it.
I thought I would do a quick write up on my setup and the extensions I love!
Today I'm going to share my favorite Code Editor settings, using for my web development. And I'm going to start with my Code Editor looks. After all, look matters.

Theme
My most used VS Code theme is Material Theme, currently, I'm using this.

There are many color themes available in this theme,
I usually go for a dark theme, so my favorites are :

Material Theme Palenight High Contrast
Material Theme Ocean High Contrast

Emmet
I am incredibly reliant on Emmet, so I love that it is built in for VS Code. I also have it set up to work in more than just my html files:

// in settings.json
"emmet.includeLanguages": {
  "html": "html",
  "erb": "erb",
  "javascript": "javascriptreact",
  "vue": "html",
  "ejs": "html"
},

Icons
File Icons enhance our VS Code Editor looks. Mainly it helps us to differentiate between different files & folders by their given icons. For my VS Code, I use two file icons:-

Material Icon Theme - One of the most popular icon theme for VS Code.
Material Theme Icons - Currently using this. And I'm using Material Theme Icons Light variant.

Extensions I use

I have a lot of language and framework-specific extensions built-in, which are boring and very dependent on the developer, so I will skip over those in order to discuss some of my favorite all-purpose extensions.

Auto Rename Tag

Automatically rename paired HTML/XML tag, also works in JSX.

Add an entry into auto-rename-tag.activationOnLanguage, in your settings.json file to set the languages that the extension will be activated. By default, it is ["*"] and will be activated for all languages

  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

REST Client

This extension allows you to send HTTP request and view the response in Visual Studio Code directly.

Color Highlight

This extension styles css/web colors, found in your document

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Set below property value to be true or add this property into your settings.json file to format code on save.

  "editor.formatOnSave": true

Conclusion
I am really happy with my setup -- I have no complaints! Feel free to DM me any questions about my setup, and also send me your favorite tips and tricks!