DEV Community: Manjunath

How We Cut Our AI Costs by 80%—Without Losing Quality

Manjunath — Wed, 26 Mar 2025 11:28:29 +0000

When you run a startup, watching your burn rate is as critical as breathing. At CodeDesign.ai, our AI-powered website builder, we found ourselves staring at a monthly AI bill that reached a painful $800.

We weren't doing anything unusual to be honest, but we have a free tier - and most of our cost came at maintaining that free tier. For a bootstrapped founder like myself, every dollar matters, and spending almost a grand monthly just on AI didn't feel right.

🚗 Our Journey Through AI Providers

We've tried almost every AI service out there. GPT-4o had been our go-to for months—powerful, usually reliable, but undeniably expensive. We experimented briefly with Claude, but quickly hit their restrictive Tier 1 limits to test further. Then we moved on to Deepseek. It was promising at first, but frequent downtime was frustrating. And back then they had limited support for tooling & function calling. I think that might no longer the case.

Then, last month, we decided to try Google's Gemini 2.0 Flash, and honestly—it was a breath of fresh air.

♊️ The Gemini Surprise

Gemini Flash surprised us. We initially expected a trade-off—cheaper, sure, but would it match GPT-4o's quality? To our delight, Gemini not only matched GPT-4o—it often exceeded it, especially in terms of responsiveness and overall reliability. Even more astonishing: our monthly bill plummeted from nearly $800 to just $60, an 80% cost reduction.

To put things into perspective, here's a quick cost comparison for leading AI models (approximate combined cost per million tokens, including both input and output):

We experimented with Claude Haiku and Gpt4o-mini, but conversions were subpar and the most of the worst feedback were collected for these two models.

💪🏼 Building a Robust Fallback System

Here's how we made it even better:

We built a simple but effective check algorithm that monitors the number of failed requests per minute. If Gemini Flash experiences any hiccups and the error rate exceeds our threshold, the system automatically switches requests first to Claude (which, despite its limits, works as a reliable backup), and then—if Claude also struggles—falls back to GPT-4o.

This backup system has been flawless, ensuring near-perfect uptime without manual intervention. And thanks to Gemini's impressive reliability, these fallback triggers are rarely activated. We've only seen it kick in a handful of times during traffic spikes, which gives us incredible peace of mind.

Lessons for Other Startups 👀

For anyone running AI-dependent services, here's a takeaway:

Switching to Gemini Flash was one of the best decisions we've made.
We didn't just cut costs—we enhanced reliability and improved our user experience.
It feels almost too good to be true (don’t tell Google we said that!).

My feedback for Google:

Gemini Pro’s limits are tight, and we'd love to see those expanded.
Their current quota system works for us now, but as we scale, I hope they grow with us.

The Bottom Line: Lean Without Compromise

To sum it up, running lean is vital for startups, and sometimes the answer isn't scaling back on quality or features but looking carefully at your tools. AI doesn't have to break the bank, and with the right approach, you might just find a gem (pun absolutely intended).
Have you had similar experiences optimizing your AI expenses? I'd love to hear about your strategies! Drop a comment below or reach out—I'm always game to swap cost-saving hacks with fellow founders in the trenches.

Vector Search & Code Embeddings: Building a Smart Knowledge Base with LangChain and FAISS

Manjunath — Sun, 09 Mar 2025 08:10:58 +0000

Hey dev.to community! 👋

Last few months, I've been working on an open-source project called Intervo.ai—a voice agent platform for building interactive voice experiences.

Early on, I faced a common issue: How can I build a smart, queryable knowledge base from tons of unstructured data? Enter the world of Vector Search, Embeddings, LangChain, and FAISS.

In this detailed guide, I'll share exactly how I built this, some mistakes I made (hint: starting with JavaScript wasn't my brightest idea), and comprehensive Python code you can use immediately. We'll go from basic setup all the way through to advanced usage.

What is LangChain?

LangChain is a robust framework designed to simplify developing AI-powered applications. It handles complex workflows involving language models, embeddings, context management, and integration with various vector databases. Essentially, LangChain removes the headache of manually wiring up components so you can focus on the interesting part—building your application logic.

I initially started with LangChain.js, hoping to leverage my JavaScript expertise. But I soon realized that there is limited documentation and fewer features compared to its Python counterpart. I then decided to switch to Python. This turned out to be the right decision—Python's ecosystem around LangChain is richer, better maintained, and supported by extensive community examples.

