DEV Community: Ibukun Folay

Building a React App with AWS: A Beginner-Friendly Guide

Ibukun Folay — Mon, 20 Nov 2023 22:55:48 +0000

Are you excited to enhance your React app by tapping into the potential of Amazon Web Services (AWS)? In this guide, we'll take a walk through the process of integrating AWS services with your React application. Whether you're a newcomer or have some experience with React, this step-by-step manual is crafted to help you seamlessly incorporate the capabilities of AWS into your web projects.

Prerequisites

Before we dive in, ensure you have the following:

Node.js and npm are installed on your machine.
An AWS account. If you don't have one, you can sign up here.
Create a new React app using create-react-app:

npx create-react-app aws-react-app
cd aws-react-app

Setting Up AWS Amplify

 
Let's kick things off by installing the Amplify CLI and initializing our project. AWS Amplify is a suite of tools and services designed to empower front-end developers to build full-stack applications.

npm install -g @aws-amplify/cli
amplify configure

 
Follow the prompts to configure your Amplify project with your AWS account credentials.
 
Now, let's initialize the Amplify project within our React app.

amplify init

 
Answer the questions prompted by the CLI to configure your project. For simplicity, choose the default options.
 

Adding Authentication

 
AWS Cognito, a fully managed authentication service, will be our choice for integrating authentication into our React app.

amplify add auth

 
Configure user sign-up and sign-in preferences as prompted. Then, deploy the changes.

amplify push

Incorporating Storage with Amazon S3

 
Amazon S3, a scalable object storage service, will be used to store and retrieve files in our React app.

amplify add storage

 
Select "Content" as the type of storage and configure your storage bucket. Deploy the changes.

amplify push

Adding API Functionality with AWS AppSync

AWS AppSync simplifies the development of GraphQL APIs, handling the heavy lifting of securely connecting to data sources.

amplify add api

 
Choose "GraphQL" as the API type, configure your API, and deploy the changes.

amplify push

Integrating AWS Services into the React App

 
Now that our AWS services are set up, let's seamlessly integrate them into our React app.

Authentication Integration

 
In your src/index.js file, import and configure the Amplify library:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

 
Now, you can use the Amplify authentication module in your React components:

import { withAuthenticator } from 'aws-amplify-react';

function App() {
  // Your app logic here
}

export default withAuthenticator(App, { includeGreetings: true });

Storage Integration

 
For uploading and retrieving files from S3, use the following code:

import { Storage } from 'aws-amplify';

// Upload a file
Storage.put('example.txt', 'Hello, AWS!')
  .then(result => console.log('File uploaded:', result))
  .catch(err => console.error('Error uploading file:', err));

// Retrieve a file
Storage.get('example.txt')
  .then(result => console.log('File retrieved:', result))
  .catch(err => console.error('Error retrieving file:', err));

API Integration

 
To integrate API functionality, use the following example to fetch data from your GraphQL API:

import { API } from 'aws-amplify';

