DEV Community: francesco marassi

Rock the IoT world with JavaScript and Espruino

francesco marassi — Fri, 12 Jun 2020 07:33:37 +0000

A detailed tutorial on how to install Espruino on ESP32 and rule the IoT world using only JavaScript.

A few days ago, during a spring cleaning session, I discovered an **ESP32 **I bought for an old project (but never used), buried in a closet. I’m talking about a microcontroller device which is extremely cheap yet with a lot of great features, like a built-in Wi-Fi module.

Since I’m almost only using JavaScript in these days, I decided to install Espruino on it to be able to control it with a language that I already know and is familiar to me. So I immediately blew away the dust and tried to connect it to my Macbook but I found some issues on the first setup.

So I spent some hours on forums and Stack Overflow looking for a way to fix it, so now here you have the ultimate guide on how to install Espruino and JavaScript on an ESP32 with all the possible solutions on all the possible problems.

First, let’s start with a noob question:

What is an ESP32?

An ESP32 is a microcontroller with integrated Wi-FI and Bluetooth Low Energy. **It’s basically a chip of the dimension of your thumb that you can use to access the Internet and call APIs or communicate with your phone. **Pretty cool, right?

Here are some of the advantages for which I use/recommend the ESP32 microcontroller:

create a DIY domotic house;
read the temperature (with an external sensor) and humidity of your house every minute and send it to a server;
build an air quality sensor;
create an album cover visualiser connected with Spotify (this is really cool)

Also… it’s extremely cheap! You can find some single ESP32 at 3–4$ on Aliexpress or a bundle at 2$ each. If you want to have it in your hands tomorrow, you can also find them on Amazon Prime at ~10$ each; which is not that cheap compared to the others but is still less expensive than other IoT boards!

ESP32 it’s the direct successor of the ESP8266 (I wrote an article about it some years ago), and it carries a much powerful dual-core processor and more RAM. Moreover, it features some extra PINs and some useful built-in sensors.

You can do some really cool stuff with all this additional power, and the best part… you can also install JavaScript on it, with Espruino!

What is Espruino?

Espruino is an open source JavaScript interpreter for microcontrollers. It permits to use JavaScript within low-cost chips, meaning that you can start using it immediately even if you are not familiar with programming languages such as Arduino, Lua, etc..

Yes, after conquering the front-end world (JavaScript, React, Angular…) and the back-end world (with Node.js) you can also use JavaScript on the physical world with IoT devices and finally be able to use JavaScript everywhere, literally.

How to flash Espruino on an ESP32

Let’s start from a first setup: when you use an ESP32 for the first time it normally comes without code inside or with some Lua code to blink the internal led. Therefore we need to install Espruino in order to start doing our great JS stuffs. Such process is called Flashing, but don’t worry, exposing your genitals in public places isn’t necessary! Please, put back on your underwear, thank you.

First of all: let’s download Espruino!

Go to the download page of espruino.com and select the binary for ESP32, then click on the first link for the latest Espruino Version (v2.05 as of May 2020)

Download all 3 files:

We will use them in a moment. First we need to be sure that our ESP32 is visible by our computer.

Find our ESP32

Let’s connect our ESP32 to a USB cable and to our computer. If it’s brand new, it should start blinking its LED, since that’s its default installed program (and also it’s a good way for us to make sure the device is not damaged).

Then, we need the location assigned by our PC to the ESP32 in order to address it when we are going to flash it. To obtain that, we need to install some drivers on our PC to let it successfully view the ESP32.

Install these drivers to be able to view the device from your PC/Mac (just find the right one for your operating system, download the executable and run it).

Based on your hardware of the ESP32, you may have to install only one of these drivers (I, for example, installed only the first one). Install them both just to be sure :)
USB to UART Bridge VCP Drivers - Silicon Labs
Virtual COM Port Drivers

Installed? Good.

Now open your terminal and type (if you are on Linux)

ls /dev/tty*

Or if you are on a Mac

ls /dev/cu*

For Windows users: go to the end of this guide, you will find a good guide on how to locate your ESP32 there!

If you see something like

/dev/tty.SLAB_USBtoUART

/dev/cu.SLAB_USBtoUART

You are ready to go! Remember this path, as it’s the location (port) where our ESP32 is located on our PC.