Quick Primer: Understanding Vectors and Embeddings

Vector embeddings are numerical representations of data (e.g., code snippets, documents, user queries) that capture the semantic meaning. These vectors position similar data points closer in vector space, making similarity searches efficient and accurate.

FAISS (Facebook AI Similarity Search) is an optimized vector database library designed for high-performance similarity searches. It efficiently manages millions of vectors, making it ideal for both prototyping and scaling production apps.

Step-by-Step Setup

Step 1: Setting up Your Python Environment

First, create and activate your Python environment. Then, install the necessary packages:

pip install langchain faiss-cpu openai python-dotenv

Package Breakdown:

langchain: Manages chaining of language models, embedding generation, and simplifies integration with vector stores.
faiss-cpu: Provides lightning-fast similarity search capabilities optimized for CPU.
openai: Enables easy interaction with OpenAI's API to generate embeddings.
python-dotenv: Conveniently manages environment variables like API keys.

Your requirements.txt:

langchain
faiss-cpu
openai
python-dotenv

Step 2: Create an Environment File

Save your OpenAI API key securely in a .env file:

OPENAI_API_KEY=your_openai_api_key_here

Building Your RAG Service

Understanding the Components:

Trainer: Prepares your data by splitting it into semantic chunks, embedding these chunks, and storing them in FAISS.
Query: Retrieves the most relevant data chunks based on user queries by leveraging similarity search.

Chunking Strategy

Effective chunking ensures optimal results from vector searches. LangChain's RecursiveCharacterTextSplitter splits text intelligently without breaking the semantic context, making it ideal for this task.

Here's the complete implementation:

import os
from dotenv import load_dotenv
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain.embeddings import OpenAIEmbeddings
from langchain.vectorstores import FAISS
from langchain.docstore.document import Document

load_dotenv()

class RagService:
    def __init__(self, embedding_model="text-embedding-ada-002"):
        self.text_splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=50)
        self.embeddings = OpenAIEmbeddings(model=embedding_model, openai_api_key=os.getenv("OPENAI_API_KEY"))
        self.vectorstore = None

    def train_from_string(self, input_string):
        document = Document(page_content=input_string)
        chunks = self.text_splitter.split_documents([document])
        self.vectorstore = FAISS.from_documents(chunks, self.embeddings)
        self.vectorstore.save_local("faiss_index")

    def query(self, query_text, top_k=5):
        if not self.vectorstore:
            self.vectorstore = FAISS.load_local("faiss_index", self.embeddings)

        results = self.vectorstore.similarity_search(query_text, k=top_k)
        return results

Practical Example Usage

Here's how you'd practically integrate and run the above class:

from rag_service import RagService

# Initialize the service
rag_service = RagService()

# Train your model with a detailed string input
training_data = """
React is a popular JavaScript library for building user interfaces. It manages state efficiently using hooks like useState, useEffect, and useReducer. Global state management can be handled through libraries like Redux, MobX, Zustand, or the built-in Context API.
"""
rag_service.train_from_string(training_data)

# Perform a query
query_result = rag_service.query("How do you manage global state in React?")

print("Relevant results:")
for result in query_result:
    print("-", result.page_content)

Running Your Example

Store your class in rag_service.py. Then execute the example by creating run_example.py with the provided script and run:

python run_example.py

Personal Reflection

Initially, I anticipated building a RAG service to be challenging, but the combination of LangChain and FAISS dramatically streamlined the process. Switching to Python from JavaScript was a pivotal moment that highlighted the importance of selecting the right tool ecosystem for your needs.

Through this journey, I realized the immense potential of embeddings and vector databases in creating responsive, intelligent systems that feel genuinely "smart".

A Subtle Plug for Intervo

If you’re excited about creating smart conversational systems or voice-enabled experiences, check out Intervo. It’s a soon-to-be-released open-source project aimed at simplifying the development of voice assistants and interactive voice-based applications.

Thank you for sticking with me through this detailed guide! I'm curious—how are you using vector databases or LangChain in your projects? I'd love to chat about your experiences or answer any questions you might have. 🚀

Best Practices of Agile Database Development

Manjunath — Mon, 08 Apr 2019 03:53:59 +0000

When done in the proper manner and with suggested methods, Agile Development can transform the delivery of systems. This allows users to receive what they require, much closer to when they need it.

