Category: Node.JS

Git : Don’t commit node_modules except a file in a library

If you are using the node_modules in your Node.JS / Javascript / Typescript project you should exclude to commit all the libraries used by your application with this line in the .gitignore file:

.gitignore

node_modules/

But, you may need to modify a file in the /node_modules folder, excluded in the .gitignore

Force commit a file in a excluded folder in .gitignore

If you want to fix a file in a library that makes some problems in your application, you may want to modify the library directly in /node_modules (the case you are using the last version of the library, you can check on https://www.npmjs.com/ if you are using the last version in your package.json)

In my case, I modified node_modules/react-native-firebase/ios/RNFirebase/notifications/RNFirebaseNotifications.m a library that is not changed since 2 years and have a problem in my application. You can of course make a git issue on the official page but if you need it to work fast, you may want to commit it directly in your project and it is fixed.

After you made the change in the library, you can commit with git add -f …

In my case:

git add -f node_modules/react-native-firebase/ios/RNFirebase/notifications/RNFirebaseNotifications.m
You can see your file to be commit in your Git Desktop, and my node_modules folder is excluded in .gitignore

Kill Node.JS service by port / Arrêter un service Node.JS avec son port

🇬🇧Dear all, is it possible you want to kill a Node.JS service with your linux machine, that is running on a specific port

Il est possible que vous voulez arrêter un processus Node.JS sur un port précis sur votre machine linux🇫🇷

Here is the magic command to find and kill the Node.JS process

Voici la commande magique qui permet de trouver et arrêter de processus avec son port

netstat -pluton
It looks like the name of the famous planet / Moyen mémo-technique on pense à cette p’tite planete

Then you should be able to find the process (PID) with the port associated

Vous devriez avec cette commande trouver le nom du processus (PID) avec le port associé

PORT 4000:

SSL HTTPS with Elastic Beanstalk Node.JS backend

If you used Elastic Beanstalk to deploy automatically your Node.JS backend on your EC2, you will have an URL to access your app deployed but you will see that by default it doesn’t have a secure certificate

The backend is not on a secure URL

Add a certificate on AWS Certificate Manager (ACM)

You will not be able to have an SSL certificate if you don’t have domains on ACM. You can have it for FREE if you already have domains. It can be on another web hosting provider.

– If you don’t have domains yet, you should have one.
You can buy one on ACM on amazon directly or buy one on another domain provider.
You might find some domains providers for free but usually the service will be bad or slow, and the address will not be simple, usually like yourdomain.freehostprovider.com

– If you have domains
if you buy it with ACM it’s automatic you don’t need to do anything, if it’s on another web host provider you will need to link it with a DNS configuration, by adding CNAME fields. Let’s see how to do this.

Request a new certificate that will be used for your backend application

It will be asked to fill a form where you will have to put the domain you want for your application. You can put something like : backend.yourdomain.com
After filling the form, few minutes after, you will be able to copy the CNAME fields (if your domain is not on AWS):

Copy the CNAME fields with the copy buttons to your web host provider
Copy the CNAME informations in the DNS configuration of your web host provider

If you have changed the DNS on your web host provider, you have to wait 20 minutes.
Also, you may need to add a “A” field on the DNS of your host provider to link the IP of your beanstalk to the domain. You can do that with a ping on the beanstalk generated domain, and copy it in the DNS configuration:

Configuration of your load balancer on Elastic Beanstalk

On Elastic Beanstalk, you can now configure your SSL domain

Go in the Configuration of your Elastic Beanstalk app

Then, go to the Load balancer configuration and add the HTTPS protocol and the port 443 on the listeners.

HTTPS is now enabled in the listeners
We upgraded the listeners
The HTTPS certificate is now working for the backend

AWS Amplify : Babel error building React.JS app

Is it possible you may have an error with babel on AWS Amplify, while deploying your React.JS app:

If you click on Frontend you should be able to see the logs :

2022-01-14T17:18:36.441Z [INFO]: $ react-scripts build
2022-01-14T17:18:37.352Z [INFO]: Creating an optimized production build...
2022-01-14T17:18:38.431Z [INFO]: Failed to compile.
2022-01-14T17:18:38.433Z [INFO]: ./src/index.js
                                 Error: [BABEL] /codebuild/output/src483533555/src/app/src/index.js: Cannot find module '@babel/helper-define-map'
                                 Require stack:
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-classes/lib/transformClass.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-classes/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/available-plugins.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/plugins-compat-data.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/normalize-options.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/create.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/loader-runner/lib/loadLoader.js
                                 - /codebuild/output/src483533555/src/app/node_modules/loader-runner/lib/LoaderRunner.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/NormalModule.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/NormalModuleFactory.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/Compiler.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/webpack.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/scripts/build.js (While processing: "/codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/index.js")
2022-01-14T17:18:38.451Z [WARNING]: error Command failed with exit code 1.
2022-01-14T17:18:38.451Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2022-01-14T17:18:38.461Z [ERROR]: !!! Build failed
2022-01-14T17:18:38.461Z [ERROR]: !!! Non-Zero Exit Code detected
2022-01-14T17:18:38.461Z [INFO]: # Starting environment caching...
2022-01-14T17:18:38.461Z [INFO]: # Uploading environment cache artifact...
2022-01-14T17:18:38.534Z [INFO]: # Environment caching completed
Terminating logging...

In order to solve the @babel errors, you will need to install all the @babel packages:

NPM

npm install babel-core babel-loader babel-preset-env 
babel-preset-react babel-polyfill babel-runtime @babel/helpers 
@babel/helper-builder-react-jsx-experimental @babel/helper-builder-react-jsx 
@babel/helper-define-map @babel/helper-plugin-utils @babel/helper-regex

YARN

yarn add babel-core babel-loader babel-preset-env 
babel-preset-react babel-polyfill babel-runtime @babel/helpers 
@babel/helper-builder-react-jsx-experimental @babel/helper-builder-react-jsx 
@babel/helper-define-map @babel/helper-plugin-utils @babel/helper-regex

In order to run your React.JS project on Amplify, here is all the babel packages I installed to solve all problems:

  • babel-core
  • babel-loader
  • babel-preset-env
  • babel-preset-react
  • babel-polyfill
  • babel-runtime
  • @babel/helpers
  • @babel/helper-builder-react-jsx
  • @babel/helper-builder-react-jsx-experimental
  • @babel/helper-define-map
  • @babel/helper-plugin-utils
  • @babel/helper-regex

After, that, you should be able to see your React.JS app online with Amplify:

Public Images for your React / Angular app on Google Cloud

We often need images in our React or Angular app, but putting them in the project is not clean.
So we can use Google Cloud with Cloud Storage for the images on your app.

There are many advantages of using Cloud Storage to expose public images :
– Real time maintenance (upload, delete, change, …)
– You don’t need any commit on your git (if you commit images on your Github / Gitlab for example)
– Clean project, only code files
– Light project repository to commit, images are heavy quickly

Create a Bucket

First, you need to create a Bucket (it’s like a big folder) if you don’t already have one.

Switch to Uniform access control

Then, to make your Bucket public, go to the Permissions tab, and change the access control to Uniform :

You should click Switch to Uniform, so you don’t have to make public each file one by one
You can see, if you upload your first image, that it’s not public yet

Add public access using by adding a Reader role for allUsers

You can then add the access of Object Reader to allUsers
Then you can see it’s Public to Internet and you are able to copy URL

You can now use you image anywhere, it’s on internet and anyone can see it with the URL, so you can use it to store images for your React / Angular app, all images will work.

Sort your result by distance – Node.JS

Supposed that you return in your Node.JS backend a list of items, and you want to sort the results by distance.

For exemple, you do a GET /usersLocation and you have it:

[
   {
      name: "Paul",
      gender: "man",
      distance: 4.1
   },
   {
      name: "Philip",
      gender: "man",
      distance: 4.9
   },
   {
      name: "Elina",
      gender: "woman",
      distance: 2.5
   }
]

In your app you have the result to be listed by distance for exemple, so the user can know who is nearest first, and don’t have to scroll down to see that Elina is nearest. To do so, we can add this portion of code before returning the list of items:

    // items : variable containing all the items

    // SORT
    for(let a=items.length;a>0;a--)
    {
       for(let b=0;b<a-1;b++)
       {
          if(items[b].distance>items[b+1].distance) // we order by distance
          {
             // we swap the items
             tmp = items[b];
             items[b]=items[b+1];
             items[b+1]=tmp;
          }
       }
    }

    // returning the response for AWS Lambda
    const response = {
        statusCode: 200,
        body: JSON.stringify(items),
    };
    return response;
};

New response:

[
   {
      name: "Elina",
      gender: "woman",
      distance: 2.5
   },
   {
      name: "Paul",
      gender: "man",
      distance: 4.1
   },
   {
      name: "Philip",
      gender: "man",
      distance: 4.9
   }
]