If you are on Mac and don’t see any device, it may be due to that fact that MacOS is preventing the drivers from loading. Open System Preferences -> Security & Privacy -> General and check if there is a message shown here about “System Software from developer …” where the developer name is Silicon Labs or FTDI and click on ‘Allow’ after entering your Admin password when asked.

Install Espruino

We will use **esptool **to install Espruino. It’s written in Python, so be sure to have either Python 2.7 or >3.4 installed on your PC.

Then, using pip, run this command:

pip install esptool

If this throws an error, try python -m pip install esptool or pip2 install esptool. This will install esptool in the executables directory and we will be able to run it from anywhere.

Do you still remember those 3 files we downloaded a few steps ago, and where did we put them? Great, now: go to that folder with your terminal and slightly edit this command in order to add our ESP32 location.

esptool.py                                          \
        --chip esp32                                \
        --port <INSERT HERE YOUR ESP32 LOCATION>    \
        --baud 921600                               \
        --after hard_reset write_flash              \
        -z                                          \
        --flash_mode dio                            \
        --flash_freq 40m                            \
        --flash_size detect                         \
        0x1000 bootloader.bin                       \
        0x8000 partitions_espruino.bin              \
        0x10000 espruino_esp32.bin

Just replace after — port the location found before. I replaced it with ---port /dev/cu.SLAB_USBtoUART .

And… Your ESP32 is now flashed with Espruino! 💪

Setup Espruino Web IDE

The easiest way to write (and execute) code on the ESP32 is by using Espruino Web IDE, a Chrome App which makes it possible to:

Connect an ESP32 (or any other Espruino devices);
write JS code and then execute it on your ESP32;
open an interactive console, where you can debug your code or test some methods before flashing the code.

It’s available here:
Espruino Web IDE

First of all, we need to establish a connection with our Espruino. To do that, we have to change the default settings of Espruino Web IDE or we won’t be able to connect it in the right way. Believe me, I lost 4 hours on this.

Press the Settings Cog on the top-right angle, open the ‘Communications’ Tab and change the Baud Rate from 9600 to 115200. It will be saved automatically.

Ok, now close the settings and start working with your ESP32!

Press the ‘Plug’ yellow button on the top-left angle and select the Port that we found before (in my case: /dev/cu.SLAB_USBtoUART).

If it becomes green, then we are connected.

Let’s try with something simple: an Hello World (obviously).

As you can see, on the left side of the IDE, after we connected to the Espruino, there’s now a prompt. It’s the interactive console I announced before.

Let’s write console.log('Hello ESP32!'); and press Enter.

This code was executed on our ESP32, and it returned correctly. (console.log always returns undefined).

(Finally) let’s write some code!

For the next part we’re going to use all of Espruino’s potential just to… turn a LED light ON. (We are off to a good yet simple start, we must focus on the first steps, first. We’ll do something much cooler in the next articles, I promise! 🤞)

As we already saw some paragraphs ago, the ESP32 has an internal LED, and that LED is connected to the PIN n° 5. Here in Espruino the Pins are expressed with D1, D2, D3… ‘D’ as Digital Pin, so we can find the PIN n°5 in the variable D5. All Pins are already initialised by Espruino, so we don’t need to declare D5 before start using it.

We can use the Espruino method digitalWrite to write on the PIN D5 and change its state from OFF to ON. Just a note: to set a LED on, you must pass a 0 value. By default (LED off) the value is 1. I know it isn't the most intuitive thing in the world, but please keep it in mind as we are also going to use it in the future. Here is a good explanation about this.

Let’s try it! Just write digitalWrite(D5, 0) or digitalWrite(D5, false) in the console, and press Enter. You'll see the ESP32 internal LED is now on! 🥳

If you want to turn it off, just execute digitalWrite(D5, 1).

As by now, we gave our ESP32 simple one-line instructions that were executed immediately. What about some code that can be executed endlessly?

We are going to write some code to turn ON and OFF every 500 milliseconds our internal LED D5. The best part is… we are going to use all basic JavaScript instructions to do it, as we don’t need to learn any new command nor language.

Here is the code, copy/paste it in the right part (the white one) of Espruino Web IDE:

Pin.prototype.blink = function(period) { 
  var on = false;
  var pin = this;
  setInterval(function() {
    on = !on;
    digitalWrite(pin, on);
  }, period);
};
D5.blink(500);