Unfortunately, the training, resources and work practices related to databases tend to stick to less effective methods. These result in a more significant cost incurred to government and business organizations as well as giving database-derived products a bad reputation the market.

Even though a vast majority of application developers consider agile to be a mainstream approach, many developers specializing in databases, especially relational databases, have remained slower in adopting the agile methodology. This can be attributed mainly to the lack of understanding of the state of a database at the time of change deployment.

This has resulted in database professionals having to rely on manual processes that are unable to reach the level of agile when it comes to quicker developmental cycles.

Until database development processes, especially the development of relational databases includes SQL Server, Oracle, and DB2, do not scale up to a higher level, they will continue to be a bump in the road for otherwise agile organizations.

Eliminating such bottlenecks needs automated data pipelines that development teams can address risk areas, ensure a quality standard and fasten the development cycle of businesses altogether. To this end, here are some key areas to focus on when it comes to the development of Agile Databases.

Best Practices of Agile Database Development

Version Control

The role of version control is entirely different when it comes to cloud database development projects. However, it remains a meaningful way to track changes to data definition language (DDL) at each stage.

The ability to track revisions made to saved procedures and functions over time makes it simple when users need to assess or compare them against one another to identify and flag possible problems that may crop up during production.

Automated Testing

Manual testing is comprehensively slower than automated testing. Automated testing provides developers with a safety net when it comes to accelerating database deployments as automated testing offers an almost instantaneous assurance that modifications will work as intended.

Additionally, automation allows the execution of the process at the point of check-in. Developers are notified via immediate feedback whenever a break occurs and suggestions as to the best possible way to fix the problem and what the expected cost would be to troubleshoot the break.

Analysis of Static Code

In most cases, developers put their code through a peer review process. This is to make sure that the system they have developed has not missed a possible security vulnerability, miscalculated a logic or unintentionally slowed down the logic of the code.

Static code analysis allows the software in question to speed up the process significantly and makes sure that it is in line with specific standards set by the company. Static code analysis reads through the code and identifies similar patterns that peer developers are searching for.

Stage for Deployment

To reduce the danger of mishaps like loss of data, in most cases, the database development path includes a DBA in the deployment stage. This is to review the changes to code before when it goes into production.

While the process of automating the DBA stop may not always be a good idea, ensuring that the automation of the creation of ALTER scripts for deployment helps to save a valuable step when attempting to quicken the overall development cycle.

DBAs are used to manage the deployment path and can be utilized when attempting to automate tools that are used to collect the relevant queued changes, which have been passed through different regression tests as well as static code analysis. This is then compared to the respective production environment to generate the scripts that can then be used to commit them.

This improves DBA efficiency as well as shortens the development cycle. It also makes sure that the changes specified in the project make it through unscathed into the production stage.

Automation

As organizations move away from various manual processes in favor of automated tools, database development cycles begin to shrink while teams understand the advantages of agile.

The usage of different software tools in a systematic method makes the overall method much faster and more efficient with incremental improvements.

Don't Neglect Product Testing

In today's day and age, companies are often pushed to move products to the market. The competitive reasons for this focus are clear enough. However, the possible problems that may crop up as a result of a quick path to production of release versions may not be as clear as they should be.

Software that has been released without the due tests and checks may result in hiccups such as security flaws, poor quality as well as problems surrounding ease of use. Among the ways this can be circumvented include, the thorough testing of software and associated products before they are released to the market for general consumption.

Conclusion

Teams can very merely take advantage of Agile methods when it comes to the testing processes. As a report by the research company 'Frost & Sullivan' observed in May of last year, 'The software market is developing new products based in large part on IT trends like the rise in popularity of 'Big Data' and 'Internet of Things.' This is leading to a shift in the testing market. The concerned is expected to grow at a rate of 14% CAGR in the coming few years, thanks in large part to DevOps and Agile concepts.

When it comes to Agile, testing has been embedded within the development process. Software developers have been trained to develop tests before or side by side with the code they write. This ensures that the method of flagging and isolating the process is not overlooked. This is an especially aspect of testing given the dynamism of software product development.

Many different methods of software testing exist within Agile. These include Behavior Driven Development (BDD), Exploratory Testing, as well as Acceptance Test Driven Development. It is critical for concerned teams to understand how to choose the most appropriate method to meet the standards and requirement of their organization(s).

