DEV Community: Rocio Jacob

Getting Started with AWS Elastic Beanstalk: A Step-by-Step Guide

Rocio Jacob — Fri, 19 May 2023 09:49:09 +0000

In today's rapidly evolving world of web development, deploying and managing applications in the cloud has become a crucial aspect of every project. AWS Elastic Beanstalk simplifies the process by providing a platform-as-a-service (PaaS) solution that streamlines the deployment and management of your applications. In this tutorial, we will walk you through the step-by-step process of setting up a project in AWS Elastic Beanstalk.

Step 1: Sign in to the AWS Management Console

To begin, log in to the AWS Management Console using your AWS account credentials. If you don't have an AWS account, you can sign up for one easily on the AWS website.

Step 2: Navigate to Elastic Beanstalk

Once you're logged in, navigate to the Elastic Beanstalk service. You can find it by searching for "Elastic Beanstalk" in the AWS Management Console search bar.

Step 3: Create a New Application

Click on the "Create Application" button to start creating your new application. Provide a meaningful name for your application and optionally enter a description to help identify its purpose.

Step 4: Create an Environment

After creating your application, the next step is to set up an environment where your application will run. Click on the "Create environment" button.

Step 5: Configure the Environment

Choose the environment type that suits your project, such as a Web Server Environment or a Worker Environment. Provide a unique name for your environment and specify the URL that users will access your application from.

Step 6: Select the Platform

Choose the platform that matches your project's technology stack. Elastic Beanstalk supports a wide range of platforms, including Java, Node.js, Python, Ruby, PHP, and more. Select the platform that best suits your application.

Step 7: Customize Additional Settings

Take advantage of the additional settings to fine-tune your environment. Customize the platform version, database configuration, security settings, and environment variables as needed to meet your application's specific requirements.

Step 8: Review and Create the Environment

Review all the configuration details you have provided and ensure everything is correct. Once you are satisfied, click on the "Create environment" button to start the deployment process.

Step 9: Configure Application Code Deployment

Now that your environment is set up, you can configure the deployment of your application code. Choose the desired method: uploading a ZIP file or connecting to a code repository.

Step 10: Deploy Your Application

With your environment and code deployment configured, you are ready to deploy your application. Elastic Beanstalk will create the necessary resources and deploy your application code.

Step 11: Access Your Application

Once the deployment is complete, you can access your application by visiting the URL provided in the Elastic Beanstalk environment dashboard. Congratulations! Your application is up and running in Elastic Beanstalk.

AWS Elastic Beanstalk simplifies the process of deploying and managing applications in the cloud. By following the steps outlined in this tutorial, you have learned how to create an application, set up an environment, configure instance and capacity settings, customize additional configurations, and deploy your application code. Elastic Beanstalk handles the underlying infrastructure, allowing you to focus on your application development. Embrace the power of Elastic Beanstalk and enjoy the seamless experience of deploying your applications in the cloud.

Building and distributing Vite.js projects with Amplify

Rocio Jacob — Tue, 04 Oct 2022 14:20:09 +0000

On our last project we decided to use vite.js. We can now claim we LOVED IT! We loved vite's speed regarding serving our file and found it extremely intuitive and right for the project.

Yet development with vite implied quite a problem regarding our hosting on the web app. The fact vite is module based and has css code splitting, made the hosting of the project tough.

When we first started hosting it on amplify, we had the issue that the enviroment was completely blank, and none of the page contents were fetched by the service.

We fixed the initial problem by using the redirect AWS suggests for SPA's:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Beware with this redirect link as it's position on teh rewrites and redirects can affect the performance of the page.

So our rewrites and redirects page ended up looking like this:

Then we had to adapt the build settings so that the dist folder vite creates can be found by amplify:

Our build file ended up looking like this:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build --prod
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

After following this steps, we could host the webpage correctly, yet amplify still had arbitrary issues on fetching some webpages. For example redirects were not working and took us to a blank page that claimed Amplify CloudFrontURL couldn't find the page.

Apparently some fractions of the code weren't being found. This is the problem that held us days, and to which we struggled to find the solution. The thing was, we had to change some things in vite.config.js that were making the base of the project untraceable to amplify.

Our vite.config.js ended up looking like this. Adding base: './index.html' was what managed to fix the mistake of arbitrary 404 we had:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true },
  plugins: [react(), mkcert()],
  base: './index.html',
  build: {
    input: {
      app: './index.html', // default
    },
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    }
  }
})

We hope this solution helps someone struggling with the same problem.

Building a React Native Filter - Part 1

Rocio Jacob — Thu, 17 Feb 2022 18:08:39 +0000

A couple of weeks ago a client asked us to create an application that displayed all of it's stores. The app had to be built in React Native in order to speed up development time and ensure compatibility among Android and IOS and had to include a full list of our client's stores. This list was fetched from a MongoDB collection, and came as an array of objects containing information for each store (such as location, phone number, email, coordinates). Obviously, a plain list of objects doesn't satisfy a customer, as scrolling through a 189 store list to find a specific one might be extremely painful. So with React Native (our choice to build fast compatible apps) we decided to create a filter. The filter we built included features such as searching, categorizing and ordering according to proximity.

In this article, we will show you how the filter was built by using a mock API to build a filter with search and categorization (in the future we will write another article to show how to handle location based objects, order them and filter them). The tutorial will not cover a step by step of the whole code, but will go through the most important parts when building it. You can find the whole code in this Expo Snack.

You will see this is a front-end built filter, and doesn't use backend filtering. Although backend filtering is a good option (particularly to handle long lists), it works smoothly with the data we have. Bear in mind if you have millions of elements mapping through them will impact negatively on the app's performance.

So, to start we will be using Fruityvice's API that will bring a response with an array of objects containing different information about fruits. An example for the response we get is:



[{
    "genus": "Malus",
    "name": "Apple",
    "id": 6,
    "family": "Rosaceae",
    "order": "Rosales",
    "nutritions": {
        "carbohydrates": 11.4,
        "protein": 0.3,
        "fat": 0.4,
        "calories": 52,
        "sugar": 10.3
    }
}, ...]

Project Structure

Let's get hands on it to the real code. The structure our project will take is:

A main App.js file where most of the work will happen, here we will set the main states and fetch our data.
Components folder.
Assets folder.
Data folder in order to save the initial state some variables will have.

Fetching the API

The first thing we should do, is fetch the API. We fetch it through a simple fetch function built in a useEffect, meaning each time the component mounts, the API is fetched and the fruits "refresh". The response is saved as a json and we can now work with it.



  useEffect(() => {
    fetch('https://www.fruityvice.com/api/fruit/all')
      .then((response) => response.json())
      .then((json) => setFruits(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

Our App.js Component

We create a <SafeAreaView /> for our App.js (so that the content we build is contained within a visible space). Inside the SafeAreaView we will have three components, the AppBar (that will hold the modal and a logo for our app), the modal itself, and the Wrapper (called <FruitsWrapper />) where we will render the "card-styled" list of fruits with their information.

On the App.js we'll also do two things that will help us handle the Filtering correctly.

First we'll set a couple of states:



  const [fruits, setFruits] = useState([]);
  const [filter, setFilter] = useState(initialFilter);
  const [intermediateFilter, setIntermediateFilter] = useState(initialFilter)
   const [modalVisible, setModalVisible] = useState(false);

fruits holds the array of objects we fetch from the API
filter filter is the real filter that will be applied when the user decides to APPLY the filter within the modal
intermediateFilter is a filter that is setted while the user interacts with the modal, once the apply button is pressed, the intermediateFilter becomes the actual filter
modalVisible will handle modal visibility

Why the intermediateFilter? the intermediate filter ensures the fields the user clicks while in the modal will be applied correctly. We need to save the user choices as he/she advances through the modal.

Both the intermediateFilter and the filter take up an initialFilter. What is this? The initialFilter is a js written in our data folder. initialFilter is an object that hold's the initial state of the fields we are going to filter.



export const initialFilter = {
  query: '',
  genus: '',
  carbohydrates: '', 
}

The AppBar

The App bar is extremely simple. We have a logo, and a button that when pressed will change the state of the modalVisible variable to true and show us the modal.

Displaying the info

Before we filter we want to display multiple cards containing information about the fruits so we can then sort them according to the user's choices. For this we have two components <FruitsWrapper /> and <InfoCard/>

<FruitsWrapper /> is the wrapper where we map through the fruits and display them. In this Wrapper we will also have the filtering instance. So as long as there no filters it will display the complete object we receive from the fetch. If there filters, we will push fruits to a new variable that will be empty.
<InfoCard/> is the UI of the card that will hold the object's info. We build only one object, and then map the fetch response and render each fruit (with it's information in the cards).

The `<FruitsWrapper />`

This component is SUPER important. As the logic applied here makes the magic to display the filtered content.

You can see that at the beginning of the component I declared two boolean variables: filterFruits and empty (empty will not be used yet, but will serve us to display that no fruits were fetched). I then set up an empty filterArray where the fruits I filter with my modal will be pushed. After doing this I set filterFruits equal to allFruits, the later one being the whole fruit array we brought on the first place. The following logic is key to filtering:



if (filterFruits != undefined && && typeof filterFruits === 'object'){
    filterFruits.map((fruit) => {
    // I have two things, the filter and the fruits genus (in the array) so if I filter I only want to show the ones that match the genus
    if (filter.genus != '' && !fruit.genus.includes(filter.genus)) {
      return
    }

    filterArray.push(fruit)

  })
        if (filterArray.length > 0) {
        filterFruits = filterArray;
      }
} else {
  filterFruits = false
  empty= true
}

The filtering happens if filterFruits (before known as allFruits) is not undefined (meaning it has some content) and the type of this is an object. What we do is map through each fruit, if it doesn't match the parameters we want it to, we return, else we push it to the filterArray. If the filter array is bigger than 0 (meaning fruits were pushed) filterArray (the one where we pushed) becomes filterFruits.

The Modal

The modal is the most important part of this tutorial. For this we will use React Native's built in modal.

In the application we built for the client we had two modal instances, the filtering modal (that used the native modal) and an alert modal (where we used UI Kitten's modal). We like the native modal because it offers us the possibility of deciding how it transitions and it's easier to set it up fullscreen.

As we mentioned previously we chose to use an intermediate filter within the modal so that the state management can be smooth, and we can access the different states (Remember that the initalFilter was an object?). Yet, after the user click's the apply button, we want the intermediateFilter to become the actual filter

A key thing we also have in this modal is the list of all the genus. Instead of mapping all the fruits and displaying the genus, in the App.js we created an array with all the unique genus (so that we don't get them repeated). The following code creates an array of all the fruit.genus unique values:



const genusResult = allFruits.map(item => item.genus)
  .filter((value, index, self) => self.indexOf(value) === index)

We loop through this array that we built to create the radio buttons, as you will see in the RadioButton.js file. This file holds custom built Radio Buttons. The good thing about this is that they are fully customizable, and give us more control over the user selection.

The thing is, the user can only select one genus, and when the user selects the genus selected is saved in the intermediate filter. Once the user decides which genus he/she wants to see, he applies the filter and because of the logic applied in the <FruitsWrapper /> only the fruits that have that genus will be shown.

Closing Remarks

This was a quick tutorial over how to build the filter. We hope it was easy to follow and in the second part we will talk about querying filtering.

Remember the full code is in our Expo Snack