DEV Community: Dileepa Mabulage

Uploading Images to a Sails.js Server: A Quick Guide

Dileepa Mabulage — Mon, 18 Sep 2023 05:01:07 +0000

Hi All,

Greetings everyone! In this comprehensive guide, we will walk you through the process of uploading image files to a Sails.js server, deploying the application on Render.com, and accessing the uploaded images via the deployed URL. So, let’s dive right in!

1. Setup the Sailsjs server

Install Sails

To kick things off, install Sails by running the following command:

npm install sails g

Create your app

Generate a new Sails app by navigating to your desired directory and executing:

sails new test-project --no-frontend

For our purposes, we’re focusing solely on the server component.

Configure Sailsjs routes

Run this command in the CLI

sails generate action image-upload

Run the following command in your CLI to create a controller file in the api/controllersfolder:

Within the image-uplod.js` file, add the following input configuration after the description:

images: {
type: 'ref',
description: 'Uploaded file stream',
required: true,
},

After the description add this.

files: ['images'],

Following this, add the ‘files’ property with ‘images’ as the value, indicating that this controller will handle image uploads.

Add this try-catch block inside fn to check the API is working.

try {
return exits.success("Success Response");
} catch (error) {
return exits.error(error);

}
Now the image-upload.js file will look like this.

module.exports = {
friendlyName: "Image upload",

description: "",

files: ["images"],

inputs: {},

exits: {},

fn: async function (inputs, exits) {
try {
return exits.success("Success Response");
} catch (error) {
return exits.error(error);

}
},
};
Update the startscript in package.json to the following and then install cross-envusing npm i cross-env

"start": "cross-env NODE_ENV=production node app.js",
Update the sockets inside of the config/env/production.js

onlyAllowOrigins: [
'http://localhost:3000'
],
Otherwise you can use sails lift it to up the server.

Setup the routes inside config/routes.js

setup the route as http://localhost:1337/api/v1/image-upload

module.exports.routes = {
  'POST /api/v1/image-upload': 'image-upload'
};

Re-run the server and make a POST API request to the http://localhost:1337/api/v1/image-upload endpoint using Postman.

Configure Image Upload Code

Now our route is working perfectly.

Install the skipper npm npm i skipper and enable it inside the config/http.js . Add the maxTimeToBuffer image size limit settings to the bodyParserconfiguration, like this. max limit is restricted uploading files over 10 MB.

bodyParser: (function _configureBodyParser(){
var skipper = require('skipper');
var middlewareFn = skipper({ strict: true, maxTimeToBuffer: 1000000 , limit: '10mb' });
return middlewareFn;
})(),
Navigate to image-upload.js and add the inputs section to specify image handling:

inputs: {
images: {
type: 'ref',
description: 'Uploaded file stream',
required: true,
},
},

Replace the try-catch block within the fn function with code to handle image uploads:

  try {

       inputs.images.upload(
        {
          dirname: require('path').resolve(
            sails.config.appPath,
            'assets/images',
          ),

        },
        (err, uploadedFiles) => {
          if (err) {
            return this.res.serverError(err)
          };

          return exits.success({
            message: uploadedFiles.length + ' file(s) uploaded successfully!',
            files: uploadedFiles,
          });
        },
      );


    } catch (error) {
      return exits.error(error);      
    }

All the uploaded images will be saved in the assests/iamges folder.

Finally, image-upload.js the file looks like this.

module.exports = {

  friendlyName: "Image upload",

description: "",

files: ["images"],

inputs: {

    images: {

      type: 'ref',

      description: 'Uploaded file stream',

      required: true,

    },

  },

exits: {},

fn: async function (inputs, exits) {

    try {

   inputs.images.upload(
    {
      dirname: require('path').resolve(
        sails.config.appPath,
        'assets/images',
      ),

    },
    (err, uploadedFiles) =&gt; {
      if (err) {
        return this.res.serverError(err)
      };

      return exits.success({
        message: uploadedFiles.length + ' file(s) uploaded successfully!',
        files: uploadedFiles,
      });
    },
  );


} catch (error) {
  return exits.error(error);      
}



},

};

Image upload to server

Re-run the server and make a POST request with image form data using Postman.

Ensure you set the key type to filein the form data. You can select one or more images for upload.

We will receive 200 responses and images will be uploaded inside the assest/images folder with unique names.

To assign custom names to uploaded images, add the following code segment inside the upload method:

saveAs(file, cb) {
let ext = file.filename.split('.').pop();
cb(null, ${file.filename}_${Date.now()}.${ext});
},

{
dirname: require('path').resolve(
sails.config.appPath,
'assets/images',
),
saveAs(file, cb) {
let ext = file.filename.split('.').pop();
cb(null, ${file.filename}_${Date.now()}.${ext});
},
},

This will result in images having custom names.

We have finished the image upload section.

Make sure to rerun the server everytime after changing the code, otherwise install nodemon npm i nodemon and run nodemon app.js nodemon will catch the code changes and automatically rerun the server.

Access uploaded images via the URL

Edit .sailsrc and add the public path:

"paths": {
"public": "assets"
}

Re-run the server and access the images via URLs like:

http://localhost:1337/images/${image_name_with_extension}

examples:-
http://localhost:1337/images/user.png_1694411326047.png
http://localhost:1337/images/c91d3cf8-9018-4aa1-86f8-499b22e3ba84.png

2. Deploy the Web Application in Render

Add assets/** to .gitignore folder.
Update the package.json , add a new build script.

"scripts": {
"start": "cross-env NODE_ENV=production node app.js",
"build": "npm install",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "./node_modules/eslint/bin/eslint.js . --max-warnings=0 --report-unused-disable-directives && echo '✔ Your .js files look good.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo"
},

3 . Initialize the git repository and push the code to git.

Create an account https://render.com and create a web service.

Build and deploy from a Git repository.
Configure your account choose the correct GitHub repository and connect.
Configure the web app.

Set up your web app configuration, choosing a free instance.
Create the web service, and you’ll see the deployment terminal in action

Monitor the progress on the Render.com dashboard.

Once the deployment is successful, you’re ready to proceed!

Upload images to the deployed web app

Copy the deployed web app URL.

Replace the Postman localhost URL with this new URL and make a POST request to upload images.

You should receive a successful API response, indicating the images have been uploaded.

To view the uploaded images via the URL

Retrieve the image names from the response files and append them to the server URL to access the images.
URLs will resemble:

https://sailsjs-image-upload.onrender.com/images/${image_name_with_extension}

examples:-
https://sailsjs-image-upload.onrender.com/images/user.png_1694418912994.png
https://sailsjs-image-upload.onrender.com/images/user.png_1694418912996.png

Congratulations! You’ve successfully set up image uploading in your Sails.js server, deployed the application on Render.com

Thank You….

You can find the code Repository URL

Want to see what I am working on? Check out my GitHub

Want to connect? Reach out to me on LinkedIn

Creating AWS CloudWatch Logs using .NET Console Application: A Step-by-Step Guide

Dileepa Mabulage — Fri, 10 Mar 2023 03:57:10 +0000

Welcome to a comprehensive guide on creating AWS CloudWatch Logs using a .NET Console Application. In this article, we will go through the process of setting up CloudWatch and logging events from a .NET Console Application. Whether you are new to AWS or a seasoned user, this guide will provide you with a clear understanding of how to monitor and manage your application logs in the AWS Cloud. Let’s get started!

Create IAM Client in AWS
Generate IAM Client Credentials
Configure AWS CloudWatch
Create .Net Console Application
Add appsettings.json file
Access values inside appsettings.json file
Configure AWS Cloudwatch in Console App
CloudWatch Log Stream

1. Create IAM Client in AWS

Identity and Access Management (IAM) is a web service for securely controlling access to Amazon Web Services services. With IAM, you can centrally manage users, security credentials such as access keys, and permissions that control which Amazon Web Services resources users and applications can access.

Login to amazon with credentials
From home select your preferred region

An AWS region is a cluster of data centers in a specific geographic area, such as the Northeastern United States or Western Europe. It is advisable to choose a region that is geographically close to users. This reduces latency because the data reaches the users more quickly.

Go to IAM Services page

Select Users from the left Access management panel
Click Add Users
Enter username => Next
Select Attach Policies Directly in Permission Options
Select CloudWatchFullAccess from Permission Policies

Next => Create User

Now you can see the created IAM User

2. Generate IAM Client Credentials

Click on the created IAM user
Navigate to security credentials

Scroll down to Access Keys

Create access key => select other => Next

Create an access key
Copy both the access key and the Secret access key for later use

Done

3. Configure AWS CloudWatch

CloudWatch Logs enable you to centralize the logs from all of your systems, applications, and AWS services that you use, in a single, highly scalable service. You can then easily view them, search them for specific error codes or patterns, filter them based on specific fields, or archive them securely for future analysis.

Navigate CloudWatch in AWS Services
Go to Log groups in the left panel (Make sure you have selected the correct AWS region)

Click on create Log group

A CloudWatch Log Group is a container for log streams, which are collections of log events that share the same source. For example, you could create a log group for logs generated by an application, and then create separate log streams for each instance of the application.
Enter a suitable name and set the expiry date

Create

Go to Log Group
Create a Log Stream

A CloudWatch Log Stream is a sequence of log events that share the same source. Within a log group, each log stream has a unique name and stores events independently. You can view and search the log events in a stream, set up alarms to be triggered by specific patterns in the log data, and export the log data to other services for further analysis.

Enter log Stream Name => create

4. Create .Net Console Application

Open Visual Studio
Create a new project => Select the console app

Next => Enter Project name => Next => .Net 6.0 => Create

5. Add appsettings.json file

The “appsettings.json” file in .NET projects is used to store configuration settings for an application. It allows you to store key-value pairs that represent various configuration options such as database connection strings, API keys, and other application-specific settings.

Right-click on testAwsConsoleApp => Add => New item

Search json in the search box

Select json file and set the name to appsessings.json => Add
Add this code to appsettings.json file



    {
      "Client_id": "<your client Id>",
      "Client_secret": "<Your client secret>",
      "LogGroupName": "<Log group name>",
      "LogStreamName": "<Log stream name>",
    }

Click appsettings.json file on the solution explorer and set its Copy to Output Directory value to Copy always

6. Access values inside appsettings.json file

Go to Program.cs file
Remove all the sample code
Paste this code



    using Microsoft.Extensions.Configuration;

    namespace testAwsConsoleApp
    {
        class Program
        {
            static void Main(string[] args)
            {
                IConfigurationBuilder configBuilder = new ConfigurationBuilder().AddJsonFile("appsettings.json");
                IConfiguration configuration = configBuilder.Build();
                Console.WriteLine(configuration["Client_id"]);
            }
        }
    }

Install these Nuget packages from Nuget package manager

Run the program Ctrl + F5 or green triangle on the top

Now we can access the appsettings.json values from our code

7. Configure AWS Cloudwatch in Console App

Create a new c# class AWSCloudWatch.cs

Select the class and set the name to AWSCloudWatch.cs
Add

Install this Nuget package

Paste this code in AWSCloudWatch.cs > In RegionEndpoint make sure you select the accurate region in which you create the log group and log stream



    using Amazon.CloudWatchLogs;
    using Amazon.CloudWatchLogs.Model;
    using Microsoft.Extensions.Configuration;

    namespace testAwsConsoleApp
    {
        public class AWSCloudWatch
        {
            private readonly IConfiguration _configuration;
            private static System.Timers.Timer aTimer;

            public AWSCloudWatch(IConfiguration configuration)
            {
                _configuration = configuration;
            }

            public void TimerStart()
            {
                Console.WriteLine("\nPress the Enter key to exit the application...\n");
                Console.WriteLine("The application started at {0:HH:mm:ss.fff}", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));

                aTimer = new System.Timers.Timer(4000); // method executes every 4 seconds
                aTimer.Elapsed += (s, e) => CloudWatchLog();
                aTimer.AutoReset = true;
                aTimer.Enabled = true;
                Console.ReadLine();
                aTimer.Stop();
                aTimer.Dispose();
                Console.WriteLine("Terminating the application...");

                while (Console.Read() != 'q') ;

            }

            public async void CloudWatchLog()
            {
                try
                {
                    var credentials = new Amazon.Runtime.BasicAWSCredentials(_configuration["Client_id"], _configuration["Client_secret"]);

                    var config = new AmazonCloudWatchLogsConfig
                    {
                        RegionEndpoint = Amazon.RegionEndpoint.APSoutheast1
                    };

                    var logClient = new AmazonCloudWatchLogsClient(credentials, config);

                    await logClient.PutLogEventsAsync(new PutLogEventsRequest()
                    {
                        LogGroupName = _configuration["LogGroupName"],
                        LogStreamName = _configuration["LogStreamName"],
                        LogEvents = new List<InputLogEvent>()
                        {
                            new InputLogEvent()
                            {
                                Message = "error message from console app",
                                Timestamp = DateTime.UtcNow
                            }
                        }

                    });
                    Console.WriteLine("Logging successfull");
                }
                catch (Exception e)
                {
                    Console.WriteLine(e.Message, "Error occured");
                }

            }
        }
    }

Here we created a timer for cloud watch log execution and set the log as error message from console app . The timer calls the CloudWatchLog function every 4 seconds.

And you can set up custom error messages as well as API call error messages as InputLogEvent message. So you can log the API error messages to AWS cloudwatch.

Complete Program.cs code



    using Microsoft.Extensions.Configuration;

    namespace testAwsConsoleApp
    {
        class Program
        {        
            static void Main(string[] args)
            {
                IConfigurationBuilder configBuilder = new ConfigurationBuilder().AddJsonFile("appsettings.json");
                IConfiguration configuration = configBuilder.Build();

                var cloudwatchParam = new AWSCloudWatch(configuration);

                cloudwatchParam.TimerStart();
            }

        }
    }

Run the program

8. CloudWatch Log Stream

Navigate to your cloud watch log stream

These are all the logs that we send from .Net console application

Source Code

Github

Thank you….

Access Azure KeyVault Secrets Through Nodejs Application

Dileepa Mabulage — Mon, 30 Jan 2023 04:27:16 +0000

Azure Key Vault is a cloud-based service that allows users to securely store and manage sensitive information, such as passwords, keys, and certificates. This allows for a more secure and efficient way to manage and access sensitive information in a cloud environment.

In this article, we will discuss how to access these secrets through a Node.js application. We will cover how to set up an Azure Key Vault, how to authenticate with it, and how to retrieve and use the secrets in your application. By the end of this article, you will have a better understanding of how to use Azure Key Vault to secure and manage your application's sensitive information.

Table of Contents

Create Nodejs server
Create Azure Key Vault
Add secrets to key Vault
Add secrets from CLI
Register app in Azure Active Directory
Add Access Policies to key Vault
Reveal secrets in Nodejs application

1. Create Nodejs server

Create the directory and run npm init -y in the command prompt
Open that directory in VSCode using typing code . in the command prompt
Open vs code terminal and install the following

npm install express --save 
npm install nodemon --save-dev

Nodemon is a tool that automatically restarts a Node.js application when changes are made to the code. This can save developers time and effort by eliminating the need to manually stop and start the application each time a change is made.

Create an index.js file and paste the following code

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

In your terminal (which should be in the project directory), type nodemon index.js and hit the Enter button.

Open a new tab in postman or any web browser and the address bar, type http://localhost:3000, and hit the Enter button

Now the Node server is up and running...

2. Create Azure key vault

Sign in to the Azure portal at https://portal.azure.com
To set up a Key Vault in Azure:
Open the Azure portal and select "Create a resource" from the menu or Home page.
Search for "Key Vault" and select it from the results.
Click on "Create" in the Key Vault section.
In the "Create key vault" section, enter a unique name for the vault (e.g. "nodejsazurekeyvault") A vault's name must be between 3-24 alphanumeric characters. The name must begin with a letter, end with a letter or digit, and not contain consecutive hyphens, select a subscription and create a new resource group.
Pick a location and keep the other options unchanged.
Click on "Create" to finalize the setup.

3. Add secrets to key Vault

Click secrets in the left panel
Click Generate/Import at top of the page
Add a secret name, and value
Toggle enables to yes
Click Create

4. Add secrets from CLI

Install Azure CLI Download
Run these commands in the PowerShell window

az login

az keyvault secret set --vault-name "<your-unique-keyvault-name>" --name "MultilineSecret" --file "secretfile.txt"

5. Register the app in Azure Active Directory

Navigate to Azure Active Directory
Click App registrations on the left panel
Click New Registration
Enter the app name and platform to Web
Register

Click certificates and secrets
New client's secret
Add a description and set the expiry date
Add
Copy the value and keep it for future

6. Add app to key Vault

Navigate to the Key Vault
Click Access Policies in the left panel

If access policies don't appear. Navigate to access configuration and select vault access policy. And apply.

Create
Select Secret Management from the template dropdown

Next
Select keyvaultapp

Next
Create

7. Reveal secrets in Nodejs application

Go to index.js
Open vs code terminal and install the following

npm install @azure/identity
npm install @azure/keyvault-secrets
npm install dotenv

Create a .ENV file and add the following code

KEYVAULT_URI=<"key vault URL">
AZURE_TENANT_ID=<"registered app in azure active directory">
AZURE_CLIENT_ID=<"registered app in azure active directory">
AZURE_CLIENT_SECRET=<"previously copied value">

Add this code to index.js

require("dotenv").config();
const { DefaultAzureCredential } = require("@azure/identity");
const { SecretClient } = require("@azure/keyvault-secrets");
const credential = new DefaultAzureCredential();
const client = new SecretClient(process.env.KEYVAULT_URI, credential);

Create a separate route and add this code (single line secret)

app.get("/secret", (req, res) => {
  client
    .getSecret("testsecret")
    .then((data) => {
      res.send(data.value);
    })
    .catch((error) => {
      console.log(error);
      res.send(error);
    });
});

In your terminal (which should be in the project directory), type nodemon index.js and hit the Enter button.
Open a new tab in postman or any web browser and the address bar, type http://localhost:3000/secret, and hit the Enter button

Create a separate route and add this code (multi-line secret)

app.get("/multilinesecret", (req, res) => {
  client
    .getSecret("MultilineSecret")
    .then((data) => {
      const parsedSecret = JSON.parse(data.value);
      res.json(parsedSecret);
    })
    .catch((error) => {
      console.log(error);
      res.send(error);
    });
});

In your terminal (which should be in the project directory), type nodemon index.js and hit the Enter button.
Open a new tab in postman or any web browser and the address bar, type http://localhost:3000/multilinesecret, and hit the Enter button

Complete Code

const express = require("express");
const app = express();
const port = 3000;

require("dotenv").config();
const { DefaultAzureCredential } = require("@azure/identity");
const { SecretClient } = require("@azure/keyvault-secrets");
const credential = new DefaultAzureCredential();
const client = new SecretClient(process.env.KEYVAULT_URI, credential);

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.get("/secret", (req, res) => {
  client
    .getSecret("testsecret")
    .then((data) => {
      res.send(data.value);
    })
    .catch((error) => {
      console.log(error);
      res.send(error);
    });
});

app.get("/multilinesecret", (req, res) => {
  client
    .getSecret("MultilineSecret")
    .then((data) => {
      const parsedSecret = JSON.parse(data.value);
      res.json(parsedSecret);
    })
    .catch((error) => {
      console.log(error);
      res.send(error);
    });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Source Code

GitHub

Thank you.