Similar to other areas within Agile, it is essential to have the right mapping in place when it comes to people and their roles and responsibilities throughout the different phases of the development lifecycle.

Where Agile has been implemented using the established best practices, Agile can result in -

An improved level of team collaboration
A close collaboration between development teams and end-users of the software
An increased likelihood of customer satisfaction with regards to the end product
An accelerated path of development for new software products and its features

5 Trends in Software Testing that You Should Know About

Manjunath — Wed, 27 Feb 2019 08:35:11 +0000

Modern web and mobile components are among the fastest and most frequently updated software packages for users as well as businesses. It, therefore, is in need of constant and steady testing before deployment.

While the benefit of automation in allowing teams to reduce the number of manual testing efforts and increase testing to ensure efficient operations, it also significantly reduces the number of repetitive processes that need to be performed manually.

During the last decade, there has been a lot of activity in the field of mobile computing, web development & AI. There has been an increased adoption of API architecture. Server-side logic are designed with the help of APIs making them accessible to the general public. Frontend code has seen a shift towards JavaScript-oriented platforms for both Mobile & Web.

Given that some details tend to vary with different stacks, this article attempts to list down some of the more general trends in software testing in 2018.

API and Microservices Test Automation

A microservice is necessarily a way to develop software specifically designed to test for pre-defined conditions. These types of services can be simulated, and when a connection is established between them, the complete task of testing can be categorized into different parts.

In this case, each service is designed in a manner to enable it to perform a particular set of tasks. This allows users and developers the freedom to modify a smaller area of the application where the change is required rather than modifying the whole system altogether. You can go with unit tests or a variant of integration tests for microservices because each service or API endpoint can be treated as an individual unit.

Adoption of Open Source Test Suites and Tools

Open source software tools are especially helpful for organizations, and trends indicate they are here to stay. There are a host of different advantages of making use of open source tools besides the cost aspect, as it is usually free for the public to use.

Open source software tools are easily customizable, much more flexible and are open to the general public. At the same time, as designers have a say in its design, users get to design it in a way they require while also allowing for multiple integrations with powerful test automation features.

Some of the commonly used AI/web & mobile development frameworks are built open-source components. Chances are, most of the test frameworks that you're using already are open-source.

An oft-discussed point though is the aspect of security vulnerabilities. As open source tools are, by definition, open to the public, but that doesn't make them strictly more secure than a proprietary alternative. However, it is also true that open source tools have multiple sets of eyes reviewing versions of code and, therefore, the chances of locating and fixing a potential bug increases substantially.

An increasing number of companies are accepting open source software services for executing the testing of their management, automation, DevOps and Agile tactics along with the responsibility of defect management. This has the potential to lead to the development and growth of open support communities for open source tools as they become increasingly active.

Shift-Left and Shift-Right Testing

When discussing quality software for DevOps processes, two essential parameters come to point –

Shift-Left Testing – When testing is a part of Continuous Integration or CI.
Shift-Right Testing – Where testing is expanded based on feedback received from users.

Shift-Left Testing

Shift-left testing is a scenario that is laid down during the testing of specific product features needed to meet the product acceptance criteria as well as the assumptions that are pending validation to meeting business acceptance criteria.

In simpler words, shift-left testing refers to defining tests prior to building the product features. Shift-left testing is essential for developing quality software with speed and efficiency.

Most organizations find it challenging to deploy a fresh patch for an application. Rigorous levels of testing need to be undertaken, either via functional or regression testing. This ensures that the patch update does not destabilize the existing system.

If testing begins earlier in the production cycle, teams are generally more concentrated on quality. This saves a lot of staff-hours and decreases the amount iterations needed during software development.

Shift-Right Testing

Though testing during the early stages of the application's lifecycle is essential, it is by no means enough. A continuous stream of feedback from users is as crucial and that is where shift-right testing comes in.

Some aspects are not always within a developer's or engineer's purview and can get forgotten. A ready to be deployed application cannot afford to have such a failure, and shift-right testing helps iron out these creases before an application is publicly deployed.

Shift-right testing allows for the usability and performance of an application to be monitored continuously. A tester should be aware of how users perceive the application even at the stage of information or requirement gathering. The focus here is to cover as much ground as possible during testing.

Quality Engineering over Quality Assurance

With the constant change in the world of software development, there is never-ending talking about new technology being floated in the market. Quality Assurance or QA is a process that follows a guided waterfall approach when it comes to software testing. It is a step by step process designed to make QA thorough but time-consuming.