Looks familiar? That’s because it’s almost the same JavaScript code that you can run in your browser! That’s the beauty of Espruino: it’s just JavaScript 😉

We are going to extend the prototype of the Pin object to add a new method, blink. This method has an internal variable to the current state of the PIN (on/off) and we are going to use setInterval to switch the state and digitalWrite it on the PIN.

To load this code to our ESP32, we need to press the third button in the middle of the IDE: the “Send to Espruino” button.

After some seconds, you’ll notice the LED blinking. Nice!

Right now our code is in the memory of ESP32, but if you unplug it and then plug it again the USB cable it will lose all instructions and remain idle.

To permanently save our instructions, so that every time you turn on the device it will execute the code, you need to go to the console and type save(). That’s it, after a moment the code will be saved and now you can also plug it in a USB power adapter or to an USB external battery and it will work as expected.

What’s next

This article was an introduction on:

What is Espruino and what is a ESP32 device;
How to install Espruino and how to avoid all the first-setup headaches;
How to use Espruino Web IDE and connect it to our ESP32;
Run some basic code on it and save the code.

But there are lots of more pretty cool things that we can do with this cheap and small device and Javascript.

I will release a new article in the next weeks on how to connect our ESP32 to a WI-FI network, how to create an access point, and how to use it as a IoT node to send some data to an external service and view this data in a browser.

If you have any question, don’t hesitate to contact me on Twitter!

More Resources

Espruino guide for ESP32: https://www.espruino.com/ESP32
Extra info on the drivers and how to find your ESP32 serial connection (Windows users: this is your guide): https://docs.espressif.com/projects/esp-idf/en/latest/esp32/get-started/establish-serial-connection.html
Espruino Methods Documentation: https://www.espruino.com/Reference#software

A note from the Plain English team

Did you know that we have four publications? Show some love by giving them a follow: **JavaScript in Plain English, **AI in Plain English, **UX in Plain English*, **Python in Plain English *— thank you and keep learning!

Also, we’re always interested in helping to promote good content. If you have an article that you would like to submit to any of our publications, send an email to **submissions@plainenglish.io **with your Medium username and what you are interested in writing about and we will get back to you!

How to create a React Hook to make AJAX calls

francesco marassi — Thu, 11 Jun 2020 13:58:18 +0000

Today we are going to create a simple hook that helps me everyday in my React projects, both web and react-native: a hook to make Ajax Calls and that returns the response.

For testing the hook, we are going to build a simple app that will display all the Houses of Game Of Thrones, provided by https://www.anapioficeandfire.com.

To summarize, this is what we are going to do in this article:

create a new React Hook
this Hook will accept an URL to fetch and a series of options (queries, method and body)
this Hook will return an object with the AJAX response and a loading and error boolean values
Every time one of the options given to the hook is changed, the Hook will fetch again the URL
create a demo app to test this useFetch Hook

Let's start ✨

First, let's create the skeleton app ☠️

I think I made this step 300 times in the past years, but I always find myself googling the correct command to use with create-react-app. I think I have some sort of selective forgetfulness for this simple command... so this part is more for the future me than for you :)

npx create-react-app use-fetch
cd use-fetch
yarn start

And after installing all the right modules, we go to https://localhost:3000 and the app is running :)

Create the hook

Let's start by creating a folder in src called hooks and create inside a file called useFetch.js .

mkdir src/hooks
touch src/hooks/useFetch.js

And inside the file we will put this:

import { useState, useEffect } from "react";

const queryString = (params) =>
  Object.keys(params)
    .map((key) => `${key}=${params[key]}`)
    .join("&");

const createUrl = (url, queryOptions) => {
  return url + "?" + queryString(queryOptions);
};

export default (url, options = { body: {}, query: {} }) => {
  const [data, setData] = useState({
    response: null,
    error: false,
    loading: true,
  });

  useEffect(() => {
    setData({ ...data, error: null, loading: true });
    fetch(createUrl(url, options.query), {
      method: options.method || "GET",
      headers: {
        "Content-Type": "application/json",
      },
      body: options.method !== "GET" && JSON.stringify(options.body),
    })
      .then(async (response) => {
        const data = await response.json();
        setData({
          response: data,
          error: !response.ok,
          loading: false,
        });
      })
      .catch((error) => {
        //fetch throws an error only on network failure or if anything prevented the request from completing
        setData({
          response: { status: "network_failure" },
          error: true,
          loading: false,
        });
      });
  }, [url, JSON.stringify(options)]);

  return data;
};

