Forem: Nuno Pereira

Protecting API keys with Serverless Functions

Nuno Pereira — Sun, 26 Apr 2020 12:19:21 +0000

Imagine you need to develop the front-end of an APP that needs to get a list of the most popular movies from the MovieDB API.

Let's do it !

Go to MovieDB and signup to get your own API Key and follow along.

We will create a new project named protectingapisecrets using create-react-app and start coding our front-end

npx create-react-app protectingapisecrets
cd protectingapisecrets
touch .env
npm install axios

Open this project with your favourite Code Editor, edit your .env file and add a variable with you API Key

// .env

REACT_APP_API_KEY=<<your api key>>

next open your .gitignore file and add a line with your .env file and finally delete all files inside your src folder and create a clean i*ndex.js* App.js and App.css

Start coding

// index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// App.js

import React, { useState, useEffect } from "react"
import axios from "axios"
import "./App.css"

const App = () => {
  const [movies, setMovies] = useState(null)
    
    async function fetchMovies() {
        const url = `https://api.themoviedb.org/3/movie/popular?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&page=1`
      const response = await axios.get(url)
        const data = response.data.results
        setMovies(data)
      }  

    useEffect(() => {
    fetchMovies()
  }, [])

    return (
    <>
      {movies === null ? (
        <div className="loading">
          <h2>Loading ...</h2>
        </div>
      ) : (
        <>
          <div className="container">
            {movies.map((movie) => (
              <div className="movie" key={movie.id}>
                <img src={`https://image.tmdb.org/t/p/w185/${movie.poster_path}`} alt={movie.title} />
              </div>
            ))}
          </div>
        </>
      )}
    </>
   )
  }

export default App

// App.css

*,
*::after,
*::before {
  margin: 0rem;
  padding: 0rem;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  box-sizing: border-box;
  background-color: #222831;
}

.loading {
  padding-top: 5rem;
  text-align: center;
}

.loading h2 {
  color: white;
  font-size: 2rem;
}

.container {
  margin: auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  max-width: 110rem;
  grid-gap: 2rem;
}

.movie img {
  width: 100%;
}

Cool, now let's run

npm start

and check if everything is behaving like we expected

Deploying

Amazing!

We completed our front-end now it's time to deploy it .

We will do this really easily and in just tree steps with Netlify:

1st: Create a new GitHub repository and push your code.

2nd: Create and account on Netlify and connect you account to your GitHub.

3th: On your Netlify panel select "New Site from git" and chose the repository you created, you also need to check "show advanced" and add a new variable like this :

click "Deploy Site" and that's it, we now have a live version of our app !

The Problem

We stored our API Key in an environment variable to prevent it from being available on our code but if anyone opens the chrome dev tools while browsing your site, quickly can find your key.

soo , what can we do to protect our API key ?

Serverless Functions

We can make a serverless function that handles our API call for us so we don't have to public expose our key.

Let's try it out, go back to your terminal and run:

npm install netlify-lambda http-proxy-middleware env-cmd
mkdir functions
touch netlify.toml

Update scripts in your package.json file to look like this:

// package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
        "lambda-serve": "env-cmd netlify-lambda serve functions",
        "lambda-build": "netlify-lambda build functions"
  },

add this lines to netlify.toml file and add the functions folder to your .gitignorefile

// netlify.toml

[build]
    functions = "lambda"

add a file named setupProxy.js to your src folder and past this code:

// setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/.netlify/functions/',
    createProxyMiddleware({
      target: 'http://localhost:9000',
      "pathRewrite": {
        "^/\\.netlify/functions": ""
      }
    })
  );
};

This proxy setup will allow you to ping different endpoints depending on witch environment you are, if you are in development you want to ping localhost and in production you want the ./netlify/functions endpoint.

Coding our function

Let's create a file named getMovies.js inside our functions directory

// getMovies.js

const axios = require("axios")

