DEV Community: DanieleAurilio

Conquering Deployment with Nest.js and React

DanieleAurilio — Wed, 20 Mar 2024 23:18:54 +0000

Hi folks! Today, I'm thrilled to share the tale of my latest side project, a harmonious blend of Nest.js and React, running seamlessly and, believe it or not, entirely free of charge! With a dash of spare time and a sprinkle of ingenuity, I crafted this leveraging Nest.js's backend prowess and React's dynamic frontend capabilities.

App Overview

But let's dive into the heart of the matter, the app itself. Picture this: users can register via Google authentication, create organizations, invite employees, and seamlessly book meeting rooms within said organizations. And here's the kicker each booking automatically syncs with Google Calendar and generates a Google Meet link. It's a meeting room management marvel, powered by Supabase underneath.
Repositories are both on GitLab!

Now, let's talk deployment.

Deployment Chronicles: Nest.js on Render.com

Deploying Nest.js on Render.com was a breeze. I simply registered, clicked "Add New," selected "Web Service," connected my GitLab repo, and voila! With a few configuration tweaks—setting the build commands, environment variables, and opting for the free plan—the deployment commenced. And guess what? It was smooth sailing from there. With each Git push to the main branch, Render.com triggers a build and deploys my Nest.js backend effortlessly. Plus, it even provides a handy domain associated with the web service—perfect for API usage in my React app!

Deployment Chronicles: React with React Router on GitLab Pages

Now, deploying React on GitLab Pages wasn't quite as straightforward as Nest.js, but fear not! With a bit of configuration in project settings specifying environment variables and the new URL associated with my Nest.js backend on Render.com I was ready to roll. After clicking "Deploy" and selecting "Pages," I set up my .gitlab-ci.yaml file to ensure that every Git push triggers the pipeline and deploys the artifact. Voila! My React frontend was up and running, with GitLab Pages providing a URL for easy access.

Here the yaml file I configured:

# The Docker image that will be used to build your app
image: node:18.19.0
# Functions that should be executed before the build script is run
build:
  stage: build
  script:
    - npm install
    - npm run build  # Generate production build
  artifacts:
    paths:
      - build/

