Forem: Alexandre C.

WHY I BELIEVE IN CROSS-PLATFORM TECHNOLOGIES

Alexandre C. — Wed, 01 Mar 2023 21:43:01 +0000

In 2023, we really have a choice to develop a mobile application (web is even worse, I don't know how they manage to decide 😄). Without getting into the eternal native vs. cross-platform debate, I will explain here why I believe that choosing a cross-platform technology like Flutter or React Native is truly relevant for starting a mobile application project in 2023:

Get 2 applications for once: you get a REAL mobile application for both iOS and Android at the same time. And it comes with all the other bonuses! Maintaining a single codebase, recruiting/managing a single mobile development team instead of separately for iOS and Android.
Meet functional and business needs: when you take a step back, you'll notice that the vast majority of mobile applications boil down to displaying UI, dynamic lists of content, search journeys, detail pages, features like user authentication, saving favorites, notifications, API calls and database for displaying or updating content, etc... Nothing that cross-platform technologies cannot do in 2023.
Get good quality and performance: I know, it's a big topic, especially if developers are reading this. But in reality, cross-platform mobile applications are as performant and high-quality as native applications today; many expert studies show this. Take your phone, download Facebook, Tesla, Discord, BMW, Sncf Connect applications (all cross-platform) and tell me if as a user, you see a real shocking difference in terms of fluidity, UI and user experience.
Manage cost: it's not news that the tech industry is struggling right now, with all the layoffs, especially in the USA. Huge blind investments are rare and the big growth of tech companies has slowed down. The industry is currently in a period of cost reduction, and it impacts everyone, including projects. In my opinion, cross-platform has its best card to play right now.
Target several devices: few companies want just a mobile application. Often they also want a website or web application. People buy more phones or tablets than PCs. New devices are selling more and more (smart watches, VR headsets, embedded dashboards in cars...). So many platforms for which companies would want to offer an application to their users. Again, cross-platform technologies have already anticipated this evolution and are doing well.

The list is not exhaustive, there are other benefits. In 2023, I think we need to dare changing our approach and questioning some status quos. And above all, try to look ahead and anticipate the future by making appropriate choices.

How to set environment variables with EAS/Expo and React Native

Alexandre C. — Fri, 27 Jan 2023 05:33:46 +0000

Most of the time your project will need to handle environment variables such as API Url or API key. As it is unsafe to store your keys and sensitive data on Github/Gitlab or hardcoded in your project, the best solution when it comes to React Native project is to benefit from EAS and Expo configuration.

Prerequisites

Your React Native project should be configured to use EAS, follow this documentation if it's not the case.

Then if your project is already managed by Expo you should have the expo-constants package, if not you can install it following these instructions.

Last you have to install dotenv package in your project

npx expo install dotenv

Configure your environment variables

First important thing, at the root of your project you must convert the app.json file to app.config.js file

Plaintext environment variables

In your eas.json file you can add plaintext/harcoded environment variables that you are comfortable with committing to your source code. For example API Url.

Warning
Don't put secrets here!

eas.json

Then in your app.config.js you must reference these variables like this

app.config.js

Secrets

To manage secrets in your environment variables you have to create a new secret with EAS CLI

eas secret:create --scope project --name SECRET_NAME --value secretvalue --type string

To view any existing secrets for your project, run

eas secret:list

You can also importing your secrets from a .env file

eas secret:push --scope project --env-file .env

Then to access your secrets you need to configure your app.config.js file

Access your environment variables in your project

To use environment variables in your project it is easy using expo-constants package.

For example in a screen

For more details and configuration you can always to the official Expo and EAS documentation

How to submit for review your iOS and Android applications with EAS and React Native

Alexandre C. — Thu, 26 Jan 2023 10:43:30 +0000

With EAS you can submit for review your React Native app, directly from terminal. No need to do it manually from the stores dashboards.

Prerequisites

For both iOS and Android you should have filled in the required fields and have created a new app from the dashboards. You can follow this guide to understand how to proceed for iOS, and this guide for Android.

Also, you must have installed the EAS CLI. You can refer to this guide to see how to proceed

iOS

For iOS you need to configure the eas.json file as follow



"submit": {
    "production": {
      "ios": {
        "appleId": "your.apple.id.username",
        "ascAppId": "123456789",
        "appleTeamId": "1AB2C3D45E"
      }
    }
  }

Apple ID is the username of your Apple Developer Account, the email that you use to connect to your Apple account

ascAppID is the App Store Connect unique application Apple ID number. You can find it under App Information section when you created your app on App Store Connect

appleTeamId is your Apple Developer Team ID. You can find it under you Profile settings

When eas.json file is configured correctly, open a terminal and run



eas submit --platform ios

That's all your app should be submitted for review. You can refer to the official documentation to get more information and configuration.

Android

For Android the steps are different, you need to create a Google Service Account and download its JSON private key

Prerequisite

Your Android app must have been submitted manually once before.

Create a Google Service Account

You need to connect to your Google Cloud Console, select your project and search for the Services Accounts section, then click Create Service Account

You can fill in the required fields as follow

Then you need to select a role for your service account. Choose Service Account User and click Done button.

When you are back on the services accounts dashboard you need to create a new key for your service account

Then create a new key

And choose JSON format

You can download the json file and rename it as you want. I recommend name it service_account.json for better clarity.

Start the submission

Now that you have the JSON service account file you need to like it to your project. At the root of your project upload your service account json file

And configure your eas.json file as follow



"submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "./service_account.json",
        "track": "production"
      }
    }
  }