This is part of the reason why QA is fighting a losing battle to keep pace with the ever-changing dynamics present in software testing. It is true that the QA process can also be a bottleneck at times when it comes to completing an application's development lifecycle.

Because of its natural step by step process, the QA process cannot proceed from one level to the other, until the previous phase (s) are completed and validated.

This is one of the prime reasons why a lot of QA processes and data pile up. When it comes to Quality Engineering, on the other hand, testing and automation can be brought in earlier in the process instead of at the final acceptance stage.

The improvement ideas for the QA process in 2018 couldn't be brought about without the latest developing trends in software development. As a simple rule, the better the UX, the higher are the chances for it being used as a System/Software Performance Engineering or SPE instead of Process testing.

Integrating Tests for Mobile Devices

Mobile apps are an integral part of an individual's day. Testing application isn't just about testing the app logic, there are other details that are identically important. For instance, you need to verify whether the UI & UX actions are rendered as expected and whether it's responsive. The sheer types of devices, number of updates to the app and the platform software play a part in increasing its complexity. Your options for testing a mobile app from an enterprise perspective includes:

Unit testing
UI testing
Fuzz testing
Performance testing
End-to-end testing
Pre-production testing
Canary (post-production) testing

You can read more about the 7 test scenarios on Medium.

As cost considerations and market readiness play a more critical role in times to come, mobile app testing automation should come into its own. Constant and continuous innovation is essential for consistent growth, and this is difficult to achieve without Continuous Testing using a combination of above-mentioned techniques. These platforms will assist developers and testers check for issues and bugs before the testing process.

Conclusion

The increasing penetration of mobile devices has resulted in quite a happy headache for app developers and QA testers. This growth comes hand in hand with newer technologies for software testing and the overall development in the mobile industry.

Testers need to enhance their skills continuously, entrepreneurs need to be guided by the best choice for their products and solutions and organizations need to give preference to a robust testing process. This is to ensure near perfect apps and solutions to customers and end-users.

The evolving testing trends will continue to ask questions and pose challenges to mobile testers and will continue to take development down the path of cost-efficiency and effectiveness. When combined with a sufficient amount of testing and technical expertise in this field, the software technologies to come in future should be best poised to provide in-depth and unbiased Quality Assurance.

React Basics – State, Props & Functional Components

Manjunath — Mon, 04 Feb 2019 14:39:25 +0000

Introduction

React is among the more popular front-end libraries in use today. However, beginners might find it hard to get started with the concept in React because they're different compared to traditional programming concepts like that of Java. Different aspects like how components work, component composition and hierarchy, state, props, and functional programming concepts need to be considered beforehand. This guide attempts to make things simpler by providing readers with an easy and simple way to start using React.

Setting up React

There are two popular ways to set up React. If you're looking to set up React real quick, you can use the one-page setup by including the scripts from unpkg.

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>

Otherwise, you can set up the React environment by running create-react-app:

npx create-react-app my-app

Alternatively, you can also use yarn. \

yarn create react-app my-app

Here is the structure of files created by yarn:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

To start your application, you'll need to run npm run start or yarn start.

Components

Components are the building blocks of a React application. You can build your entire application using just components. They are reusable and independent blocks of code. They're are two types of Components and the classification is popularly known under different names:

Class vs Functional Component
Smart vs. Dumb components
Container vs. Presentational components
Stateful vs. Stateless components

Although the components are known under different names, the basis of classification is relatively similar. Class components use ES6 classes whereas Functional components are based on JavaScript functions.

Since the central aspect of React is components, a better understanding of how to organize components in React is essential. We'll cover that in this article by defining the differences between functional components and class components. Here's a basic example that demonstrates the difference between them.

Replace the src/App.js with the following lines:

class App extends Component { \

render() { \ const message = `This is the App Component.`; \ return ( \ <div>{message}div> \ ); \ } \ }

The App component here is an ES6 class and hence we'll call them class components. It extends the Component class which is a part of the React API. It contains a 'render' method which comprises a return statement. Everything inside the return statement is rendered in the browser. You can render HTML elements or other components (read Composition Hierarchy).

If you remove the render method, React will throw an error because the class component needs to include a render method. However, other methods are optional. ReactDOM.render() renders the App component in a div element using the id 'root'.

But remember, this is not the only way that you can create components. You can also use functional components as follows:

function App(props){

const message = `This is the App Component.`; \ return <div>{message}div> \ }

So, the next obvious question is, what are props?

Props

Props refer to properties that are passed to child components by the parent components. For instance, if you need to pass a value from a parent component to a child component, you can pass them down as properties or props.

class App extends React.Component {
 render() {
  return <Child value="SOS" />;  
 }
}

class Child extends React.Component{
 render(){
  return <h3>The value passed from parent is {this.props.value}</h3>;
 }
}

You can replace the class component we created earlier with this functional component and it will appear just the same in the browser.

function Child (props) {
 return <h3>The value passed from parent is {props.value}</h3>;
 }
}

So, why do we have two different types of components when you can stick with just one? That's because class components have certain features that are bestowed upon them whereas functional components lack these features.

Functional Components

Functional components have very little baggage compared to the more popular class components. They're theoretically faster than class components, but that might not be relevant if you're running a small application with very limited components.

The drawbacks with Functional component is that you can't use the state and lifecycle hooks inside functional components. Instead, they're meant to be just presentational component without any logic of their own. Unlike class components, you can't also use componentDidMount and other similar lifecycle hooks. But instead, you can wrap a part of your web UI as follows:

const Button = props => (
   <button className="our_button" onClick={props.onClick}>
      {props.label}
   </button>
);

Here are a few good things about functional components:

They are reusable compared to class components
Functional components can potentially have a better performance
They're easy to debug

So, you can wrap your buttons, input fields etc. inside functional components and pass everything that's required by that component as props. However, certain other logic involves making API calls and then storing the result in the state. That's where class component come in handy.

Class Components

State

Similar to Props, the state also contains data, however, with a few differences.

Props contain data that are communicated by the parent component. On the other hand, the state contains private data that's local to the component. Unlike props which are read-only value, State is readable and writable by the component. It stores data that changes between different renderings of the component.

Here is an example -

class App extends React.Component {
 constructor(){
  super();
  this.state = {name :"Foo Bar"};
 }
 changeName(){
  this.setState({name : "Lorem Ipsum"});
 }

 render(){
  return (
   <div>
     <h3>Hello {this.state.name}</h3>
     <button type='button' onClick=this.changeName.bind(this)}>
      Save
     </button>
   </div>
  );
 }
}

As demonstrated in the example above, once a constructor is initialized, it can be used in a render method. Similar to props, the state can be accessed via the 'this.state' object. On clicking the Save button, users are able to change the value name of the state to their choosing. this.setState() takes care of updating the state.

setState()

this.setState() is a part of the React API that's used to modify the state. This is available in React Component by default and is pretty much the only way to change state. When an object is being passed as a parameter to setState, React asynchronously make changes to the state by modifying the keys that are passed to it. React will look at the passed object and will change only the provided keys of the state with the provided values.

Life Cycle Methods

React provides users with specific special methods known as Life Cycle Hooks. These life cycle hooks execute at specific times in the life cycle of a component. Fortunately, users have the ability to include their own functionality in these life cycle hooks. You can define lifecycle hooks inside the components to define what a component does when it mounts, receives new props, unmounts etc. Here are some examples of commonly used life cycle hooks.

componentDidMount()

Mounting refers to the time taken when the component is initially rendered in the browser. componentDidMount() executes after the component is mounted. This is a good place to fetch specific data or initiate anything.

Here is an example of the events that happen when a component mounts. \

Data gets fetched by making a call to a API endpoint
The response is being stored into the state using this.setState()

 componentDidMount(){
    componentDidMount() {
    fetch(API + DEFAULT_QUERY)
      .then(response => response.json())
      .then(data => 
         this.setState({ 
           person: 
               {
                name: data.name, age: data.age
               }
        })
     );
    }
 }

\

componentWillUnMount()

This gets executed just before the component unmounts. If you want to clear some global state (stored in Redux store) or remove some event listener, this should be the where your code goes.

For instance, if you've set up an event listener like for scroll, you can remove it as follows:

componentWillUnmount() {
       window.removeEventListener('scroll', this.onScroll, false);
   }

componentDidUpdate()

As the name suggests, componentDidUpdate() executes once the component is completely updated. This is where data changes and related modifications are handled. It may be possible that users may need to handle specific network requests, or perform calculations based on the changed data. In scenarios like this, componentDidUpdate() is the place to be.