exports.handler = function(event, context, callback) {
    const { API_KEY } = process.env

    const url = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`

    const send = body => {
        callback(null, {
            statusCode: 200,
            body: JSON.stringify(body)
        })
    }

    const getMovies = async () => {
        const response = await axios.get(url)
        const data = response.data.results

        send(data)
    }

    getMovies()
}

Now we need to edit our fetchMovies function inside App.js to use the serveless function instead of pinging the moviedb api directly:

async function fetchMovies() {
    const url = `/.netlify/functions/getMovies`

    const response = await axios.get(url)
    const data = response.data
    setMovies(data)
  }

And finally edit the .env file and change the name of the variable from REACT_APP_API_KEY to API_KEY

Great, let's test it out !

Open two terminal windows and run npm start on the first and npm run lambda-serve on the second one and check your network tab

Cool, we are calling the serverless function hiding the real endpoint of the api, let's deploy it to Netlify, open your terminal and run:

git add .
git commit -m "finished version"
git push

When you push a commit to your GitHub repo Netlify will trigger a new deploy for your site. You just need to do one extra step and your are done, open your Netlify Panel and change the name of the environment variable you created on your fist deploy from REACT_APP_API_KEY to API_KEY

We are done, see you soon !

You can check my GitHub repo here: https://github.com/NunoCPNP/protectapisecrets

and my deployed version here: https://protectingapisecrets.netlify.app/

Redux Hooks ! Opinions !?

Nuno Pereira — Mon, 09 Mar 2020 21:56:01 +0000

Opinions about Redux Hooks (usReducer, useSelector) ?

Do you use it or still using the "old" connect way ?

Your very first responsive and animated navigation bar with React and React-Spring

Nuno Pereira — Wed, 04 Sep 2019 23:25:47 +0000

In this tutorial you will build a simple, responsive and animated navigation bar with React JS. You will use styled-components for the css and react-springs for the animations.

You can check here the final result of this project.

Styled components is a CSS-in-JS styling framework that uses tagged template literals in JavaScript and the awesome power of CSS to provide a platform that allows you to write actual CSS to style react components. In essence, styled components are easy-to-make react components you write with the styled-components library where you can style your components with plain CSS inside your javascript code and React-Spring is a spring-physics based animation library that should cover most of your UI related animation needs in a very simple way.

Lets start !

I will assume that you have node installed on your computer, you can check it by typing in your terminal :

node -v

if you don’t please install the latest version.

OK, all set now ! You will start a new project using create-react-app so open your terminal and type:

npx create-react-app react-navbar

And add the dependencies you will need during the project

npm install styled-components react-spring

Now open your newly created project with your favorite code editor, go to the src folder and delete app.css, index.css and logo.svg.

Open your index.js file and remove the line :

import “./index.css”

Also open your app.js and clean it up to look like this:

import React from “react”;

const App = () =>  {
  return(
    <div>

    </div>
  )
}

export default App;

In your src folder create a directory named styles with a Global.js file inside it, also in your src folder create a components folder, a sub-folder named navbar and inside this folder create this files: Brand.js , BurgerMenu.js, CollapseMenu.js and Navbar.js.

We will also create a folder named assets in the src folder and we will put a image inside of it, you can download the file from here.

Your project tree should look like this:

Great, this will be your starting point.

First of all your going to create the global style file using Styled Components, open your Global.js file and add this code:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`

  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');;

  *,
  *::after,
  *::before {
    margin: 0px;
    padding: 0px;
    box-sizing: inherit;
  }

  html {
    font-size: 62.5%;
  }

  body {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
  }
`;

export default GlobalStyles;

Now you will open your App.js file, refactor it to a class component, add the dependencies we will need, add the Global.js and Navbar.js components and the state for the navbar.

import React, { Component } from 'react'
import Navbar from "./components/navbar/Navbar";

import GlobalStyle from './styles/Global';

class App extends Component {
  state = {
    navbarOpen: false
  }

  handleNavbar = () => {
    this.setState({ navbarOpen: !this.state.navbarOpen });
  }

  render() {

    return (
      <>
        <Navbar 
          navbarState={this.state.navbarOpen} 
          handleNavbar={this.handleNavbar}
        />
        <GlobalStyle />
      </>
    )
  }
}

export default App

Great, before you start working on the Navbar.js component you will deal with the small components, open your Brand.js and make it look like this:

import React from 'react'
import styled from "styled-components";

import logo from "../../assets/logo-min.png";

const Brand = () => {
  return (
    <Image src={logo} alt="Company Logo" />
  )
}

export default Brand

const Image = styled.img`
  height: 85%;
  margin: auto 0;
`;

Now the BurgerMenu.js:

import React from 'react';
import styled from "styled-components";

const Burgermenu = (props) => {
  return (
    <Wrapper onClick={props.handleNavbar}>
      <div className={ props.navbarState ? "open" : "" }>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
      </div>
    </Wrapper>
  );
}

export default Burgermenu;

const Wrapper = styled.div`
  position: relative;
  padding-top: .7rem;
  cursor: pointer;
  display: block;

  & span {
    background: #fdcb6e;
    display: block;
    position: relative;
    width: 3.5rem;
    height: .4rem;
    margin-bottom: .7rem;
    transition: all ease-in-out 0.2s;
  }

  .open span:nth-child(2) {
      opacity: 0;
    }

  .open span:nth-child(3) {
    transform: rotate(45deg);
    top: -11px;
  }

  .open span:nth-child(1) {
    transform: rotate(-45deg);
    top: 11px;
  }

`;

Great, now the final to components, first the CollapseMenu.js:

import React from 'react';
import styled from 'styled-components';

import { useSpring, animated } from 'react-spring';

const CollapseMenu = (props) => {
  const { open } = useSpring({ open: props.navbarState ? 0 : 1 });

  if (props.navbarState === true) {
    return (
      <CollapseWrapper style={{
        transform: open.interpolate({
          range: [0, 0.2, 0.3, 1],
          output: [0, -20, 0, -200],
        }).interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
      }}
      >
        <NavLinks>
          <li><a href="/" onClick={props.handleNavbar}>link n1</a></li>
          <li><a href="/" onClick={props.handleNavbar}>link n2</a></li>
          <li><a href="/" onClick={props.handleNavbar}>link n3</a></li>
          <li><a href="/" onClick={props.handleNavbar}>link n4</a></li>
        </NavLinks>
      </CollapseWrapper>
    );
  }
  return null;
};

export default CollapseMenu;

const CollapseWrapper = styled(animated.div)`
  background: #2d3436;
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
`;

const NavLinks = styled.ul`
  list-style-type: none;
  padding: 2rem 1rem 2rem 2rem;

  & li {
    transition: all 300ms linear 0s;
  }

  & a {
    font-size: 1.4rem;
    line-height: 2;
    color: #dfe6e9;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: #fdcb6e;
      border-bottom: 1px solid #fdcb6e;
    }
  }