async function fetchData() {
  try {
    const data = await API.graphql({ query: /* your GraphQL query here */ });
    console.log('Data fetched:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// Call the function where needed
fetchData();

Conclusion

 
Congratulations! You've successfully integrated AWS services into your React app using AWS Amplify. This guide covered the basics of authentication, storage, and API functionality. As you continue developing your app, explore the AWS Amplify documentation for more advanced features and customization options.

Remember to adhere to coding best practices, such as organizing your code into modular components, handling errors gracefully, and optimizing for performance. Happy coding!

Build a Nodejs Server Using Firebase/Firestore (CRUD)

Ibukun Folay — Sat, 22 Apr 2023 09:42:57 +0000

Introduction

In this article we would be looking at how to build a node js server using firebase and firestore.
We would also be building the crud (Create, Read, Update, Delete) functionalities into our server.

Topics to look out for in this article

What is node js and firebase?
Setting up our project folder
Installing neccessary dependencies
Es6 setup (.babelrc)
Configuring firebase
Setting up config files
Create express server (index.js)
Building our model
Building crud functionalities (controllers)
Routes
Run server

What is node js and firebase?

Nodejs is an open-source, cross-platform JavaScript runtime environment and library for running web applications outside the client's browser. Nodejs is used for building asynchronous & event-driven model backend servers. If you don’t have node js installed on your local machine, you can download it here.

Firebase is a Backend-as-a-Service (BaaS) app development platform provided by google that hosts backend services such as a realtime database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files.
The service we would be using today from firebase is Firestore, which is the database provided by firebase. It is a no-sql document oriented database.

Setting up our project folder

Firstly, we have to create a folder, in my case i’ll call it node-firebase but feel free to name it whatever. This would be our root working directory.

Then in your terminal, run the following script:

Npm init -y

This should create a package.json file in the root of our folder.

Next, in the root of our project folder we need to create the following files:

index.js - this is the main file for our server
firebase.js - this is where the database connection is initiated
config.js - this contains all the necessary configuration to help maintain a clean working environment. I refer to this as the brain box file in any server.
.env - this contains all our environment variables

Also create the following folders in the root of your project folder:

Controllers
Models
Routes

Installing neccessary dependencies

Run the scripts below to install the needed dependencies:

npm install express cors dotenv firebase

npm install nodemon –save-dev

Using –save-dev installs our nodemon as a dev dependency

Es6 setup (babel)

This will enable us to use the es6 syntax in writing our code.

In our terminal we run the following script to install our babel packages as dev dependencies:

npm install @babel/core @babel/node @babel/cli @babel/preset-env –save-dev

after the dependencies are installed successfully, create a file .babelrc in the root of your project folder and add the code below:

{ "presets": [["@babel/preset-env"]] }

finally, in the package.json, add the line below:

"type": "module"

And we are good to go using the es6 syntax.

Setting up firebase

After our dependencies have been installed, we go to firebase console a follow the steps below:

Click on add project
Enter the name of the project
We can turn off analytics for this project.
Click create project
Click on the code button
Enter the name of the app and click on the register app button
Click on cloud firestore (to create database)
Click on setting and copy firebase configuration

Setting up config files

.env file

After sucessfully executing the steps above, in the root of your project folder, create a .env file and add the following code.

PORT=5000
HOST=localhost
HOST_URL=http://localhost:5000




#firebase config
API_KEY=””
AUTH_DOMAIN=””
PROJECT_ID=””
STORAGE_BUCKET=””
MESSAGING_SENDER_ID=””
APP_ID=””

Replace the strings with the firebase config details generated on your firebase console.

Config.js

Once you are done with the above, you can copy the code below into your config.js file in the root of your folder.

import dotenv from 'dotenv';
import assert from 'assert';

dotenv.config();

const {
  PORT,
  HOST,
  HOST_URL,
  API_KEY,
  AUTH_DOMAIN,
  PROJECT_ID,
  STORAGE_BUCKET,
  MESSAGING_SENDER_ID,
  APP_ID,
} = process.env;

assert(PORT, 'Port is required');
assert(HOST, 'Host is required');

export default {
  port: PORT,
  host: HOST,
  hostUrl: HOST_URL,
  firebaseConfig: {
    apiKey: API_KEY,
    authDomain: AUTH_DOMAIN,
    projectId: PROJECT_ID,
    storageBucket: STORAGE_BUCKET,
    messagingSenderId: MESSAGING_SENDER_ID,
    appId: APP_ID,
  },
};

Firebase.js

In the firebase.js file add the following code to initialize our database:

import { initializeApp } from 'firebase/app';
import config from './config.js';

const firebase = initializeApp(config.firebaseConfig);

export default firebase;

Create express server (index.js)

In the index.js file, add the following code:

import express from 'express';
import cors from 'cors';

import config from './config.js';

const app = express();

app.use(cors());
app.use(express.json());


app.listen(config.port, () =>
  console.log(`Server is live @ ${config.hostUrl}`),
);

If we run npm start our server should be up and running.

Building our model

Create a file named productModel.js in your model folder and add the code below:

class Product {
  constructor(id, name, price, retailer, amountInStock) {
    (this.id = id),
      (this.name = name),
      (this.price = price),
      (this.retailer = retailer),
      (this.amountInStock = amountInStock);
  }
}

export default Product;

Building crud functionalities (controllers)

Crud stands for Create, Read, Update and Delete. These are the foundations on which an api is built.

In the controllers folder, create a file named productControllers.js and add the following blocks of code respectively:

At the top :

import firebase from '../firebase.js';
import Product from '../models/productModel.js';
import {
  getFirestore,
  collection,
  doc,
  addDoc,
  getDoc,
  getDocs,
  updateDoc,
  deleteDoc,
} from 'firebase/firestore';

const db = getFirestore(firebase);

Create product function:

export const createProduct = async (req, res, next) => {
  try {
    const data = req.body;
    await addDoc(collection(db, 'products'), data);
    res.status(200).send('product created successfully');
  } catch (error) {
    res.status(400).send(error.message);
  }
};

Get all products function:

export const getProducts = async (req, res, next) => {
  try {
    const products = await getDocs(collection(db, 'products'));
    const productArray = [];

    if (products.empty) {
      res.status(400).send('No Products found');
    } else {
      products.forEach((doc) => {
        const product = new Product(
          doc.id,
          doc.data().name,
          doc.data().price,
          doc.data().retailer,
          doc.data().amountInStock,
        );
        productArray.push(product);
      });

      res.status(200).send(productArray);
    }
  } catch (error) {
    res.status(400).send(error.message);
  }
};

Get product by id:

export const getProduct = async (req, res, next) => {
  try {
    const id = req.params.id;
    const product = doc(db, 'products', id);
    const data = await getDoc(product);
    if (data.exists()) {
      res.status(200).send(data.data());
    } else {
      res.status(404).send('product not found');
    }
  } catch (error) {
    res.status(400).send(error.message);
  }
};

Update product by id:

export const updateProduct = async (req, res, next) => {
  try {
    const id = req.params.id;
    const data = req.body;
    const product = doc(db, 'products', id);
    await updateDoc(product, data);
    res.status(200).send('product updated successfully');
  } catch (error) {
    res.status(400).send(error.message);
  }
};

And finally, the delete product function:

export const deleteProduct = async (req, res, next) => {
  try {
    const id = req.params.id;
    await deleteDoc(doc(db, 'products', id));
    res.status(200).send('product deleted successfully');
  } catch (error) {
    res.status(400).send(error.message);
  }
};

Routes

In our routes folder, create a file named productRoute.js and code the file below to it:

import express from 'express';

import {
  createProduct,
  getProduct,
  getProducts,
  updateProduct,
  deleteProduct,
} from '../controllers/productController.js';

const router = express.Router();

router.get('/', getProducts);
router.post('/new', createProduct);
router.get('/product/:id', getProduct);
router.put('/update/:id', updateProduct);
router.delete('/delete/:id', deleteProduct);

export default router;

In order to get access to this route, we have to update our index.js file:

Import the product route file:

import productRoute from './routes/productRoute.js';

Initialize the route:

app.use('/api', productRoute);

Our final index.js should look like this:

import express from 'express';
import cors from 'cors';

import config from './config.js';
import productRoute from './routes/productRoute.js';

const app = express();

app.use(cors());
app.use(express.json());

//routes
app.use('/api', productRoute);

app.listen(config.port, () =>
  console.log(`Server is live @ ${config.hostUrl}`),
);

Run server

In order to run the our nodejs-firebase server;

We have to add the start command to our scripts in package.json:

"start": "nodemon index.js"

After this, in our terminal we can run the server command using:

npm start

You can now use postman to ensure your api’s are working fine and also see the created files in your firestore database.

Conclusion

At the end of this article, you should be able to create a working Nodejs server with firebase.

Here's a link to the source code on github.

Happy coding.

How to Build a Chrome Extension using React and Tailwindcss

Ibukun Folay — Tue, 11 Apr 2023 15:37:06 +0000

Here we would discuss how to create a basic chrome extension using React, Vite (bundler) and TailwindCss.

Things to look out for in this process

What are extensions?
Create react app
Setup tailwindcss for styling
Manifest.json
Building the extension

What are browser extensions?

According to wikipedia, a browser extension is a small software module for customizing a web browser. Browsers typically allow a variety of extensions, including user interface modifications, cookie management, ad blocking, and the custom scripting and styling of web pages.

Create React App

We can use the conventional create react app to setup our project folder, However, we would be using Vite.js to setup our project files.

Vite is a build tool created by Evan You, the creator of Vue. It allows for faster development thanks to super fast Hot Module Reload (HMR), fast cold start times, and CSS + JSX + TypeScript support out of the box. Click here to read more

We can run either of the following commands to setup our project folder:

Using create-react-app



npx create-react-app my-app --template chrome-extension-app

Using Vite



npm create vite@latest chrome-extension-app -- --template react

After running the create vite command successfully, you should see a few commands as shown below:

Run the above commands to get your server started.

This is what your project folder should look like.

Set up Tailwind Css

Run the following commands in the root of the project folder:



npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

To get tailwind working we need to update the tailwind.config.js file in the root of the project folder



/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Finally, add the following at the top of src/index.css file



@tailwind base;
@tailwind components;
@tailwind utilities;

The Manifest.json

For our extension to work,we must update the manifest.json file. Vite does not come with a manifest.json file in the template, so we can create one in the public folder.

After creating the file, add the following lines of code:



{
  "name": "First Extensions",
  "description": "Basic Chrome Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "My first extension"
  },
  "icons": {
    "16": "react.png",
    "48": "react.png",
    "128": "react.png"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Default_popup: is the target file we want to render when our extension is loaded

Default_title: is the tooltip display that tells the user what we will see when the extensions opened

By default, Create React App will embed the runtime script into index.html during the production build. This is done to limit the number of http requests.
We will turn off this embedding behavior by adding:

INLINE_RUNTIME_CHUNK= false before the build script in our package.json.

Or as in our use case adding the line below to the manifest.json:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Building the extension

After updating our manifest.json, we can now run the build script using:



npm run build

Once the build is finished we notice a new folder called "build" or "dist" in the root of our project. This is the folder we’ll load onto chrome as our extension.

To load our extension on chrome, you can enter the url below in the address bar:

chrome://extensions/

Click the load unpacked button at the top left corner and select the build/dist folder in the root folder of our extension.

Once you’re done you can click update to update all extensions and c'est fini.

Just like that you can see your first chrome extension.

You can now load your extension in-browser and test it out or better still tweak it to suit a specific purpose.

To better explore possibilities with creating extensions, you can check out Artem Diashkin's post below

How To Create A Google Chrome Extension With React | by Artem Diashkin | LITSLINK | Medium

Artem Diashkin ・ Jul 16, 2021 ・
Medium