CORS is a Pain for Side Projects

Szabi — Sat, 21 Mar 2020 16:05:17 +0000

If you are even a slightly bit adventurous web developer you must have faced this problem before and maybe you solved it and got on with your development or maybe you were like me who just gave up at that point because anyway is just a side project and I could just start using a framework where the back-end & front-end has the same origin and I can skip this problem all together.

This time I was a bit more serious about my side project, My Habit Tracker and I decided to go all the way and fix this issue.

Spoiler alert: It's pretty simple actually.

We are going to create a browser based front-end web app that'll send a request to an end-point in the cloud. Technologies that are involved in this project:

AWS API Gateway
AWS Lambda
React (w. create-react-app)
Axios

First step is to create a React app using create-react-app. In order to achieve that run the following commands in your terminal:

npx create-react-app poc-cors-app
cd poc-cors-app
yarn start

The app will be served in your browser on http://localhost:3000/, this is going to be domain number 1.

After we've seen the react logo spinning around, let's edit the App.js file to get rid of all unnecessary UI elements. Also we will have to use the useState hook because the data what we want to show is going to come from the cloud and will be updated after our request had a successful response. So basically we are turning the App component into a stateful component but thanks to react hooks we can keep the function syntax.

import React, { useState } from 'react';
import './App.css';

function App() {

  const [ data, setData ] = useState('CORS not yet enabled');

  return (
    <div className="App">
      <header className="App-header">
        <p>
          {data}
        </p>
      </header>
    </div>
  );
}

export default App;

The command line will warn you about not using the setData but don't worry, we are going to get back to this. Now let's create our back-end services.

Login to AWS console and under Service find Lambda which will always be under the Compute section. When you navigate to Lambda you will be able to create a new function by clicking Create function on the top right corner of the page. Name the function poc-cors-getData and hit the Create function button.

After your lambda function has been created edit the function code to match the following line.

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: 'CORS is enabled yeeey!',
    };
    return response;
};

Next up head to API Gateway which you'll find in Network and Content Delivery section and create a new REST API named poc-cors-api which works with Lambda.
By clicking the Actions dropdown add a new Resource to the api called end-point and leave the rest of the form as default. Select the newly created Resource and add a GET Method to it by clicking the Actions dropdown again. Before you can save the method you need to attach the lambda function what we've created previously by providing the name of the function, poc-cors-getData.

Okay, let's deploy our API (Actions dropdown), we can call the deployment stage dev for the sake of this example. The dev stage will provide you an Invoke URL which you can use to test your API in Postman i.e, or just simply copy it to your browser and append /end-point to the end of the URL, and this is your domain number 2. Hopefully you get back the response what the Lambda function has. If not, make sure all the names are identical.

Alright, back to the front-end

Now we have to make a request to this API from our React app and in order to do this we are going to use axios, add the package to the project using yarn in your terminal.

yarn add axios

In your App.js file make sure that you additionally import axios and useEffects hook.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

Let's make the request by inserting the following piece of code after you call the useState and before you return the UI:

useEffect(() => {
  async function fetchData() {
    const response = await axios.get('https://YOUR_INVOKE_URL_ID.execute-api.eu-west-1.amazonaws.com/dev/end-point');

    setData(response.data.body);
  }

  fetchData();
});

If you are not familiar with React Hooks I would recommend going through the compact and informative docs here.

When you serve the web app now you'll find that the CORS not yet enabled text is visible in the middle of the page and if you open up developer tools and navigate to the Console you'll see an error indicating that your request has been blocked by CORS (Cross Origin Resource Sharing). This happens because your front-end and cloud service are on two different domains and your browser blocks the request by default.

If you want to dive into the details I can recommend this article which has a bunch of information on the topic.

Luckily AWS made it very easy for us developers to Enable CORS on different API Gateway resources. In order to set this up we have to go back to AWS Console.

Cool, switch to the back-end

Select your Resource that you want to enable CORS on, /end-point in our situation and open the Actions dropdown where you'll find the Enable CORS Resource Action, click on it. Leave all the settings as default and tap on Enable CORS and replace existing CORS headers button. This will create an OPTIONS Method which will have all the necessary Response Headers for letting your request from the browser to get a successful response.

Finally, deploy the API (Actions dropdown). Refresh your browser and hopefully see the string that is returned in the response body from the Lambda function.

Hope this short guide on how to start local web development using AWS services and React was useful. Please let me know in the comments if you got stuck at a certain step and I'll try my best to help you figure out what went wrong.

Also, I would appreciate some feedback on how easy it was to follow this guide without any AWS Console screenshots?

Thanks a lot for reading! 📖 Happy coding everyone ✌🏻

AWS - Admin User

Szabi — Thu, 05 Mar 2020 16:50:06 +0000

Started to use AWS in order to create back-end services for My Habit Tracker application. An informative article described that it's not a good practice to use your Root User to execute daily tasks in AWS Console.

So I created an IAM User, which I'm going to login with to work on my cloud solution for the application.

First I wanted to create a Role which has AdministratorAccess permissions and make my IAM User to assume that role, but it seemed a bit overkill as it's in the same account. I ended up creating a IAM Group called AdminGroup and attached the AdministratorAccess policy, then added my previously created IAM User to the group.

Finally I just needed to add an Account Alias so that I don't need to remember my 12 digit Account ID all the time. An account alias is also useful to make your login link a bit user friendly.

My Habit Tracker

Szabi — Tue, 25 Feb 2020 11:50:14 +0000

Started working on this habit tracker application which will help me and my friend (who is a UI/UX designer & user researcher) to track our habits in an extremely simple way. And hopefully extract useful information out of the data.

The MVP is very simple:

User is able the add any number of habits and categorise them
User is able to perform any of those habits at any time
User will see the list of performed habits

Starting with a website approach at the beginning and looking into transforming it into a PWA for offline accessibility and app like experience.

Technologies that I use is create-react-app which helps me build a React app with Hooks. Hosting the site in an AWS S3 bucket to start with and will use AWS Lambda for handling back-end business logic.

Planning on using MongoDB in order to store the data that we capture. A NoSQL database will do the job in our situation because we want to use the app as soon as possible to capture data as early as we can, but the data structure will change and because of this flexibility is key.

DEV Community: Szabi

CORS is a Pain for Side Projects

Alright, back to the front-end

Cool, switch to the back-end

AWS - Admin User

My Habit Tracker