DEV Community: Muvinai

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.

Create a Landing Page that converts

Luisina Comes — Thu, 28 Apr 2022 14:51:59 +0000

These are the best landing page practices we’ve learned through the years:

To start with, divide your page into two sections: above the fold and below the fold. In the first one, make sure you earn the customer’s attention. You can use the second one to provide extra information, clear doubts and earn the sale.

When planning the above the fold section of your landing page, keep in mind that less is more. Focus exclusively on showcasing the value you provide and explaining how you’ll create it. This should be achieved briefly with a title, a subtitle, social proof, a CTA and a few visuals.

These five elements are key, dedicate time to perfect them.

Title: sum up the value you offer in a few words. Think about the title of your landing page as a unique label for your brand. It should explain what you do and highlight what makes your offer outstanding.
Subtitle: this section allows you to address the user’s main objection. To ace this, you’ll need to get to know your audience and anticipate their concerns about your offer.
Visuals: show your potential customers your value. Try to avoid stock images, they will hardly highlight the uniqueness of what you offer.
Social proof: user’s reviews support your value proposition.
CTA: encourage the user to take action!

If done correctly, the above the fold section of your landing page should clearly state what you are offering and get people’s attention so that they scroll down to get more information.

Below the fold, you’ll need to show the value that you promised. Moreover, this section gives you more room to deal with your customers’ objections and doubts. Make sure you:

Clear doubts you think they’ll have.
Describe the main features of your product/service.
Add social proof.
Add another CTA.
Add storytelling: finish your landing page with a personal touch. Briefly describe how you feel about what you are offering and how you are helping people with it.

It’s important that you don’t add anything that drives people away from your page. If a user arrives at your landing page and scrolls down, your job is to keep them there. Don’t add anything that redirects them to other pages.

Follow these easy steps and create a landing page that converts! Remember that a cluttered page will only distract and confuse your visitor. It’s best to have fewer elements, you just have to take the time to make them count.

Consider these factors before advertising on TikTok

Luisina Comes — Thu, 31 Mar 2022 21:16:30 +0000

TikTok surpassed 1 billion users in September. The platform is unsaturated and traffic is affordable, which makes it a tempting channel for marketers all over the world.

It almost seems too good to be true. But there are several factors to take into account. Make sure you read this before you jump into TikTok Ads!

Testing a new channel is expensive. Are you willing to divert 20% of your advertising budget towards TikTok? This is the minimum we recommend. After all, the only way to know if the platform works for you is to spend real money on it.
Do you have the time? Running ads for a few weeks won’t give you any substantial data. As a rule of thumb, give it at least two months before you make up your mind.
Have you tried other short-video channels like Instagram stories or IGTV? If so, have you had any success? TikTok can have cheaper CPAs, cheaper CPMs, and higher quality traffic than Instagram. But transferring the same content from one channel to the other won’t work. You can reuse Instagram content and try your luck, but our advice is to make new, platform-specific videos. It’s key to focus on the content rather than the video’s look and aesthetic.

If these facts make TikTok ads seem unappealing to you, try an organic strategy first. Upload two videos per week for two months and see how they perform for themselves. This will give you time to get to know the platform and identify the content your audience likes best.

We are not trying to get you to ditch TikTok Ads, but we know it’s a tricky channel to get a hold of. Simply make sure you have the resources needed to give it a try and remember: TikTok is not Instagram!

How to build a successful Shopify store

Luisina Comes — Tue, 15 Mar 2022 20:47:51 +0000

We've created tons of online stores for our clients, and most of them are built on Shopify. Learn why we love it so much and how easy it is to launch a Shopify store that converts!

Why we love it

Unlike many popular e-commerce platforms, Shopify gives merchants the possibility to customize almost everything in their site to present their brand accurately.

It offers a clean, user-friendly interface and allows you to replace most custom-development functionalities with third-party apps that integrate easily.

On top of that, it provides essential insights into your customer base, which is key to learn how your clients navigate through your store and keep it optimized!

Set up a conversion-centered online store

The first step is to decide whether you’ll use a Shopify theme or not. Unless your business has really specific needs, we recommend you do. There are lots of different options to choose from, and the key is they are specifically built to convert.

The theme you choose will affect your store’s aesthetics and user experience, so it can be a bit overwhelming to pick one. A great tip is to use BuiltWith to see which themes your favourite Shopify stores use.

Consider the main features you want for your site and make sure the theme you choose has them all. Once you’ve made a decision you’ll need to think about how you want to display your content throughout the store.

When designing your homepage, always keep in mind the difference between above the fold (before scrolling) and below the fold (after scrolling). The first section is meant to feature pictures and CTAs. Don’t include extra information, keep the copy short. Any additional details will go below the fold, where you can add reviews, blogs and important categories like best sellers.

Once you’ve established a straightforward homepage, you can build the product pages. These should draw attention to your product photos and the “add to cart” button. Don’t get creative here, you’ll risk drawing people away.

The same goes for the checkout page: make sure there are no distractions or exits that would stir your customers away from their purchase.

Closing remarks

Always keep in mind that the main goal of a Shopify store is to generate conversions. Leave unnecessary information apart and avoid busy elements like animations, they will only reduce the speed of your site and drive clients away. Instead, focus on your products and CTAs.

Follow these basic tips to get the most conversions!

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