7 Reasons why you should start using Nuxtjs

Kenechukwu Josiah — Tue, 27 Feb 2024 11:35:32 +0000

Let's begin by understanding what Nuxt is. Nuxt is an open-source framework built on Vue.js. It's type safe and highly performant. One of its cool features is that it uses directory structure to automate a lot of tasks. For example, it automatically defines routes based on the file structure in the pages directory, enables code splitting for faster loading times, and supports server-side rendering by default. It also provides features like automatic import using composables in the composables directory.

How Nuxt works
Nuxt uses the Nitro server to serve various rendering modes, such as SSR, SPA, and ISA. By default, it uses SSR, which means the initial page is rendered on the server, and then JavaScript handles subsequent page routing on the client side. One of the coolest features is the ability to configure the rendering mode according to your needs. Nuxt is designed to run in any environment. For more information, visit . Additionally, Nuxt comes pre-configured with TypeScript, removing the need to set it up manually. Furthermore, Nuxt handles code splitting automatically.

With that being said, let's delve into my top 7 reasons why you should start using Nuxt.js.

1. Rendering mode
By default, Nuxt uses SSR as its rendering mode, ensuring faster load times and a better user experience. Additionally, it improves performance by sending minimal JavaScript to the client, achieved through code-splitting. You have the option of configuring your preferred render mode.

2. SEO
With Nuxt's head configuration or its built-in composable, you can enhance your Nuxt app SEO. Although Nuxt provides sane SEO by default, you can further customize it. You can also use useSeoMeta, which allows you to define your site's SEO meta tags as a flat object with full TypeScript support.

3. Server/Fullstack application
Nuxt utilizes Nitro as its server engine, providing complete control over the server-side of your application. It automatically generates your server API by scanning files in the server/api/ directory and server middleware from server/middleware/. This capability enables you to develop full-stack applications with Nuxt.

4. Routing
One of the standout features of Nuxt is its file-system routing, which automatically creates a route for each file in the pages/ directory. Nuxt leverages Vue Router internally, enabling routing by analyzing and converting the folder structure into its Vue Router configuration. Cool right? 😁

5. Data Fetching
With Nuxt's useFetch, useAsyncData, and $fetch composable functions, which are built into the framework, you can make API calls to fetch data in both browser and server environments within your application.

6. State management
Nuxt uses a robust state management library internally to handle state. You can access state it using its useState composable. For more info visit

7. Deployment
Nuxt is built to be compatible with various environments, including Node.js servers, serverless setups, and edge environments. To deploy your Nuxt application, you can run nuxt build, which will generate an output directory named .output.

And there you have it—my top 7 reasons why you should consider using Nuxt. For more information or to start using Nuxt, visit nuxt.com.

Build and Deploy Images on AWS ECR Using Github Workflow Action

Kenechukwu Josiah — Tue, 30 Jan 2024 20:22:16 +0000

In this article, I'll guide you on deploying container images to AWS ECR using the GitHub workflow action. You don't have to possess advanced expertise in DevOps or AWS; a basic understanding of GitHub, AWS cli, and container building (docker) is all that's required. That being said, let's get started.

Steps

Setup a github repo and push code to repo
Configure AWS Cli
Create an ECR Repo
Add a Github Secret
Setup Github Workflow
Test 🥳🥳

Step 1: Setup a github repo and push code to the repo:

I will be using a mini Python project for demonstration. Feel free to either pull the existing project or create your own, ensure that Docker is initialized and configured.

Step 2: Configure AWS Cli

Ensure that you have set up AWS CLI on your local machine. Please note that configuring AWS is necessary to create our ECR repository directly from the terminal.

Running the command aws configure will prompt you to input your AWS Access Key ID, AWS Secret Access Key, and region.

Step 3: Create ECR Repo



aws ecr create-repository \
    --repository-name demo-repository \
    --region us-east-1

You should get a response like this



{

    "repository": {

        "repositoryArn": "arn:aws:ecr:us-east-1:782020064947:repository/demo-repository",

        "registryId": "782020064947",

        "repositoryName": "demo-repository",

        "repositoryUri": "782020064947.dkr.ecr.us-east-1.amazonaws.com/demo-repository",

        "createdAt": "2024-01-30T20:02:18.973000+01:00",

        "imageTagMutability": "MUTABLE",

        "imageScanningConfiguration": {

            "scanOnPush": false

        },

        "encryptionConfiguration": {

            "encryptionType": "AES256"

        }

    }

}

Step 4: Add Github Secret

Go to the settings of your GitHub repository and input your AWS keys. Trust me, it's crucial to keep them confidential and not expose them for security reasons! 😁

Step 5: Setup Github Workflow

In this step, you are required to create a .github/workflows directory in the main working project folder. Subsequently, create a yaml file within this directory where we will define our workflow for deploying to AWS ECR. I called mine docker-ecr-workflow.yaml.

This workflow gets triggered each time there's a pull request to the main branch and can also be manually triggered. It comprises two jobs, namely "test" and "build." Within the "build" job, there are four steps designed to handle code checkout, AWS credential configuration, logging into ECR, and building or pushing our Docker image. Do well to customize the workflow to suite your need.

Ensure that your IAM user account has the required ECR policy attached; otherwise, you won't be able to proceed.



name: Docker Image ECR Deployment

on:

  workflow_dispatch:

  pull_request:

    branches:

      - main

env:

  PYTHON_VERSION: "3.9"

jobs:

  test:

    runs-on: ubuntu-latest

    steps:

      - name: Test Code

        run: echo "Testing done....."

build:

    runs-on: ubuntu-latest

    continue-on-error: false

    steps:

      - name: Checkout code

        uses: actions/checkout@v3

  - name: Configure AWS Credentials
    uses: aws-actions/configure-aws-credentials@v4
    with:
      aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
      aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      aws-region: us-east-1

  - name: Login to Amazon ECR
    id: login-ecr
    uses: aws-actions/amazon-ecr-login@v2

  - name: Build, tag, and push docker image to Amazon ECR
    env:
      REGISTRY: ${{ steps.login-ecr.outputs.registry }}
      REPOSITORY: demo-repository
      IMAGE_TAG: ${{ github.sha }}
    run: |
      docker build -t $REGISTRY/$REPOSITORY:$IMAGE_TAG .
      docker push $REGISTRY/$REPOSITORY:$IMAGE_TAG

Finally!!!!!! Lets Test 🥳🥳🥳🥳🥳

You have the option to manually initiate your workflow or create a pull request to the main branch for the building and deployment of your image. I appreciate your reading until this stage!

Our workflow successfully ran!!!

Now navigate to your AWS ECR dashobard to view your newly deployed image

DEV Community: Kenechukwu Josiah