pages:
  script:
    - cp -r build/* public/
    - cp public/index.html public/404.html # Required for React Router 
  artifacts:
    paths:
      # The folder that contains the files to be exposed at the Page URL
      - public
  rules:
    # This ensures that only pushes to the default branch will trigger
    # a pages deploy
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

And there you have it, the tale of my side project's triumphant journey from development to deployment, all without spending a dime! With Nest.js and React leading the charge, the possibilities truly are endless. Happy coding! 🚀

Photo by 夜咔罗 on Unsplash

Why mistakes at work should not be discriminatory (and why they sometimes are).

DanieleAurilio — Fri, 22 Apr 2022 16:06:33 +0000

Nobody was born learned

Since i was born my grandmother tells me “Nobody was born learned”, but people at work seems didn’t remember this. Everyday people learn something, and the biggest lesson comes from mistakes. Everyone knows how is complicated write code and write good code if you are a junior ( in most cases good code doesn’t exist 😛 ), but senior doesn’t care what you did, and why. If you did some mistakes, write some bugs or fails a new improvement, you will be discriminated against. It is not something that happens the first time, but over time. If you fails more times, your credibility within the team drops and no one cares your mood. You can study, learn, grow, develop cool stuff (with errors), contribute to the best open source project, but your reputation will not be rebuilt. And if you are never appreciated, there is a slow detachment from your work team, which will lead you to fall into the trap of the impostor syndrome. Like a dog chasing its own tail, you will think that the fault is yours.

Let me clarify, this speech is quite crude and written in a flash, many may never find themselves in this condition, but we are talking about a very subtle discrimination, almost imperceptible, which can cause annoyance when you suffer it.

Look at yourself in the mirror

If at work you are discriminated, not appreciated or simply ignored, please look at yourself in the mirror.

The mirror know exactly who are you, what are you doing and where are you . Not a senior or tech lead in company, until the other day they did not know about your existence, nobody cares about your growth. Only to yourself. No one would feed you, with the risk that one day you might take his place. It is survival in a world which run too fast. Make mistakes as many times as you want, you don't have to justify yourself in front of anyone. Companies and people pass, your goals remain and evolve over time.

Photo by Inga Gezalian on Unsplash

FTP Service in SFCC - SFRA Architecture 📞

DanieleAurilio — Fri, 06 Aug 2021 13:36:50 +0000

Hi guys! 🖖

Have you to work with FTP service but it is your first time?
Don’t worry about it, SFCC provide a class called LocalServiceRegistry, with this class you can managing some request like HTTP, FTP and SOAP.
First of all we have to create a service in business manager on SFCC.

Let’s create service credentials and service profile: 🛠️

Go to Administration -> Services

Here we have three tabs:

Services;
Profiles: here we can specify ms time-out after a maximum number of failed call.
Credentials: here we have to setup service credential.

Now we go to setup service credential:

Go setup service profiles:

And at the end we can setup Service:

After created service in business manager we can write our service call:

Create a file under the path cartridge/scripts/service.
Require LocalServiceRegistry.

LocalServiceRegistry.createService() accepts two parameters, first is the name of the service, second parameter passed is a config object were we create request and parse the response.
createRequest must have service passed as parameter, setOperation() method is exclusive for ftp service, you can find full list of operation you can execute Here
After in parseResponse you can manipulate response and its returned data, for example you can iterate response data.

As you have seen it isn’t difficult, indeed it is intuitive with LocalServiceRegistry class.

Now when you have to call this service you have to include it in a file and after use yourService.call();

Custom Site Preferences and Custom Global Preferences in SFRA 📝

DanieleAurilio — Mon, 26 Apr 2021 13:04:48 +0000

INTRO

How many times do you have thought where you can store properties about configurations? Salesforce Commerce Cloud provides Site and Global Custom Preferences where we can store properties divided into groups. Global Custom preferences affect all sites instead Site Preferences affect only site where it's configurated.
Store properties in preferences allows us retrive it every time we need.
Setting a site custom preferences or a global custom preferences is practically the same. We are going to set up a group that contains properties that we will then use within our app.

LET’S SET UP A CUSTOM PREFERENCES 💾

If you don’t have system-objecttype-extensions.xml file you must create it under sites/sites_template/meta/.

Initialize xml and create a xml node <type-extensions type-id=“SitePreferences”> </type-extensions>.
In <type-extensions type-id=“SitePreferences”> </type-extensions> we can crate other two xml nodes called <custom-attribute-definitions> </custom-attribute-definitions> and <group-definitions> </group-definitions>.

In <custom-attribute-definitions> </custom-attribute-definitions> we can define our custom attribute
In <group-definitions> </group-definitions> we can create <attribute-group group-id="SiteCustomAttributeGroupID"> which contain <display-name xml:lang="x-default">Site Custom Attribute Group</display-name> and <attribute attribute-id="SiteCustomAttributeID" /> refers to attribute-id which I specified earlier.

Now we can upload system-objecttype-extensions.xml in business manager under Administration -> Site Development -> Site Import & Export.

After uploaded xml you can find your site custom preferences in Business Manager under Merchant Tools -> Site Preferences -> Custom Preferences.

Now you can access to preferences value through:

dw.system.Site.getCurrent().getCustomPreferenceValue('SiteCustomAttributeID’);

But how i explained earlier you can create also a Global Custom Preferences, but the unique difference is in <type-extensions type-id=“SitePreferences”> </type-extensions>, you have to replace type-id=“SitePreferences” with type-id="OrganizationPreferences".

And you can find your Global Custom Preferences in Business Manager under Administration -> Global Preferences -> Custom Preferences.

How create a custom Job which execute a script in SFRA 🔨

DanieleAurilio — Tue, 13 Apr 2021 14:21:38 +0000

Intro 💡

Many times you had think how you can automate a script, but you don't know how jobs works in SFRA or how you can create a custom jobs? Don't worry, first time can be difficult for all. I am here for explain to you whats is a job and how you can customize it and automate routine tasks or long-running processes.

Note: you can create jobs through business manager but I don’t explain how do it in this article.

I know, you can't wait to automate your processes, so what are we waiting for, let's automate!

Let’s Create File to execute! 🛠️

Go create a js file under the path your_directory/cartridge/scripts/jobs/scriptFile.js

I created and exported a simple function which log a string, but you can do everything you want.

Remember to export function you want execute.

Let’s Declare Job! ⚙️

Go create a xml file under the path your_directory/sites/sites_template/file_name.xml

Here we declare job which execute a script, all jobs are included in tag <jobs> </jobs>.

In <jobs> </jobs> you can declare all jobs, every job is unique and it is identified by job-id. In job you must start a <flow> </flow> which include <step> </step>. Every step is unique and it is identified by step-id. Step include a <description> </description> and a <parameters> </parameters>. In <parameters> you can include how many <parameter> </parameter> you want. Every parameter have a name, In name=“” you must specify input Parameters, you can find all input Parameters with description in official documentation.

In name <parameter name="ExecuteScriptModule.Module">app_project/cartridge/scripts/jobs/scriptFile.js </parameter> You have to pass ExecuteScriptModule.Module which accept as input parameters Script File.
In <parameter name="ExecuteScriptModule.FunctionName">execute</parameter> You have to pass as input parameters function’s name exported in script file.
In <parameter name="ExecuteScriptModule.Transactional">false</parameter> You have to pass a boolean value, but It must be true if in function you are using class Transaction.

With <triggers> </triggers> you can specify when run job.

Upload and import your job file .xml in Business Manager in Administration -> Operations -> Import & Export.
Now you can import your job immediately or wait the day and the time specified in the xml file.

Getting Started with OCAPI in SFRA - A Powerful Tool 🚀

DanieleAurilio — Sat, 03 Apr 2021 09:04:55 +0000

What is OCAPI?

OCAPI (Open Commerce API) is an API which allows access to our platform data from another application in a secure way, going to request information from the server and returning a value or an HTTP error in case of error ( resource not found, parameters not found etc. ).

There are 3 types of OCAPI: Shop, Data and Meta. The most used is Shop, it provides access to Commerce Cloud Digital storefront functionality.

You can retrive information about all OCAPI resources from salesforce documentation under “Open Commerce API”.

GET IN ACTION!🤘

Hey! yes i know, it was boring, but now we get in action. If you not have installed Postman or Insomnia go to download one of this.

Ok! You are now ready to try making the first API call and getting your first error!

But don't worry, i'm here for explain to you how avoid it and retrive information what you need.

RETRIVE AUTHORIZATION TOKEN

Yes, your first api call is for retrive authorization token. We need some parameters to pass in header or query.

client_id, without it we are not able to access information we need, you can find it in business manager under Administration -> Open Commerce API Settings. (Passed as query).
Your username, password and client secret (username and password are the same you use for access to business manager, client secret is provided by CRM) which are coding in Base64 (you can use Base64encode) following this structure your_username:your_password:client_secret.
grant_type (passed as query): urn:demandware:params:oauth:grant-type:client-id:dwsid:dwsecuretoken.
Content-Type: application/x-www-form-urlencoded.

Finally we have all parameters to pass in header/query and can call endpoint (https:// your_host_sandbox /dw/oauth2/access_token) for retrive authorization token with a POST.

Let’s build our API call!

Configure your header:

Configure query:

Remember grant_type value is: urn:demandware:params:oauth:grant-type:client-id:dwsid:dwsecuretoken

TOKEN EXPIERD AFTER 15 MINUTES SO YOU HAVE TO RETRIVE NEW TOKEN.

Note: I’am using insomnia environment variables.

🎉 Finally we have our authorization token that we can use from now on to execute any API call.

Don't forget to specify in subsequent API call that Authorization will have Bearer your_token value and don't forget to pass your client_id as a query, this must never be missing!

📦 Now let's try to retrieve an order, we just need to make GET to call the resource:

https:// your_sanbox_url /s/Your-Site/dw/Shop/OCAPI Version/orders/{ordernumber}

In header we should set:

Authorization Bearer your_token
Content-Type application/json

DON’T FORGET to set client_id in query.

You can find other api resource in official salesforce documentation.

Getting started with SFRA

DanieleAurilio — Mon, 22 Mar 2021 19:01:33 +0000

Intro

My first time with SFRA was a disaster, internet is pooring in information regarding this topic, the only chance is documentation or trailhead's videos (long and boring). So I decided to learn at work and write a series of practical articles on this topic.
First topic is about Controller and GET, render a template with a form and POST(this topic require you know how work libraries as express).

Let's Create Template

Let's create our template under the path cartridge/templates/default/directoryName/nameTemplate.isml

URLUtils.url(‘fileName-RouteName’) generate urls used in commerce cloud and it accept controller’s file name and route specified in controller file.

Create Form File

Now we can create our form under the path cartridge/forms/default/fileForm.xml

Every field must have formid and type. You can also specified some custom validation like max-length.

If everything is clear so far, let's move on to the next steps.

Create Controller File

Controller is where we can get or post a route so let’s create a controller where you can GET, render and POST:

Create a controller file under the path cartridge/controllers/ControllerFileName.js

Don’t worry, I know… Now you are confused but it's simpler than you think.

Now we concentrate on GET, Let’s me explain:

var server = require(‘server’); is a must in your controller file.
In Server.get(‘RouteName’, function(req,res,next) { }); instead of RouteName you can write anything, it is route’s name.
var formDef = server.forms.getForm(‘fileForm’); with forms.getForm('') you can convert form file .xml in an object to send to storefront. So in getForm(‘FileName’) you must specified file’s name .xml you before created under cartridge/forms/default/formFile.xml.
With res.render(‘templateDirectory/templateFileName’) now you can render your template .isml created before under the path cartridge/templates/default/directoryName/nameTemplate.isml, plus to res.render() you can add an object to send form definition to frontend, so pass object as a parameter to res.render(‘templateDirectory/templateFileName’, { nameProperty: formDef });.

Go render form fields in Template file

After sent formDef to FE we can access this object through pdict variable. Imagine pdcit variable as a big pot where everything that is passed as a parameter during rendering ends up in there and you can fish it in the template whenever you need it. For example with pdict.newForm.input1.attributes I’m entering to newForm object, it is nothing more than nameProperty which has been passed as an object in res.render(‘templateDirectory/templateFileName’, { nameProperty: formDef }); input1 and input2 refers to formid specified in .xml file.

Last Step

We are at the end and it is time to receive our input in POST simply by calling the form again with:

var formDef = server.forms.getForm(‘fileForm’);

Now we can access the value we entered in the form object before submitting simply by accessing the formDef object and then then accessing to properties formDef.input1.htmlValue and formDef.input2.htmlValue

Don’t forget, you can access to your controller and test it simply adding /default/nameControllerFile-RouteName at the end of your sandbox url in your browser.