Let's take a look together at the code of our hook. There are two utility function that I'm not going to explain here, but if you need any help you can always contact me and ask :)

We are going to explore the hook part by part:

export default (url, options = { method: "GET", body: {}, query: {} }) => {

....
})

The hook will accept 2 parameters:

an URL
a 'options' object, that inside will have
- a HTTP method (GET, POST)
- a body, if you are going to use the method POST
- a query, where you are going to put all the query params of the AJAX call.

Important: I specified only GET and POST methods. This is because this hook is made only to fetch data, not to update/create resources. Normally you should always use GET requests to fetch data, but since some APIs in the wide Internet are also using POST requests I decided to add that as well.

export default (url, options = { method: "GET", body: {}, query: {} }) => {
    const [data, setData] = useState({
    response: null,
    error: false,
    loading: true,
  });
....
})

We are going to use the hook useState to store some internal variables, that at the end of the hook will be returned to the React component. We are going to initialize the state with an object with 3 parameters:

Response, that will contain the JSON response of the API called
Error, in case the response status is not ok
Loading, that will be true if the hook is still fetching the request. Since we are going to call the request as the next step, loading is already set to true

Inside useEffect

Let's continue to explore the hook. Here we are going to use the hook useEffect to do something only when something in the params changes; if the component changes the url or any of the params inside options (query, body, method), the useEffect function will re-run.

useEffect(() => {
    setData({ response: data.response, error: false, loading: true });
        ...
}, [url, JSON.stringify(options)]);

We are using JSON.stringify to return a string of our options values. In this way the useEffect won't have any problem noticing changes even if the object is nested.

The first thing that we are going to do is to change the value of the data state with:

loading set at true
error set at false
response will still be the previous response (null for the first time). This will help if you want to display the old data even when you are fetching the new data.

Fetch for the rescue 🚀

We are going to use the fetch function to make the AJAX call. We are going to add the header Content-Type to application/json since we are going to use only APIs that requests json parameters.

Just a note: instead of throwing an error if the response is not ok (like axios), fetch is still resolving successfull, but will have a response.ok set to false. For this reason we will need to check in the resolved data if response.ok is true or false and set the error state field accordily.

useEffect(() => {
    setData({ ...data, error: false, loading: true });
    fetch(createUrl(url, options.query), {
      method: options.method || "GET",
      headers: {
        "Content-Type": "application/json",
      },
      body: options.method !== "GET" && JSON.stringify(options.body),
    })
      .then(async (response) => {
        const data = await response.json();
        setData({
          response: data,
          error: !response.ok,
          loading: false,
        });
      })
      .catch((error) => {
        //fetch throws an error only on network failure or if anything prevented the request from completing
        setData({
          response: { status: "network_failure" },
          error: true,
          loading: false,
        });
      });
  }, [url, JSON.stringify(options)]);

Every time the fetch method resolve or throws an error, we are going to update the data state with all the right fields, setting loading to false.

And... that's it!

This is everything about the hook, now we just need to use it 🚀

Use the useFetch hook

We will use the "An API of Ice and Fire" https://www.anapioficeandfire.com/ to create a simple paginated app that shows all the different Houses in the "A Song of Ice and Fire" series.

NB: all the code can be found on my Github page. As you can see, I removed some unused files from the boilerplate create-react-app. Also note that this is the final result, at the end of this article.

Let's go to src/App.js and replace the content with this:

import React from "react";
import useFetch from "./hooks/useFetch";
import "./App.css";

function App() {
  const { response, error, loading } = useFetch(
    "https://www.anapioficeandfire.com/api/houses",
    {
      query: {
        page: 1,
        pageSize: 10,
      },
    }
  );

  if (loading) {
    return <div className="loading">Loading...</div>;
  }
  if (error) {
    return <div className="error">{JSON.stringify(error)}</div>;
  }
  return (
    <div className="App">
      {response.map((data) => {
        return (
          <div className="datapoint" key={data.Date}>
            <h3>{data.name}</h3>
            {data.words && <cite>"{data.words}"</cite>}
            {data.coatOfArms && (
              <p>
                <b>Coat of Arms: </b>
                {data.coatOfArms}
              </p>
            )}
          </div>
        );
      })}
    </div>
  );
}