Warning
Don't forget to add service_account.json file to your .gitignore !

You can now submit your app to Play Store


 submit --platform android

You can refer to the official documentation for more information and configuration

Final eas.json file

Your final eas.json file should look like this

How to submit your Android application on Play Store

Alexandre C. — Wed, 25 Jan 2023 18:00:16 +0000

Prerequisites

You should have at least one .aab file, which is production ready generated build.
You can take a look at this article if you want to learn how to generate a production ready build with React Native and EAS/Expo

Besides you should have an Google Developer Account

Create an app

When connecting to your Google Play Console dashboard you can click the Create App button

Then you must fill the required fields and accept the declarations

Set up your app

This is the most important section, all sections must be filled

Privacy Policy

I recommend to use a privacy policy generator to handle your privacy policies. You can find one here which is free.

App Access

If your app has limited access such as authentication, protected screens you shoud provide instructions and account details that a Google member can use to test your app

Check if yes or not your app contains advertising

Content ratings

Start answering the questions to determine the minimum age rating of your app. Remember that telling the thruth will speed up the reviewing process because your app will be tested entirely first

Target audience and content

This section should be filled quickly if you correctly filled the ads and app access sections

News app

Just indicate if your app is a news app or not

Covid-19 contact tracing and status app

Just indicate if your app involves in any way status about covid and contact tracing

Data safety

You should read carefully this section and answer according to your app specificity

Government apps

Just indicate if your app is developed by or on behalf of a government

Store settings

This section is where you can configure the global info of your app on the store such as app category and contact details

Main store listing

In this section you can fill all information that should be displayed on the Play Store such as app name, description, screenshots

Release your app

This is the last required section where you can upload your .aab file, select countries and regions where you wish the app to be deployed, select group of testers and submit your app for review

Deployment

Once your app has been reviewed it should be automatically available on Play Store, you will receive an email. It can take more than 2 days nowadays to review an Android app so be patient 😉

How to submit your iOS application on App Store

Alexandre C. — Wed, 25 Jan 2023 09:35:23 +0000

Prerequisites

You should have at least one .ipa file, which is a generated build for iOS ready for production.
You can take a look at this article if you want to learn how to generate a production ready build with React Native and EAS/Expo

Besides you should have an Apple Developer Account

Create an app

When you are connected to your developer account, you can click on My Apps from the dashboard

Then create a new app by clicking on the + icon

Choose New app

Configure your new app like this
Bundle ID should be the one you use in Xcode, you can create a new one or choose an existing one

SKU is a unique ID for your app, I recommend using the same as the bundle ID

User Access by default should be Full Access to make your app available to everyone. But if it is an admin app for example you can choose Limited Access

Fill in the details

The most important section appears first where you have to upload screenshots. You should fill in all the required fields.

For the Support URL I recommend using the one from a privacy policies generator where your privacy policies are stored, or the url of your website

For Marketing URL you can put the name of your website/portfolio

Build section

Under the Build section should appear the binary that you uploaded from Xcode or another tool. For example in React Native with EAS you just have to configure the eas.json file like this