`;

And finally the Navbar.js;

import React from 'react'
import styled from "styled-components";
import { useSpring, animated, config } from "react-spring";

import Brand from "./Brand";
import BurgerMenu from "./BurgerMenu";
import CollapseMenu from "./CollapseMenu";

const Navbar = (props) => {
  const barAnimation = useSpring({
    from: { transform: 'translate3d(0, -10rem, 0)' },
    transform: 'translate3d(0, 0, 0)',
  });

  const linkAnimation = useSpring({
    from: { transform: 'translate3d(0, 30px, 0)', opacity: 0 },
    to: { transform: 'translate3d(0, 0, 0)', opacity: 1 },
    delay: 800,
    config: config.wobbly,
  });

  return (
    <>
      <NavBar style={barAnimation}>
        <FlexContainer>
          <Brand />
          <NavLinks style={linkAnimation}>
            <a href="/">link n1</a>
            <a href="/">link n2</a>
            <a href="/">link n3</a>
            <a href="/">link n4</a>
          </NavLinks>
          <BurgerWrapper>
            <BurgerMenu
              navbarState={props.navbarState} 
              handleNavbar={props.handleNavbar}
            />
          </BurgerWrapper>
        </FlexContainer>
      </NavBar>
      <CollapseMenu 
        navbarState={props.navbarState} 
        handleNavbar={props.handleNavbar}
      />
   </>
  )
}

export default Navbar

const NavBar = styled(animated.nav)`
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #2d3436;
  z-index: 1;
  font-size: 1.4rem;
`;

const FlexContainer = styled.div`
  max-width: 120rem;
  display: flex;
  margin: auto;
  padding: 0 2rem;;
  justify-content: space-between;
  height: 5rem;
`;

const NavLinks = styled(animated.ul)`
  justify-self: end;
  list-style-type: none;
  margin: auto 0;

  & a {
    color: #dfe6e9;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    margin: 0 1.5rem;
    transition: all 300ms linear 0s;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: #fdcb6e;
      border-bottom: 1px solid #fdcb6e;
    }

    @media (max-width: 768px) {
      display: none;
    }
  }
`;

const BurgerWrapper = styled.div`
  margin: auto 0;

  @media (min-width: 769px) {
    display: none;
  }