export default App;

And this will be the result.

We haven't add any style yet, so it's pretty ugly. We can fix that by adding some CSS in src/App.css (we won't use any fancy styled-components or scss module or any of the things that the cool kids are using these days since it's only a demo).

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-size: 20px;
}


h1,
h3,
p,
button {
  padding: 0;
  margin: 0;
  font-size: inherit;
}

h1 {
  padding: 16px 32px;
  font-size: 28px;
  color: #666;
}

p,
cite {
  font-size: 16px;
}


.datapoint {
  padding: 16px 32px;
  border-bottom: 2px solid #9dc8c8;
  font-size: 20px;
  color: #666;
}

That's much better!

Support pagination (and queries to useFetch)

So right now we are showing only 10 houses. That's ok, but I think that we can do better. We are gonna change the code to add some buttons to go to the next (or previous) page and view new results ✨

But first, add some style

Let's add some extra style that we will need in the next steps: open src/App.css and replace the content with this:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
}

h1,
h3,
p,
button {
  padding: 0;
  margin: 0;
  font-size: inherit;
}

h1 {
  padding: 16px 32px;
  font-size: 28px;
  color: #666;
}

p,
cite {
  font-size: 16px;
}

.datapoint {
  padding: 16px 32px;
  border-bottom: 2px solid #9dc8c8;
  font-size: 20px;
  color: #666;
}

.pagination {
  margin-top: 15px;
  padding: 0 32px;
}

button {
  outline: none;
  padding: 10px 16px;
  appearance: none;
  border: 2px solid #519d9e;
  background: #519d9e;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  margin-right: 16px;
}

.loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #519d9e;
  font-weight: 800;
}

Use useState to handle the currentPage variable

We are going to use a currentPage variable to be aware of what is the current page shown in the app, so let's setup that in our src/App.js

import React, { useState } from "react";
import useFetch from "./hooks/useFetch";
import "./App.css";

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const { response, error, loading } = useFetch(
    "https://www.anapioficeandfire.com/api/houses",
    {
      query: {
        page: currentPage,
        pageSize: 5,
      },
    }
  );
....

We initialise the value of currentPage to 1 and we also edited the page value of the useFetch query object to use currentPage instead of the constant 1 of before.

Now, let'add some extra parts in the JSX. We are going to:

add a title, with the current page number inside;
add under the list of Houses the pagination section, with the 2 buttons to change page;
move the Loading div, so the title and the pagination section will always be visible.

return (
    <div className="App">
      <h1>Game of Thrones Houses - Page {currentPage}</h1>
      {loading && <div className="loading">Loading page {currentPage}</div>}
      {!loading &&
        response.map((data) => {
          return (
            <div className="datapoint" key={data.Date}>
              <h3>{data.name}</h3>
              {data.words && <cite>"{data.words}"</cite>}
              {data.coatOfArms && (
                <p>
                  <b>Coat of Arms: </b>
                  {data.coatOfArms}
                </p>
              )}
            </div>
          );
        })}
      <div className="pagination">
        {currentPage > 1 && (
          <button
            onClick={() => {
              setCurrentPage(currentPage - 1);
            }}
          >
            Go to page {currentPage - 1}
          </button>
        )}
        <button
          onClick={() => {
            setCurrentPage(currentPage + 1);
          }}
        >
          Go to page {currentPage + 1}
        </button>
      </div>
    </div>
  );

And... we are ready! Let's try it on localhost:3000

Let review what we have done today:

created a new React Hook ✔️
this Hook will accept an URL to fetch and a series of options (queries, method and body)
this Hook will return an object with the AJAX response and a loading and error boolean values ✔️
Every time one of the options given to the hook is changed, the Hook will fetch again the URL ✔️
create a demo app to test this useFetch Hook ✔️

We can still do better. In the next weeks I will release a new tutorial that will enhance useFetch to:

automatically transform the response
conditionally call the AJAX call (now it's calling it immediately)
add a default response (useful if you don't want to call the API immediately)
add support for redux and dispatch

As always, message or follow me on Twitter if you have any questions 💛

The easiest way to setup multiple environments on React Native

francesco marassi — Mon, 16 Mar 2020 11:24:06 +0000

There are some things that I found trivial and a little difficult to do on React Native that are so easy inside a web application; one of these things is handling different environment variables.

It’s normal to have only one environment when you are still developing the app, but when some other users are starting to test it or when you are going to release it you may want to use different URLs for the APIs, like a develop version of the APIs that has access to also new endpoints or a more catch-all logger, and a production-ready version, well tested and with the production database for the release version.

Sometimes you need more than 2 environments, like:

Develop: This is where you are going to develop all the new features of your app; the environment is ready to help you with better logs and fake databases that you can delete and recreate whenever you want if you screw a lot;
Staging:The app version in staging is tested by the client, friends or by some colleagues from Quality Assurance and the environment is an almost-replica of the Production Version;
Production:this is the version that you will release to the Stores

So how to store (and use) different variables for different environments?

Obviously I tried to Google the answer, but the solutions that I found seemed too difficult or not flexible enough for me.

The most used way to manage different environments on React Native is with react-native-dotenv: at first I though this was a port of node dotenv library that normally I use on my web applications. Unfortunately it seems that handles at most 2 environments (one development and one release/production) and also has some terrible cache of the variables. One time I spent 2 hours Skipe-ing with another dev to understand why the app on his machine was using another API endpoint (solution: after you change a variable inside the .env, you must change/add a line to the file that import that variable or react-native-dotenv will continue to serve the old variable)

An easier solution

Here is the method that I’m currently using; prepare your fingers because you will need to create some new files.

First, we will store all our environments in JSON files in a envs folder.

I’m going to create 3 environments for this article (development, staging and production) and each one will have a different API_URL

envs/development.json

{
"API_URL": "https://development.api.com",
}

envs/staging.json

{
"API_URL": "https://staging.api.com",
}

envs/production.json

{
"API_URL": "https://production.api.com",
}

Still with me? Now we are going to create a node script that will change the environment file every time we want to switch enviroment.

I put it on a scriptsfolder (where I also have other scripts to automate other parts of my building process)

scripts/set-environment.js

#!/bin/node
const fs = require("fs");
//Obtain the environment string passed to the node script
const environment = process.argv[2]
//read the content of the json file
const envFileContent = require(`../envs/${environment}.json`);
//copy the json inside the env.json file
fs.writeFileSync("env.json", JSON.stringify(envFileContent, undefined, 2));

This set-enviroment.js is only 4 lines long: first it store in a variable the first argument when you call the script, then it will requirethe file inside envswith the same name, and finally will create a env.json file on the root folder with the content of envFileContent.

Now we can try it and call

node scripts/set-environment.js development

And ✨MAGIC ✨… a new env.json file is in the right place, ready to serve all your variables.

Also, you can setup some scripts in your package.json file to be able to switch environment without typing all that words in your Terminal: just type yarn env:dev and you are good to go.

{
  "name": "your-app-name",
  "scripts": {
    "start": "react-native start",
    "env:staging": "node scripts/set-environment.js staging",
    "env:dev": "node scripts/set-environment.js development",
    "env:prod": "node scripts/set-environment.js production",
    ...
  },
  "dependencies": {...},
  ...
}

How to use it the new .env file in your code

Now you just need to import from the src/env.json file your variables and you are ready to go! 🚀

How to automate the switch of environment

Now we need a way to automatically switch environment.

This is almost free if we create some new scripts inside package.json:

{
  "name": "your-app-name",
  "scripts": {
    "start": "react-native start",
    "env:staging": "node scripts/set-environment.js staging",
    "env:dev": "node scripts/set-environment.js development",
    "env:prod": "node scripts/set-environment.js production",
    "_ios": "react-native run-ios",
    "ios": "yarn env:dev && yarn _ios",
    "ios:staging": "yarn env:staging && yarn _ios",
    "ios:prod": "yarn env:prod && yarn _ios",

    "_build:ios": "react-native bundle --platform ios ...",
    "build:ios": "yarn env:dev && yarn _build:ios",
    "build:ios:staging": "yarn env:staging && yarn _build:ios",
    "build:ios:prod": "yarn env:prod && yarn _build:ios",
  },
  "dependencies": {...},
  ...
}

I removed some scripts and all the dependencies to maintain the code part light. The Android scripts are the same as the ios counterpart.

So now, every time I want to launch on the Simulator my iOS app with the production environment, I just need to launch

yarn ios:prod

And the environment variables will be loaded on your App.\
What if I want to build the iOS release version to submit to the App Store?

yarn build:ios:prod

This is the only command that you will need ✨

How to remove files already added to git after you update .gitignore

francesco marassi — Thu, 05 Mar 2020 17:26:58 +0000

How many times you commited files on git in an entry phase of a project and only after a while you noticed that the files are useless? (For me: at least 3–4 times every project — damn android builds files on react-native)

Even if you update your .gitignore, the files will continue to be tracked and inside your repository.

So how you can remove them? Here 3 simple steps to do it:

1. Be sure to have committed all changes

You shouldn’t have any uncommitted files in your working directory. To be sure about that, use

git status

If it returns

nothing to commit, working tree clean

You are ready to go! 🚀 If not, add and commit your files or stash them.

Step 2: Remove everything from the repository

To clear your repo, use:

git rm -r --cached .

rm is the remove command of git
-r means recursive, so it will remove also inside folders
–cached meas that will only remove files from the git index, not from your current directory; your files are safe ✨
. indicates to remove all files. If you want to untrack only one file, add the path instead of. , eg: git rm — cached .env

Step 3: Add everything again

That’s the easy part:

git add .

Step 4: Commit and party

Now commit your changes

git commit -m "removed useless files"

And now your repository follows your .gitignore rules! It’s time to party!

How to simultaneously launch multiple instances of iOS simulator on Expo

francesco marassi — Thu, 09 Jan 2020 17:45:11 +0000

On every React Native project that I was involved, there was always a most-feared moment: checking if your app is running as expected (and as similar as possible to the UIs shared by the designer) on lots of smartphones and iOS/Android version.

By default Expo permits you to load open only one iOS Simulator via expo-cli ios or via the Expo developers tools, but it's really difficult to check if the layout is working as expected (and to check that the current fix isn't breaking anything else) when you have only one device

You can always open multiple instances of the iOS Simulator manually, install the Expo app on each one and then launch the app, but it's a waste of time if you need to do it everyday or if you press cmd+q by mistake.

Bash script to the rescue

To fix this problem, we can create a bash script that automatically starts the iOS simultators, installs the latest version of the Expo app and launches your app.

1. Find the IDs of the devices that you want to launch 👀

The best way is to open your terminal and launch

xcrun simctl list

That will outputs all the simulators available on your Mac. They are already sorted by iOS version and by device type.

We are going to launch 3 devices: a iPhone 5s, a iPhone 6s Plus and a iPhone 11 Pro Max. Let's copy their IDS (the alphanumeric characters after after the device name) and save for later.

5C023A36-BAF9–4417-AD44-E1A446081337
DD0B67AD-FFD2–408A-AB0B-556801E7B342
A232D839-BC4B-45DA-8B6C-F57DA8EB44DC

2. Find the latest version of the Expo app

We will need to know the latest version of the Expo app client that will be installed on the simulators (as of January 2020, this is the 2.14.1).

The app is already present on the Expo cache on your Mac, so we just need to go to this folder

~/.expo/ios-simulator-app-cache

And you will find all the app versions already downloaded by Expo.

3. Create the script👨‍💻

Create a file named start_simulators.sh (change the name as you want) and enter this code (I found this script on this StackOverflow answer, by Stephan Schlecht):

#!/bin/bash
declare -a simulators=("0FAE2F92-9EF7-4C4A-8F9D-097A056F8CC0" "BFCDD662-E4DE-4C08-9DF6-CAACA7C00CEC" "1A6959A0-C10F-474B-96C5-7E8955FBDD80")

for i in "${simulators[@]}"
do
    xcrun instruments -w $i
    xcrun simctl install $i ~/.expo/ios-simulator-app-cache/Exponent-2.14.1.app
    xcrun simctl openurl $i exp://127.0.0.1:19000
done

As you can see, in this script you need to put both the simulators IDs (with quotes and space separated) both the latest version of the Expo App.

Now you need to make this script executable:

chmod 755 start_simulators.sh

4. Use it as much as you want ✨

Now you can enter in your terminal the command

./start_simulators.sh

And it will automatically start the selected simulators, as well as install the Expo app opening the Expo app on port 19000.

Now it's time to fix that UI bugs!