You can find the ascAppId from the App Store connect dashboard under App Information section

The appleTeamId can be found in your App Store settings profile

Then, to upload your iOS app to the Apple App Store, run eas submit --platform ios from a terminal

App Review Information

The App Review Information must be checked and filled only if your app contains any authentication. You should provide an account that an Apple support member can use to authenticate through your app, and describe the steps in Notes. You can also provide a video in Attachment

App Information

You must fill in the details according to your needs in this section

Pricing and Availability

You must fill in the details according to your needs in this section

App Privacy

A very important section. You should fill in the details of your privacy policies according to your app features. This is important to tell the truth as your app will be review by a member of Apple team, and rejection of your app can delay your production deployment.

I recommend strongly to use this privacy policies generator to ease the process, and you can get a free URL storing your privacy policies

Submit your app for review

Other sections are not mandatory you can fill in if you want.

When everything is filled you can go back to the dashboard or your app and click on Add for Review

Ready for sale

When your app is available on App Store, the status should change to Ready for Sale from your app dashboard. Please note that the review process can take few days according to the complexity of your app and the detailed information that you have filled. It is important to give clear and accurate information to speed the process.

How to create production builds for App Store and Play Store with EAS/Expo and React Native

Alexandre C. — Tue, 24 Jan 2023 08:45:15 +0000

Through this guide I will walktrough the steps that are required to create production builds with EAS that are ready to be deployed on the stores.

Prerequisites

In order to follow it you must have the eas-cli installed on your machine. If it is not the case you can run from a terminal ```npm

install -g eas-cli


According to [Expo documentation](https://docs.expo.dev/build/setup/) with EAS CLI you can either deploy a bare React Native app or an app that has been created with Expo.

## Login into your Expo account

First you need to login by typing into a terminal ```eas

 login

If you are already signed in to an Expo account using Expo CLI, you can skip this step you should be already automatically logged in

Configure the project

Then you need to configure both iOS and Android for EAS build ```eas

build:configure


In `app.json` or `app.config.js` file I **strongly recommend** to configure the build number and version code which must match your package.json version, because EAS prevents you to submit twice the same app version, so you have to increase it manually to bypass EAS checks.

Example for the 1st release :

> app.json (or app.config.js)

![version 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5joooc083keaac320496.png)

Example for the 2nd release :

> app.json (or app.config.js)

![version 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3zsmsd0ljfw7da27x5o.png)

## Build for app stores

You must have a [Google developer account](
Google Play Consolehttps://play.google.com › signup) and a [Apple developer account](
Apple Developerhttps://developer.apple.com)

You can create separate build for Android ```eas

 build --platform android

Or iOS ```eas

build --platform ios


But it is better to create builds for both platforms at the same time ```eas

 build --platform all

Everything should be handled automatically by EAS now, you can follow the progress from the terminal. But if you don't want to wait you can escape the terminal when it tells you to exit with Ctrl+C / Cmd+C

By accessing your Expo dashboard you can check if the builds are deployed and download them to upload them in the stores

Example of Expo dashboard

Enjoy your new builds

When builds are successfully created it should generate a .ipa file for iOS and .aab file for Android.
These are the files that you have to upload on Google Play Console and Apple Developer Dashboard to submit your app to the stores

More details

To get more information about configuration and other things you should refer to the official documentation of EAS Build

Is Flutter the next big thing for cross-platform application development?

Alexandre C. — Wed, 24 Nov 2021 19:05:14 +0000

No! This is not the 100th article that will compare React Native VS Flutter 😄.
Today I just want to focus on this trending technology and subject, and talk about the benefits it can bring to mobile application development world.

On November 19th, SNCF France's national state-owned railway company, one of the most important in the public transport industry, annonced a big change with their applications : most of them will be merged and reunited in one application called SNCF Connect 👉🏾 https://archives.flutter-digest.com/editions/46
And in order to deliver it, rework and redesign what they already have they use Flutter 🤯
Passionate developers in France cannot wait the feedback from the technical teams, because this is the first time such a technology is used at this scale in France (millions users use SNCF applications everyday...)

During the last Flutter Engage keynote this year, we also learned that Ubuntu (one of linux distribution) is using Flutter to build the new Ubuntu installer software 👉🏾 https://ubuntu.com/blog/flutter-and-ubuntu-so-far