Here is an example of this in action –

class App extends React.Component {
 constructor(){
  super(); 
  this.state = {
   person : {name : "" , age : ""}
  };
 }
 componentDidMount(){
    componentDidMount() {
    fetch(API + DEFAULT_QUERY)
      .then(response => response.json())
      .then(data => 
         this.setState({ 
           person: 
               {
                name: data.name, age: data.age
               }
        })
     );
    }
 }

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.person.name !== prevProps.person.name) {
    this.fetchData(this.props.name);
  }
}


 render(){
  return (
   <div>
    <p>Name : {this.state.person.name}</p>
    <p>Age : {this.state.person.age}</p>
   </div>
  );
 }
}

Our first state consists of two distinct properties, viz. name and age, Both of these have an empty string as value. In componentDidMount() users can set the state and modify the name as needed.

Final Words - Choosing the right component

So, how do you choose between functional components and class components? I usually start with functional components and then shift to class components if either state or component life cycles is required. If not, you can just stick with functional components.

You can use functional components for anything that doesn't require state or is meant to serve as a UI element. If it has complex logic, then you should probably fit it inside a class component.

Deploying An Express Application - 6 Best Practices for Improving Security

Manjunath — Sun, 30 Sep 2018 08:31:50 +0000

Deployment is the final phase of software development lifecycle when an application or an API is readily available to consumers and end users. Unlike the development phase where the application is in active development, once deployed, the application could be under potential risks because the endpoints are exposed.

The environments for both development and production generally have a different set up as they have distinct requirements. What is required at the development stage may not be essential when it comes to production. To take an example, in a development stage, a verbose log of errors to help in debugging efforts may have the highest priority, however, at the production stage, security concerns become a priority.

Similarly, at the development stage, scalability, performance or reliability are not areas that you need to address, however, these become critical at the production stage.

In this post, we'll address some of these issues and cover everything that you need know about deployment best practices.

Usage of Deprecated or Vulnerable Versions of Express

If you are still using Express 2.x or Express 3.x, you should know that these are no longer actively maintained or monitored. Therefore, it might not be best idea to use them. In case you have not already moved to version 4.0, you can follow the migration guide here.

Also, you need to make sure that you are not using any versions of Express that are known to be vulnerable. You can see these listed on the Security Updates page – If you are, you need to update to one of the latest stable releases.

Use TLS for Encryption

In case the app you are developing uses sensitive data, it is best to use Transport Layer Security or TLS. TLS can be used to secure your connection as well as data.

TLS encrypts data before it is transmitted from the client to the server. This prevents most common and easy hacks.

Given that Ajax and POST requests at times are not visibly obvious and may seem 'hidden' at the browser level, the network traffic they generate is open to packet sniffing as well as man-in-the-middle attacks. You may already be familiar with SSL encryption, however, TLS can be considered as a more advanced version. I

f you are already using SSL, you might want to consider upgrading to TLS. Our recommendation is that you use Nginx to handle TLS. As a reference you can have a look at- Another useful tool to acquire a free TLS certificate is 'Let's Encrypt' . This is a free, automated and open source certificate authority brought to you by the ISRG, Internet Security Research Group.

Use Helmet For Protection Against Vulnerabilities

Helmet is a handy tool when it comes to protecting your app from commonly known web vulnerabilities. Its safeguard is to ensure the most appropriate setting for HTTP headers.

Coming down to the basics, Helmet is not much more than a collection of 9 smaller middleware functions that define security related HTTP headers. These include –

Csp – Sets the content-security-policy header to assist in preventing cross-site script attacks and various other inter site injections
hidePoweredBy – This eliminates X-Powered-By header
Hpkp – This adds Public Key Pinning headers to prevent any man-in-the-middle attacks using various forged certificates
hsts – hsts sets Strict-Transport-Security headers which enforce secure connections to the server via HTTP over SSL/TLS.
noCache – noCache sets a Cache-Control and Pragma headers to disable any client facing caching
noSniff – This sets an X-Content-Type-Options that can prevent browsers from MIME-sniffing a response generated from a declared a content-type.
frameguard – frameguard sets the X-frame-Options header to allow for clickjacking protection
xssFilter – The xssFilter establishes a X-XSS-Protection that enables Cross-site scripting, or XSS, in the more recent web browsers.

To install Helmet, you can do it as with any normal module –

$ npm install -save helmet