`;

And you are done !

If you don't want to write all this code you can fork the github repo I made for this example.

See you soon for more tips and tutorials !

Differences between "null" and "undefined" keywords?

Nuno Pereira — Thu, 29 Aug 2019 20:11:24 +0000

They both represent a empty value.

Difference nr 1!

When you define a variable but not assign a value to it, it automatically puts a placeholder which is called undefined so you don't have do it manually, JavaScript does it for you.

Null means an empty or non-existent value.

Null is assigned, and explicitly means nothing. while undefined typically means a variable has been declared but not defined yet.

var a;
console.log(a);
// undefined

var b = null;
console.log(b);
// null

Difference nr 2!

Null and undefined are both primitives and falsy values. However null is also an object. Interestingly, this was actually an error in the original JavaScript implementation.

var a;
console.log(typeof(a));
// undefined

var b = null;
console.log(typeof(b));
// object

Difference nr 3!

As you can see so far, null and undefined are different, but share some similarities. Thus, it makes sense that null does not strictly equal undefined.

console.log(null !== undefined);
// true

But, and this may surprise you, null loosely equals undefined.

console.log(null == undefined);
// true

In JavaScript, a double equals tests for loose equality and preforms type coercion. This means we compare two values after converting them to a common type.

See you soon for more tips !

Differences between "let" and "const" keywords?

Nuno Pereira — Tue, 27 Aug 2019 17:41:28 +0000

In my last article I talked about the differences between "var" and "let" now it's time to talk about the differences between "let" and "const" keywords.

Let's gets started !

“let” and “const” they are both used to define variables.

Difference nr 1!

With keyword “const” you can define constant variables which means, after the first assignment of the value you cannot reassign the value again.

With keyword “let” you can reassign the value as many times as you need, you can even change the type of value if needed.

Let’s take a look at some code:

let l = 1;
l = 2;
console.log(l); 
// 2

const c = 1;
c = 2;
Console.log(c); 
// Error: Uncaught TypeError: Assignment to constant variable

Difference nr 2!

Variables defined with “const” keyword cannot be initialized without any value. You must specify its value in the same statement in which its declared (which makes sense, given that it can't be changed later).

Let’s take a look at this example:

let l
l = 1
console.log(l)
// 1

const c;
c = 1;
console.log(c);
// Error: Uncaught TypeError: Missing initializer on constant variable

Difference nr 3!

The "const" declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents can be altered.

Let’s see this in action:

const c = [ 1, 2 ];
c.push(3);
console.log(c);
// [ 1, 2, 3 ]

Const c = [ 1, 2 ];
C = [ 1, 2, 3 ];
console.log(c);
// Error: Uncaught TypeError: Assignment to constant variable

That's it ! Once again simple but important concepts to keep fresh in your minds.

See you soon for more tips !

Differences between "var" and "let" keywords?

Nuno Pereira — Sun, 25 Aug 2019 18:52:00 +0000

This post will be the first of a large series of small posts that will cover some questions you are likely to come across during your job interviews.

I'll be more focused on JavaScript but there will be some posts about HTML , CSS and React JS in the future !

Ok , let's get started !

Difference nr 1!

"var" was introduced in JavaScript from the beginning while "let" was introduced in ES2015/ES6.

Difference n 2!

"Let" has a block scope while "var" as a function scope

Let's see this example

let x = function() {

  if(true) {
    var v = 2;
    let l = 1;
  }

  console.log(v);
  --> 2
  console.log(l);
  --> Uncaught Reference: l is not defined
}

x();

The console.log of the variable v will return 2 because of the function scope of the "var" keyword while the l variable will return an error because of the block scope of the "let" keyword.

Difference n 3!

Variables defined with "var" gets hoisted at the top of his function while variables defined with "let" don't get hoisted.

let x = function() {

  if(true) {
    console.log(v);
    --> undefined
    console.log(l);
    --> Uncaught Reference: l is not defined

    var v = 2;
    let l = 1;
  }
}

x();

In this case the variable v will return undefined while the l variable will return an error, this happens because declarations using var are hoisted / lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made.

That's it ! nothing too complicated but it's important to keep these concepts fresh in your minds.

See you soon for more tips !

CSS Grid : Auto-Fit & Auto-Fill

Nuno Pereira — Thu, 22 Aug 2019 00:05:04 +0000

In CSS Grid when using repeat, instead of a set number of times, we can use auto-fit or auto-fill.

By using one of these properties we can create a responsive grid container without the need of extra media queries.

Let’s imagine we want to build a 5 column grid container, we can quickly do that by adding a couple of css lines to our div container:

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

To use auto-fit or auto-fill properties, first we need to use the minmax property in our grid, minmax will let you define the minimum and maximum width of each column in our container.

Lets refactor our code to use minmax property, in this particular case I will define 150px as minimum and 1fr as maximum, 1fr will allow for each column to stretch evenly if we have space on the container :

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}

I added a couple extra lines of css just to make things easier to see.
Let’s check that code in action here !

Great, we have a 5 column grid layout that is working as expected but as soon as we try to view our grid on smaller devices we notice that it’s not responsive.

Let’s implement the auto-fit property and see the differences:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

And with this simple change suddenly we have a responsive 5 column grid layout, let’s see it in action here !

Now we have a fully responsive 5 grid container without the need to use any media query.

The difference between using auto-fill and auto-fit for sizing columns is only noticeable when the row is wide enough to fit columns in it.

If you’re using auto-fit, the content will stretch to fill the entire row width whereas with auto-fill, the browser will allow empty columns to occupy space in the rows.

Let’s see the same example we have been using but now with the auto-fill property in action here !

And that’s it, hope you enjoyed this small tip on CSS Grid properties.