From the Flutter website we can see it is more and more adopted by big companies such as BMW, Alibaba, Toyota, Ebay or Tencent 👀 https://flutter.dev/showcase

So, is this the beginning of the end for other frameworks and libraries that do cross-platform development such as React Native, or native development such as Swift or Kotlin ?
Of course not! 😌

What is incredible in the IT world is that a new joiner can actually helps improve its competitors.
Take a look at SwiftUI for example, both SwiftUI and Flutter are declarative UI frameworks which allow you to develop composable components for your mobile application. They are so similar that a SwiftUI developer can switch to Flutter without being lost and vice versa. If you want to explore main similarities and differences between the two frameworks, you can take a look at this excellent article from Code Magic 👉🏾 https://blog.codemagic.io/flutter-vs-swift/

React Native, the main competitor of Flutter for cross-platform development is also improving constantly, learning from its strengths and weaknesses. Last example presented by William Candillon is Skia (graphic engine used by Flutter) can now be adopted in React Native too 🔥 https://youtu.be/AxLmUsJAH7c

From the last Stackoverflow Developer Survey https://insights.stackoverflow.com/survey/2021#most-loved-dreaded-and-wanted-misc-tech-want we can also see that the interes in Flutter is booming. It is one of the top 3 most loved ❤️ and wanted 🎯 technology combined!

I can't wait to see the latest stats to check if the trend will grow or decrease, but in my opinion it will increase.

Now, how can you decide which framework to use? How to check if Flutter is well adapted to what you want to deliver?
This great article from BAM Tech wrote an excellent comparison between React Native and Flutter, they created their own decision tree to decide which framework to use 👉🏾 https://blog.bam.tech/developer-news/react-native-or-flutter-the-decision-tree
If you speak or understand french, you can also take a look at their speech at Flutter France conference that occured 2 months ago 👉🏾 https://www.youtube.com/watch?v=qybl4GOAUR8&ab_channel=FlutterFrance (or activate the subtitles 😃)

To conclude, Flutter is not yet the champion without contest in its category. But it sure is a great competitor that is bringing positive changes to the community and the industry. The next years should decide if this technology will continue to grow or stabilize, if it will be adopted more and more or it will be just a temporary phase.

I personally bet on the growing side, not only because it is backed by Google, but because the developer community has done a fantastic job in few years. And because for me, when a technology is able to inspire other technologies or help them improve, this is the sign of a great success.

Pourquoi travailler avec un freelance en remote fera partie de la réalité de demain?

Alexandre C. — Mon, 15 Nov 2021 07:12:11 +0000

Avez-vous entendu parler de la Grande Démission (The Great Resignation en anglais) ?

C'est le phénomène dont tout le monde parle en ce moment aux Etats-Unis, le magazine Harvard Business Review y consacre même un article entier 👉🏾 https://hbr.org/2021/09/who-is-driving-the-great-resignation

Plus de 4 millions de salariés américains ont démissioné de leur poste, ce qui marque un tournant majeur dans le monde du travail, et ce qui illustre que depuis la pandémie les salariés ont modifié leur rapport au travail.

Certes les raisons de ces démissions sont variées et propres à chacun, et cela est aussi lié au dynamisme du marché de l'emploi nord américain. Mais l'on ne peut s'empêcher de faire le rapprochement avec les statistiques récentes concernant le nombre de freelances aux Etats-Unis : plus de 50 millions d'américains ont exercé ou exercent toujours une activité freelance 👉🏾 https://www.upwork.com/press/releases/53-million-americans-now-freelance-new-study-finds-2

Le futur monde du travail ne se dessine plus; il est déjà en place!

Et l'actualité foisonne à ce sujet :