After which, you can now use it in your code via –

// ...
var helmet = require( 'helmet' )
app.use(helmet())

// ...

The Safe Usage of Cookies

In order to make sure that cookies do no expose your apps to malicious attacks, it is recommended that you do not use a default cookie name. However, you can choose to set a predefined cookie security option. These are available in two broad middleware cookie session modules –

Express-session – This replaces express.session middleware built-in to Express 3.x
Cookie-session – This replaces express.cookieSession middleware built-in to Express 3.x

The differentiating factor between these two modules is the method in which they save data from cookie sessions. The Express-session middleware stores its session data onto the server. This saves only the session ID within the cookie and not the session data.

Unless programmed otherwise, the Express-session makes use of in-memory storage capabilities and not is best designed for production environments.

Contrasting the Express-session middleware, the cookie-session middleware makes use of cookie backed storage. It sterilizes the complete session within the cookie, instead of just producing a cookie key. It is advised that this is best used when session is relatively small and easy to encode.

Also, another flag, it is best to be aware that cookie data will be available to the client, therefore, if there is need any need for confidentiality, this is something to keep in mind.

Using the default session cookie name may be a bad idea

If you use the default session cookie name you open your app to attacks. The security flag is similar to X-Powered-By: a potential attacker that fingerprints servers and targets attacks accordingly.

To circumvent this problem, you can use generic cookie names like using express-session middleware:

var session = require('express-session')
app.set('trust proxy', 1) // trust first proxy
app.use(session({
  secret: 's3Cur3',
  name: 'sessionId'
}))

Options for setting cookie security

In order to enhance the security of the following cookie options, you can-

secure – Ensure that the browser only sends the cookie over HTTPS.
httpOnly – This ensures that the cookie is only sent via HTTP(S), and not client JavaScript. This assists in protecting against cross-site scripting attacks.
domain – This indicates the domain of the cookie. Domain can be used to compare against the domain of the host server from where the URL is being requested.
path – This indicates the path of the cookie. Path can be used it to compare against the request path. If there is match found between the path and domain fields, send the cookie in the request.
expires – This is used to specify the expiration date of repetitive cookies.

Below is an example of how a cookie-session middleware can be used:

var session = require('cookie-session')
var express = require('express')
var app = express()

var expiryDate = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
app.use(session({
  name: 'session',
  keys: ['key1', 'key2'],
  cookie: {
    secure: true,
    httpOnly: true,
    domain: 'example.com',
    path: 'foo/bar',
    expires: expiryDate
  }
}))

Avoid Identified Vulnerabilities and Other Securities Issues

As mentioned earlier, it is a good idea to monitor Node Security Project and Snyk updates that may impact the express package and other node modules that your application uses. There are resources that are excellent to stay abreast with the ever-evolving node security. Here are some of the generic security resources that you can use to keep up with the latest trends in security for your Application:

NPM's security blog - NPM's official blog is a great resource to keep yourself up to date with the NPM and Nodejs.
Exabeam's Security Blog - Exabeam's security blog focuses on incident reporting and the steps required to contain the surface area of the vulnerability.
RisingStack Blog - They have an impressive security checklist that you shouldn't miss if you are developing the server using Nodejs.

Ensure All Your Dependencies Are Secure

The usage of Npm to ensure that the dependencies of your application are both robust and convenient is the best you can hope for. However, most developers use packages that may, at times, contain critical security vulnerabilities which can have an adverse in your in-house application.

Since the release of npm@6, npm now automatically reviews each requested installation.

Additionally, you can also use 'npm audit' for analysis –

'$ npm audit'

If you would like to ensure a greater level of security, you can also consider using Snyk.

Snyk provides a command-line tool in collaboration with Github, that can provide audit services for your applications against known open source database vulnerabilities. You can install the CLI below:

$ npm install -g snyk
$ cd your-app
To check your application for vulnerabilities, you can use the following command - 
$ snyk test
You can implement the command below to open a wizard that will apply updates and patches to fix uncovered vulnerabilities as they are discovered:
$ snyk wizard

Summary

We've covered some of the best practices for creating an Express application. The common production phase security best practices include –

Avoid the usage of deprecated or vulnerable versions of express
Use TLS
Use Helmet package
Implement the cookies the safe way
Avoid known vulnerabilities
Ensure all your dependencies are secure & up to date

So, what are your thoughts on securing your Express application? Share them in the comments.