Entre Naomi Klein qui nous consacre un article qui démontre que depuis le début de la pandémie les investissements dans la tech sont massifs💰 https://theintercept.com/2020/05/08/andrew-cuomo-eric-schmidt-coronavirus-tech-shock-doctrine/
Zoom qui a battu des records de croissance 🚀 durant la pandémie et a forcé ses concurrents à réinventer
Facebook qui devient Meta pour nous proposer un monde interconnecté à travers le numérique 💻 https://theconversation.com/de-quoi-le-meta-de-facebook-est-il-le-nom-171018. Récemment Microsoft a annoncé s'associer avec Meta pour lui aussi développer son metaverse https://www.theverge.com/2021/11/10/22774059/microsoft-teams-meta-facebook-workplace-integration
Boursorama qui passe au télétravail quasi total pour la moitié de ses salariés, et qui paie même les frais de transport quand il faut passer ponctuellement au bureau https://www.lemonde.fr/economie/article/2021/09/28/teletravail-total-chez-boursorama-les-salaries-commencent-a-quitter-paris-pour-la-province_6096226_3234.html
L'Allemagne qui vient tout juste d'annoncer un projet de loi pour faire du télétravail la règle à l'ensemble du territoire https://www.lci.fr/sante/covid-19-le-teletravail-pourrait-devenir-la-regle-en-allemagne-grace-a-un-projet-de-loi-face-au-regain-de-l-epidemie-2201887.html

Cela finira par influencer et impacter le marché du travail français (si ce n'est déjà pas le cas...)

La pandémie a mis nos nerfs à rude épreuve, mais elle a aussi permis de repenser notre rapport au travail.

Quel est l'intérêt dans des grandes villes comme Paris de faire un trajet aller d'1h20 en moyenne (quant au trajet retour...) pour venir au bureau et faire ses réunions sur Skype ou Teams avec les collègues ?

Quel est l'intérêt de prendre sa voiture et d'être dans les embouteillages chaque matin pour aller au boulot alors que l'on parle de sauver la planète et de réduire notre impact sur le climat ?

Pourquoi continuer de devoir jongler entre les horaires de la nounou, les grands-parents, la crèche loin de la maison pour faire garder ses enfants ?

Prenons l'exemple de deux profils.
Le premier se déplace chaque jour pour venir au bureau, affronte les embouteillages et les aléas des transports, doit s'organiser pour trouver un équilibre travail/famille, doit bloquer ses vacances à l'avance et avoir de la chance de ne pas se les voir annuler à cause de nouvelles conditions sanitaires.

L'autre a la flexibilité de travailler depuis chez lui ou un autre lieu, il n'a pas à affronter les transports ni les embouteillages, il est libre de s'organiser comme il le souhaite et peut ajuster son organisation vis-à-vis de sa famille, il peut partir deux semaines sans avoir à poser de vacances et continuer de travailler tout en profitant de son séjour.

Lequel de ses deux profils pensez-vous qui sera plus épanoui au travail ? Plus productif ? Lequel a plus de chance de vous quitter pour la concurrence qui lui offre de meilleures conditions de travail ?

Vous l'avez bien compris, recourir à un freelance en remote vous permet non seulement de travailler avec celui-ci de manière plus flexible, mais en plus de lui offrir un épanouissement au travail vous lui permettez d'être deux fois plus productif. Les entreprises ont tout intêrêt à repenser leur vision du travail car elles ne pourront être que les premières bénéficiaires.

How to create integration test with Cypress in your Next.js project

Alexandre C. — Wed, 07 Jul 2021 11:42:21 +0000

In this tutorial we'll describe how you can use Cypress to test your Next.js application, so that you can be more confident when writing or refactoring code.

What is Cypress ?

Cypress is a Javascript end-to-end test framework. It allows you to test your application directly in the browser, with React it's a perfect match because you can test each of your component in the browser and visually see what's wrong and where.
You can learn more about it and how it works here

Generate a Next.js app

npx create-next-app
or
yarn create next-app
and follow the instructions

If you prefer to use Typescript

npx create-next-app --typescript
or
yarn create next-app --typescript

Install Cypress

npm install cypress --save-dev or yarn add cypress -D

In your package.json add a script line

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress:open": "cypress open"
  },

If you use Typescript make sure you add cypress types in your tsconfig.json file

"compilerOptions": {
    ...
    "types": ["cypress"]
  },

Run Cypress

npm run cypress:open or yarn cypress:open will run Cypress for the first time. It will generate automatically every necessary files for you and tests examples in a cypress folder at the root of your project, and open a dedicated page in your browser

You can try running the integration tests examples

These files can be found in your cypress/integration folder. You can delete all of them as we'll write our own one.

Write your first integration test

Under cypress/integration folder create a home.spec.js file (or home.spec.tsx if you use typescript) and add

/// <reference types="cypress"/>

context("Home Page", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000");
  });

  it("should render the home page and display a message", () => {
    cy.get("h1").contains("Welcome");
  });
});

If you use Typescript add export {} to bypass Eslint compilation error

/// <reference types="cypress"/>

context("Home Page", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000");
  });

  it("should render the home page and display a message", () => {
    cy.get("h1").contains("Welcome");
  });
});

export {}

Here we are telling Cypress each time it runs the test it should first navigate to the homepage, and search for a <h1> tag containing "Welcome"

If your run this test now it will fail and that's normal

To make it work we need to run our server first and launch the tests, to automate this behavior we will install a library called start-server-and-test

npm install start-server-and-test --save-dev
or
yarn add start-server-and-test -D

Add a script in your package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress:open": "cypress open",
    "test": "start-server-and-test dev 3000 cypress:open"
  },

You can now run
npm run test
or
yarn test

To execute your test and it should work

I will make the test fail again by replacing the word "Welcome" by "Bonjour" and Cypress automatically detect where the test has failed

Now that you understand how Cypress is testing your component you can write your own tests based on what you want to test, and enjoy the visual regression tool in the browser embedded by Cypress 🥳

How to test getStaticProps

To show how we can perform Cypress test on props coming from getStaticProps I have created a file called stack.js under pages folder

// stack.js

const Stack = (props) => {
  const favorites = props.stack;

  return (
    <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
      <main>
        <h1>My Favorites Stack</h1>
        <ul>
          {favorites.map((favorite) => {
            return <li key={favorite}>{favorite}</li>;
          })}
        </ul>
      </main>
    </div>
  );
};

export default Stack;

export async function getStaticProps() {
  const favoriteStack = [
    'Javascript',
    'TypeScript',
    'React.js',
    'Next.js',
    'GraphQL',
    'Amazon Web Services',
    'Firebase',
  ];

  return {
    props: {
      stack: favoriteStack
    }
  }
}

The goal is to make sure that we receive the correct props, so
we can create a stack.spec.js

/// <reference types="cypress"/>

const favoriteStack = [
  'Javascript',
  'TypeScript',
  'React.js',
  'Next.js',
  'GraphQL',
  'Amazon Web Services',
  'Firebase',
];

context('Stack', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/stack');
  });

  it('should render the stack page and display the favorite stack', () => {
    cy.get('ul>li').each((item, index) => {
      cy.wrap(item).should('contain.text', favoriteStack[index]);
    });
  });
});

Here the test should pass because we are receiving the exact same props that we are passing in our component

You can make the test fails by modifying any of the array item and Cypress should show you where it failed, for example here I expect to find "MongoDB" value instead of "Firebase"

How to test getServerSideProps

It should work the same way as for getStaticProps. To demonstrate this we create a new file under pages platforms.js

const Platforms = (props) => {
  const favorites = props.stack;

  return (
    <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
      <main>
        <h1>My Favorites Freelance platforms</h1>
        <ul>
          {favorites.map((favorite) => {
            return <li key={favorite}>{favorite}</li>;
          })}
        </ul>
      </main>
    </div>
  );
};

export default Platforms;

export async function getServerSideProps() {
  const favoritesPlatforms = [
    'Toptal',
    'Upwork',
    'Malt',
    'Comet'
  ];

  return {
    props: {
      stack: favoritesPlatforms
    }
  }
}

Then we add our test platforms.spec.js

/// <reference types="cypress"/>

const favoritePlatforms = ['Toptal', 'Upwork', 'Malt', 'Comet'];

context('Platforms', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/platforms');
  });

  it('should render the platforms page and display the favorite platforms', () => {
    cy.get('ul>li').each((item, index) => {
      cy.wrap(item).should('contain.text', favoritePlatforms[index]);
    });
  });
});

And you can see it's working 🎉

Conclusion

Now you understand how Cypress can work with your Next.js project you can create your own tests based on your scenarios. Enjoy it!

Improve your Next.js 11+ project code quality ✅ with Typescript, Eslint, Husky and Lint-staged 🚀🔥

Alexandre C. — Mon, 28 Jun 2021 16:51:55 +0000

Description

In this straight to the point tutorial we will install the dependencies in bare Next.js project written in Javascript and created with yarn or npm. These tools will boost your development process and improve your code quality

Warning: In order to follow this tuto you'll need at least Nextjs version 11+

Install Next.js

Make sure you have Node.js version 12+

Run yarn create next-app or npx create-next-app and follow the instructions

Then add an empty tsconfig.json file in your root folder

Install Typescript

yarn add -D typescript @types/react @types/nodes
or
npm install --save-dev typescript @types/react @types/nodes

Run your project

yarn dev or npm run dev
The tsconfig.json file should be filled automatically

Change your files extension

You can now change index.js and _app.js to index.tsx and _app.tsx

Install Eslint

yarn add -D eslint or npm install --save-dev eslint

Run npx eslint --init and choose your configuration, here we will choose to go with Google style guide. Here is a screenshot of the config we choose :

⚠️ If you use yarn into your project you should delete the package-lock.json to make sure every dependencies are installed with yarn

Install Prettier

yarn add -D prettier eslint-config-prettier or npm install --save-dev prettier eslint-config-prettier

Create a .eslintrc.json file at your root folder and add

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "google", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "require-jsdoc": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Create a .prettierrc at your root folder and add

{
  "endOfLine": "auto",
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5"
}

You can add a .prettierignore and a .eslintignore to your root folder which contains

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel

Configure your VsCode settings

Create a .vscode folder at your root folder and a settings.json file

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.format": true
  }
}

Run Eslint

Since version 11.0.0, Next.js provides an integrated ESLint experience out of the box. To run eslint you can add a script in your package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Now if you run yarn lint or npm run lint eslint should check your code and indicates some errors or warnings that you need to fix.

You can also configure the fix to be done automatically when running eslint

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --fix"
  },

Install Husky and Lint-staged

In order to prevent your code to be committed with errors and warnings you can add and configure husky and lint-staged

yarn add -D husky lint-staged or npm install --save-dev husky lint-staged

Configure the scripts in your package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --project tsconfig.json --pretty --noEmit",
    "postinstall": "husky install"
  },

At your root folder add a lint-staged.config.js

module.exports = {
  // Run type-check on changes to TypeScript files
  '**/*.ts?(x)': () => 'yarn type-check',
  // Run ESLint on changes to JavaScript/TypeScript files
  '**/*.(ts|js)?(x)': (filenames) => `yarn lint . ${filenames.join(' ')}`,
}

Configure lint-staged for pre-commit
yarn husky add .husky/pre-commit "yarn lint-staged" or
npm run husky install .husky/pre-commit "npm run lint-staged"

Now everytime you try to commit some changes husky should check your code and prevent committing if there is any errors

Forem: Alexandre C.

WHY I BELIEVE IN CROSS-PLATFORM TECHNOLOGIES

How to set environment variables with EAS/Expo and React Native

Prerequisites

Configure your environment variables

Plaintext environment variables

Secrets

Access your environment variables in your project

How to submit for review your iOS and Android applications with EAS and React Native

Prerequisites

iOS

Android

Prerequisite

Create a Google Service Account

Start the submission

Final eas.json file

How to submit your Android application on Play Store

Prerequisites

Create an app

Set up your app

Privacy Policy

App Access

Ads

Content ratings

Target audience and content

News app

Covid-19 contact tracing and status app

Data safety

Government apps

Store settings

Main store listing

Release your app

Deployment

How to submit your iOS application on App Store

Prerequisites

Create an app

Fill in the details

Build section

App Review Information

App Information

Pricing and Availability

App Privacy

Submit your app for review

Ready for sale

How to create production builds for App Store and Play Store with EAS/Expo and React Native

Prerequisites

Configure the project

Enjoy your new builds

More details

Is Flutter the next big thing for cross-platform application development?

Pourquoi travailler avec un freelance en remote fera partie de la réalité de demain?

How to create integration test with Cypress in your Next.js project

What is Cypress ?

Generate a Next.js app

Install Cypress

Run Cypress

Write your first integration test

How to test getStaticProps

How to test getServerSideProps

Conclusion

Improve your Next.js 11+ project code quality ✅ with Typescript, Eslint, Husky and Lint-staged 🚀🔥

Description

Install Next.js

Install Typescript

Run your project

Change your files extension

Install Eslint

Install Prettier

Configure your VsCode settings

Run Eslint

Install Husky and Lint-staged