
The web has changed so much in the past 10 years. Technology has enabled new usages, new ways of communication, new ways of seeing the world. Web Design trends are also constantly changing, every year we see new trends that sometimes stick for few years, sometimes they don’t. The same happened in web development: we’ve seen new JavaScript frameworks, new ways to build components, new ways to code CSS, using pre or post-processors. The list is almost infinite. But something that has not changed is the need for collaboration between people working on the same web project.

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg 'Photo by <a href="https://unsplash.com/@joshcala?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Josh Calabrese</a> on Unsplash')

As a Front-End Developer, I had the chance to work with numerous Web Designers and UX/UI designers over my career. No matter if I was in Brazil, France, Mauritius or Canada, **I have observed the same challenges over and over again**. And one unique solution doesn’t always apply to similar situations. You need to find what works best for you.

In this article, I want to share some topics I believe should be discussed. From my point of view, we, as web professionals want the same thing: **build accessible and performant products that will provide the best user experience possible**.

If you want your product to work, to get revenues, then you should start with the above goal first, not the other way around.

But let’s start with some definitions.

## What is a Web Designer?

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/photoshop-design-desk.jpeg 'Photo by <a href="https://unsplash.com/@easiblu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Eftakher Alam</a> on Unsplash')

A lot of people could probably define what is a Web Designer better than I. But from my perspective, as a Front-End Developer, a **Web Designer is someone with extensive skills in design that understands the constraints and the possibilities given by the web**. I’ve seen a lot of really good “designers” but who were not always able to fully understand the “web” part of their title. Designing for the web is far from being straightforward. Be familiar with how to use [Sketch](https://www.sketch.com/) or [Figma](https://www.figma.com/) is surely part of being a Web Designer, but it’s unfortunately not enough. And honestly, for me it’s totally fine: you learn as you progress.

Probably, from my point of view, a Web Designers shouldn’t just rely on his knowledge and put pressure on himself to know everything about the web. That’s where a Front-End Developer can come into play. Front-End Developers are the ones that spend their time on the web, scrolling, studying code, finding new ways of building components… They are the perfect buddies of Web Designers, and both should be pairing regularly.

## What is a UX/UI Designer?

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/wireframe-design-table.jpeg 'Photo by <a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelly Sikkema</a> on Unsplash')

**A UX/UI Designer is someone where focus lays on users**. Nothing should be more important than the user, the person, the human. A UX Designer needs to spend a lot of his time doing researches. I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things… Of course, you also have the word “designer” in the title, because in the context we are talking about, a UX/UI Designer has the task to understand the user and also know what works the best in terms of UI. Something that works for a website dedicate to moms may not work for a website which main users are teens.

> I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things.

But he is not the only one who has developed an understanding of what users prefer and are used to when they browse the Internet. When a Front-End Developer wants to create a piece of code, a component, he usually dives into his structured memory of patterns. When someone says “button”, it triggers in his brain all the times (thousands of) he clicked on a button, but also snippets of CSS code that can be used to create a button or the long hours he spent analyzing CSS framework documentation…

Front-End Developers can be a huge asset for any UX/UI Designer because they’ve learned so much about the web and usual patterns from a different perspective.

## What is a Front-End Developer?

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/computer-windows-white-table.jpeg 'Photo by <a href="https://unsplash.com/@nublson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Nubelson Fernandes</a> on Unsplash')

I know a lot of people that could potentially disagree with my definition. For me, a **Front-End Developer is a builder, someone that loves building web content using a combination of multiple skills**. Because a Front-End Developer is not just a coder. To be a Front-End Developer you need to learn HTML, CSS, JavaScript but these are just the basics. You need to understand how to make a [website accessible](https://www.w3.org/WAI/fundamentals/accessibility-intro/), how to use CSS to create an amazing layout, how to translate a design file to CSS, how to keep your application performant, how to build a [UI/pattern library](https://storybook.js.org/)… the list is long but I’m sure you get my point.

A Front-End Developer is the backbone of any web content. Without a Front-End Developer, the website couldn’t be created (even if you use a no-code generator, a Front-End Developer had to create the UI).

Does that mean that a Front-End Developer is more important than other people in their team? Absolutely not, but his role requires him to **be a facilitator, to understand what he can provide for the rest of his team**.

## A Web Designer, UX/UI and Front-End Dev enter together in a bar…

Now that we have a better idea of what these roles represent, how do we make them work together in a way that they feel empowered and enjoying the collaboration?

### It’s about mindset

Any athlete will tell you that mindset is everything to achieve their goals, to win championships, to perform better. This is not that different when it’s about working as a team. Everyone’s mindset is important within a team. But it’s something that the group itself doesn’t have any control. Only individuals can decide to have an open mind, a true relationship with the other member of the team, visualize solutions instead of problems…

We often forget that we all have a common goal. Sure, we can also have multiple goals for ourselves but if you are part of a team, it’s only to achieve a common goal.

Differences are what make this specific group worth existing. EVERYONE has a role to play in any team.

### It’s about culture

But it’s not only about individual mindsets. A team with a Web Designer, UX/UI and developers are usually part of a corporation. All over the world, [numerous companies understand and value their culture](https://hbr.org/2020/01/how-corporate-cultures-differ-around-the-world). This is an essential part to guide employees towards common goals and achieve specific tasks.

If companies provide the tools and the support to create trust and equality between the members of a team, then it makes it easier for people to collaborate together and learn from each other.

### It’s about ego

Aaah the ego! Some people say that a bad reputation can hurt any company, I believe ego can hurt sometimes even more. The ego is one of the biggest enemies of any company, team or leadership group. I had the displeasure to work with 1–2 people during my career with a pretty big ego.

I will always feel the pain these people have caused, it’s important to make peace with any related event but also with them. After all, we are all humans.

Ego shouldn’t exist in a team. Period.

### It’s about collaboration

Collaboration is knowing that people are better than you in certain areas. It’s knowing that you can learn from them. It’s knowing that you can also give something to them. Collaboration is finding the balance and putting everything and everyone at the center of the group.

And no, collaboration is not something you implement once and it’s done, everything will always work perfectly. Collaboration is an equilibrist performance that could go wrong at any time. But you have to keep going because it’s so rewarding when you succeed!

## How to get your team to work together?

Before giving you some answers, I want to tell you about two of the best experiences I had during my career with Web / UX / UI Designers.

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/whiteboard-collaboration-wireframe.jpeg 'Photo by <a href="https://unsplash.com/@kaleidico?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kaleidico</a> on Unsplash')

### My two best experiences with Designers

**My first best experience was in August 2014**, in Cincinnati, USA. I’ve worked for a month with Barefoot Proximity to build a new platform. [Julie Tran](https://www.linkedin.com/in/tranje/), which was leading the project in terms of design would create pieces of design, sent them to me for prototyping and we would discuss around that. What made the experience amazing was the level of exchange and collaboration.

It wasn’t just about, “Hey, here is the design”, it would be more “hey, here is the design, can you do a quick prototype to see if that works. Let me know if you see any problems that may occur for mobile, accessibility etc…”.

I was able to give my feedback based on my knowledge and experience, Julie would also push back when I would be hesitant to test a particular approach. Combining our visions, being open with each other was what made this project successful. Even with my English being pretty basic at this time, we both enjoyed our work and I kept only good memories from that collaboration.

**My second best experience was in 2015**, with [Julia Bruyneel](https://www.linkedin.com/in/juliabruyneel/), who was working in Paris as a Web/UX Designer freelancer. I was in Mauritius for a month and we had to collaborate for few weeks on new designs for an existing project.

Even with the distance, and not knowing each other before, Julia would contact me and exchange about designs she would have made. That simple communication and regular exchange were reassuring for me (was lead on that project for 3 years) but also a manifestation of maturity and professionalism from Julia. It was short but I kept good memories of that collaboration.

## Mindset, culture and processes

The **three main keys**, from my unique point of view, to have successful teams rely on mindset, culture and processes.

![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/mindset-culture-processes.png 'Mindset, culture and processes are the 3 keys for better collaboration')

**Mindset**: If you want to have people working together, in collaboration, using each other experience and vision, they need to have a similar mindset. I’m not saying an “identical mindset” or “same personalities”, I’m saying “similar mindset”. When everyone understands the goal of the team and is open to see each human behind his title, then you have more probabilities to have a successful team.

**Culture**: Sometimes, having a similar mindset is not possible or challenging. In that case, is the responsibility of the structure or company to influence a specific mindset. Companies can decide who should be part of the “family”. That’s why the recruitment process is important.

**Processes**: a lot of people I know, hate the word processes. For me, processes have always mean freedom. When you have a defined and clear process, you don’t have to stress or be hesitant or afraid. A process should exist to guide you in a process where people can predict what will come next. It’s reassuring to know that everyone has the same process in mind. Sometimes, when people's mindsets are not similar or the culture is lacking, processes should help people to visualize the direction they need to take.

You could take these **3 points separated or combine them to maximize your chances** to build successful teams.

## What Web / UX / UI Designers should know about Front-End Developers (letter dedicated to designers)?

> “We love the web and we love being part of the creation process! We decided to become Front-End Developers because we love building! And it’s not just about converting designs to CSS, we love understanding the why, the how of the creation.
> And we understand that this may be scary at times because why the heck a Front-End Developer will tell a designer that his design is not accessible? Or tell the designers that he is not sure, this is gonna work for the user? It’s not about competing, it’s about putting energies in sync.
> The problem sometimes is that we see patterns and code examples in our minds that we don’t always translate for other people to understand. But we’re working on that! I promise!
> We have more to share than just our “title”, we have more to give than just lines of code. We are here to help!”

## The main takeaways from this article

If you are still reading, I hope you also share some common ideas exposed in this article. I have dedicated a portion of my career to try to be a facilitator and share all the knowledge I accumulated to build awesome products.

- Teams composed of Web Designers, UX/UI Designers and Front-End Developers sharing a **similar mindset** have more chances of success.
- An internal culture that encourages **collaboration and equality** between professionals will always produce the best results.
- Enforcing best practices through **processes will help to make things more predictable and reassuring**.
- The ego is one of the worst enemies of teamwork. **You shouldn’t have any space for ego**.
- A Front-End Developer is just a passionate professional **who wants to be part of the creation process** and not just at the end. His integration along the project will ensure the success of any project.

---

What about your experience? How do you like to work with others? What would you like to see happening more often within your team?


Collaboration between Developers and UX/UI Designers is essential to build a good product. With the right mindset, clear processes and an inclusive culture, everything is possible.

How Front-End Developers, Web and UX/UI Designers could better collaborate together?


In 2023 alone, cybercriminals will steal 33 billion records. It takes 196 days on average to identify a data breach. The cost of a data breach will reach $150 million by 2020...
These numbers may be scary but they are only previsions. Things could be much worse in the near future. Security has become a hot topic these last years, almost everyone on the planet has already heard about a company data breach or even a friend that lost his Facebook account because someone hacked it! No one is completely safe nowadays.
![Photo of a white lock icon on a purple fullscreen background displayed on a cellphone screen](/images/articles/9-best-practices-ux-for-two-factor-authentification/featured.jpg)

I've recently spent multiple hours ensuring that all the accounts I possess use a unique password, complex and long with at least 20 characters and with the two-factor authentication (2FA) enable if present. I've discovered so many disparities between companies and so many issues in terms of features and user experience. I wanted to share with you in this article, what I believe are the best and recommended features for any website or company that takes the security of their users seriously.

## 1. Offer two-factor authentication options

That is the starting point.

If you care about your users or customers, you should give them the choice to activate the two-factor authentication. On around 800 websites where I have an account, **only 5% offer a 2FA option**. Some may argue that if you don't have highly sensitive information, it may be overkill to offer the 2FA. But any personal information could be considered sensitive.

If you care about your users and their security, give them the option to enable the 2FA. Period.

## 2. Don't force the users to choose only one 2FA method

[Google](https://www.google.ca/landing/2step/), [Facebook](https://www.facebook.com/help/148233965247823), [Twitter](https://help.twitter.com/en/managing-your-account/two-factor-authentication)... they all offer simultaneous ways for 2FA: text message, authentication app and security key. More commonly, at least in a text message and authentication app, the security key seems to be set up only on certain services.

But I've been surprised to see [Etsy](https://help.etsy.com/hc/en-us/articles/115015569567-How-to-Make-Your-Account-More-Secure?segment=shopping), even they use toggles on their UI, to force you to only choose one of the options. I'm not even sure if it was originally designed to work like that.

![Screenshot of the two-factor options on Etsy](/images/articles/9-best-practices-ux-for-two-factor-authentification/etsy.jpg 'The two-factor options on Etsy')

[Bit.ly](https://support.bitly.com/hc/en-us/articles/230650187-What-is-2-step-verification-) and [booking.com](https://partner.booking.com/en-gb/help/legal-security/what-2-factor-authentication-2fa) in other hand only allow you to use your phone as a 2FA device. So if you lose your phone and your email access, you could be screwed.

![Screenshot of the verification code form on Booking.com. A verification code field is showed empty with a blue button below saying "Verify and sign in"](/images/articles/9-best-practices-ux-for-two-factor-authentification/booking.jpg 'The verification code view on Booking.com')

[Mailchimp](https://mailchimp.com/help/set-up-a-two-factor-authentication-app-at-login/) and [Tumblr](https://tumblr.zendesk.com/hc/en-us/articles/226270148-Two-factor-authentication), on the contrary, only offer 2FA using an authentication app.

[Zapier](https://zapier.com/help/account/manage-account/set-up-two-factor-authentication-for-your-zapier-account) has an awesome step by step 2FA setup, probably one of the best I found. They offer multiple complementary ways and specifically tell you "in the event you get locked out of your account and have lost both your authentication device and recovery codes". The user understands that providing his phone number is an additional way to ensure he/she can access his account in case he/she lost the other ways to connect to their web app.

![Screenshot of the two-factor set by step setup on Zapier. Currently showing the "Emergency Verification" step which contains a Phone Number field with a verification code field.](/images/articles/9-best-practices-ux-for-two-factor-authentification/zapier.jpg 'The two-factor set by step setup on Zapier')

## 3. Make the QR code an image

I have been using [1Password](https://1password.com/) for quite some time now and the modal that scans the QR code doesn't always find the QR code. In that case, I found myself drag and dropping the QR into that modal to be recognized. But it only works when the code is an image.

I would recommend having it as a format image that can be saved / drag and dropped.

[Reddit](https://www.reddit.com/) for example don't have the QR code as an image. Fortunately, everyone offers the text version of the QR code that you can use in your authentication application.

## 4. Keep the code you send by email in the same format as requested in your app or website

This one only happened to me once. It happened with Instagram.

When [Instagram](https://help.instagram.com/843785199163974) sends a "verification code" by SMS, they included a space. If you copy-paste that code where it's required, first the input doesn't want the space and the last digit is not included in your paste. It's an annoying issue that could be fixed easily!

![Instagram verification SMS code](/images/articles/9-best-practices-ux-for-two-factor-authentification/instagram-login-code-space.jpg 'Instagram verification SMS code')

## 5. Give the option to have recovery/backup codes

Sounds weird when said at loud but a lot of websites don't offer backup/recovery codes when you enable the 2FA. This was a surprise for me at first, **2FA means you will always have backup codes in case you lost access** to your phone, email or the app you use to generate the random number. Nowadays, some websites don't offer that option. I tend to be really careful with those.

[Kickstarter](https://help.kickstarter.com/hc/en-us/articles/115005127094-How-can-I-enable-two-factor-authentication-) and [WPEngine](https://wpengine.com/support/multi-factor-authentication/) are examples of websites that don't offer you any recovery/backup codes. I hope they could improve that.

![The Kickstarter security modal](/images/articles/9-best-practices-ux-for-two-factor-authentification/kickstarter.jpg 'The Kickstarter security modal')

## 6. Always give the option to download the recovery codes

Most of the websites propose to copy the recovery codes. This is not the best option.

It's nice to have it, sure, but it's not enough. I personally store all my recovery codes in multiple places: one is the [vault from Dropbox](https://www.dropbox.com/features/security/vault). Having just to drag and paste a simple text file is easy and fast.

If you offer only the option to copy, then you could be forcing the user to:

1. open the text editor
2. paste the codes
3. give a name
4. save the file on your device

Technology is there to save user's time.

[Slack](https://slack.com/intl/en-ca/help/articles/204509068-Set-up-two-factor-authentication) for example allows you to "Print codes" but not download them. Why not? I have to generate a PDF instead of my simple text file. Not the best user experience.

![The Two-Factor Authentication Backup Codes modal on Slack](/images/articles/9-best-practices-ux-for-two-factor-authentification/slack.jpg 'The Two-Factor Authentication Backup Codes modal on Slack')

## 7. In the recovery code text file, always write which platform these codes are coming from

Even Facebook can make mistakes and this one is important for me. Currently, if you download the recovery codes from Facebook, you open the file and you can't find any mention of Facebook or the name of the account. The file name `facebook_recovery_codes` is helpful but in my opinion, not enough. **The name of the account and the name of the platform should be a minimum.**

And to make it more useful, adding the date when the codes were generated could also be added.

Google which is a good example, uses your username in the name of the file, and also adds:

```text
SAVE YOUR BACKUP CODES
Keep these backup codes somewhere safe but accessible.

LIST OF CODES

(email@gmail.com)

* You can only use each backup code once.
* Need more? Visit https://g.co/2sv
* These codes were generated on: Date, 2021.
```

## 8. Allow the user to regenerate recovery/backup codes

It's essential to give the user the ability to regenerate recovery codes. Some don't offer this useful option.

## 9. Offer more than one code (maybe?)

This one is less important but I still wanted to mention a key difference in terms of recovery/backup codes.

Most of the companies only offer one code vs a list of multiples codes that can be used. It's hard for me to defend one approach vs the other one. I just know that I feel better when I have more than one code.

## About security keys

Security keys are the less common way to secure your account. If you are a public figure or someone with a high level of responsibility, having a security key could give you a little bit more peace of mind. But for a normal user, it may be overkill. Nonetheless, I wanted to maximize the security of my accounts and recently bought the [Titan Security Key](https://store.google.com/ca/product/titan_security_key) from Google. The USB version works on any computer and I use the Bluetooth version in case I'm on my iPhone or iPad.

![The white box of the Titan Security Keys by Google showing the bluetooth and USB 3.0 key](/images/articles/9-best-practices-ux-for-two-factor-authentification/titan-security-keys.jpeg 'The box of the Titan Security Keys by Google')

They both are not cheap, but security should be part of your "unlimited budget", the same as for food.

## Conclusion

I'm not a security expert and have limited knowledge in terms of security. But as a Software Engineer and particularly a user, I believe we have a long way ahead until most of the platforms implement all the tools to ensure secure access for users.

_Recap:_

1. Offer two-factor authentication options
2. Don't force the users to choose only one 2FA method
3. Make the QR code an image
4. Keep the code you send by email in the same format as requested in your app or website
5. Give the option to have recovery/backup codes
6. Always give the option to download the recovery codes
7. In the recovery code text file, always write which platform these codes are coming from
8. Allow the user to regenerate recovery/backup codes
9. Offer more than one code (maybe?)

Thanks for reading, I hope these suggestions would help you to have a better UX and improve your 2FA implementation.

Feel free to ask me anything in the comments below!


The best and recommended features for any website or company that takes the security of their users seriously.

9 Best Practices & UX Improvements for the two-factor authentication (2FA)


I've recently spent some time working with Next.js projects. Once my projects are done, the next logical step is to deploy these apps to be accessible to the world.

I have naturally used the [Vercel platform](https://vercel.com/), which couldn't be easier to use and deploy your application with ease. Then I tried [AWS Amplify](https://aws.amazon.com/amplify/), which I particularly love but for now, requires you to use the [Serverless Framework](https://docs.amplify.aws/start/getting-started/hosting/q/integration/next) if you want to benefit from Server Side Rendering (SSR) capabilities.

Then, I remembered that Netlify has added support for Next.js, including dynamic routes, Preview Mode and more around November 2020. It was time for me to try it! But I also wanted to have a real CI/CD in place, to test my code and do more actions before deploying to Netlify. That's where Github Actions came to the rescue!

I'm going to describe in this article, all the steps you need to take to deploy your Next.js application on Netlify using Github Actions.

> The full version of the project can be [found on Github](https://github.com/thedaviddias/next-netlify-github-actions-starter).

## Create a new Next.js App and push it to Github

As always, you need to have a recent version of Node and NPM installed on your machine. I personally recommend using `NVM` since it simplifies having multiple active Node.js versions.

To create a new Next.js project, type this command in your CLI:

```bash
npx create-next-app name-of-your-app

# move into the app's root directory
cd ~/path-to-projects/name-of-your-app/
```

This will install a new application using a basic Next.js boilerplate. Don't forget to move to your app root folder before launching any next commands.

Once your Next.js project is locally created, you can create a new project on Github and push the code generated.

_(For those you are new to coding, feel free to [follow these steps](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-new-repository) to create a new repository on Github.)_

## Setting up your Netlify project

There are 2 ways of creating a new Netlify project:

- Creating a project online [here](https://app.netlify.com/)
- Using the Netlify CLI.

Let's use the CLI this time, I'm sure you already created a new project in the past using the Netlify interface.

Let's start by installing `netlify-cli` globally:

```bash
npm install netlify-cli -g
```

Then check if the installation succeeds, confirming with this command:

```bash
netlify
```

### Netlify account authentication

Now you need to link your computer with your Netlify account. To authenticate with Netlify, you need to run this command:

```bash
netlify login
```

This will open a new tab in your browser where you'll need to "Authorize your Application" and then grant access to Netlify CLI.

In case you already logged in previously, the console will output:

```bash
Already logged in via netlify config on your machine
```

### Netlify project creation

Now that your CLI is authorized to communicate with your Netlify account, it's time to programmatically create a new project:

```bash
# create a new Netlify site using the Netlify shortcut: ntl
ntl init
```

The first question you are asked is if you want to connect this directory to an existing Netlify site or create & configure a new site. Choose **Create & configure a new site**:

![Connect to an existing directory or create and configure a new site](/images/articles/connect-existing-direction.jpeg)

Then you have to choose your **team**:

![Question about the name of the team](/images/articles/question-name-team.jpeg)

Choose the **name of your application**:

![Screenshot of the CLI asking for the name of your application](/images/articles/cli-name-application.jpeg)

After entering the name of your project, the site is created and few URLs populated the CLI which gave you access to your admin URL, the URL of your site and the Site ID. Keep the site ID aside, you will need that number later on.

For the next 3 questions (build, start and function), **insert a space**. We are not going to directly use the NPM scripts, our Github actions will later trigger each command.
![Screenshot of the CLI with the build, start and function script command suggestion](/images/articles/cli-build-start-function-script.jpeg)

Finally, automatically create a netlify.toml file, which we will edit later. If your respond no, you can still create that file manually at the root of your project.

![Screenshot of the CLI asking to create a netlify.toml file](/images/articles/automatically-create-netlify-toml.jpeg)

Once you provided an answer to all the questions, your terminal should look like this:

![Screenshot of the CLI after all the questions are answered](/images/articles/cli-after-all-questions-answered.jpeg)

## Updating our Netlify project

It's now time to change some options on our Netlify project. Open directly your project on Netlify with this command:

```bash
ntl open
```

![Screenshot of the Netlify project created](/images/articles/netlify-project-created.jpeg)

You should see that our production deployment failed. You don't have to worry, this is totally normal. We need to disable our automatic build because our Github Actions will take care of it.

Go in your Settings > Build & deploy. Click on `Edit settings` and `Stop builds`. Save.

![Screenshot of the Build settings on Netlify](/images/articles/build-settings-netlify.jpeg)

Just below, go to the `Deploy contexts` section and select `None` for the Deploy previews.

![Screenshot of the Deploy context section on Netlify](/images/articles/deploy-context-section-netlify.jpeg)

Don't worry, like the build, we will create our preview URL using Github actions.

## Enable server-side rendering on Netlify

If you have been using Next.js you are aware of the capability to do the server-side rendering. But usually, you will need to configure a Node server and that's something we don't want to have to deal with. Around October 2020, the Netlify team started working on `next-on-netlify`, a utility to enable SSR in Next.js on Netlify. That's what we are going to use here.

_(In case you are not interested in Github Actions and want to use Netlify to build your project, take a look at how to use the [Next on Netlify Plugin](https://github.com/netlify/netlify-plugin-nextjs). It directly wraps your Next.js app and doesn't need as much configuration as we are going to explain.)_

Let's start by installing our utility:

```bash
npm install -D next-on-netlify
```

### Set Next.js target to serverless

We must build our Next.js app as a serverless app

```javascript:next.config.js
module.exports = {
  // Target must be serverless
  target: "serverless",
};
```

### Add a post build hook

We need to add a `postbuild` command that is automatically triggered after our `build` command finishes. `next-on-netlify` does a lot of "magic" to copy and set up our Next.js app to be correctly hosted on Netlify.

```bash:package.json
{
  "name": "next-netlify-github-actions-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "postbuild": "next-on-netlify"
  },
  ...
}
```

### Configure Netlify

Remember the file that was automatically created and called `netlify.toml`? You can remove all the boilerplate and replace it with only this code (be careful in respecting the indentation):

```toml:netlify.toml
[build]
  command   = ""
  functions = "out_functions"
  publish   = "out_publish"
```

Technically, when `next-on-netlify` will run, it will take what is in these folders and host it on Netlify. **_DO NOT CHANGE_** the name of these folders as these are hardcoded into the utility.

Don't forget to add these line to your `.gitignore` file

```git:.gitignore
# Netlify build
out_*
```

You can commit your files. Let's work now on the Github Actions configuration.

## Github Actions configuration

The netlify configuration is now done, all dependencies installed, it's time to configure our Github actions which will test, build and deploy our Next.js application to Netlify. But before that, we need to set up some Github secrets that we will need in our GH Actions.

Go to your `Github project > Settings > Secrets > New repository secret`

| Actions secret name  | Comments                                                                                    |
| -------------------- | ------------------------------------------------------------------------------------------- |
| `NETLIFY_AUTH_TOKEN` | Request your token [here](https://app.netlify.com/user/applications#personal-access-tokens) |
| `NETLIFY_SITE_ID`    | The site to where deploy your site (get it from the API ID on your Site Settings)           |

![Screenshot of the Actions secrets page on Github](/images/articles/actions-secrets-netlify.jpeg)

Create a new file called `main.yml` inside `.github/workflows`. Copy-paste the following code and read the explanation of it after this snippet.

```yml:.github/workflows/main.yml
name: Main workflow

on:
  pull_request:
    branches:
      - master
      - main
    types: [opened, synchronize, reopened]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      # Cache node modules and next folder
      - name: 📬 Caching
        uses: actions/cache@v2
        with:
          path: |
            **/node_modules
            ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}

      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: 🧰 Install dependencies
        run: npm run install

      - name: 📦 Build project
        run: npm run build --if-present

      # - name: 🧹 Run lint
      #   run: npm run lint

      # - name: 🐛 Run tests
      #   run: npm run test

      # Deploy to Netlify with a personalized message
      - name: 🚀 Deploy to Netlify
        id: deploy-netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
```

### Detailed explanation of the main workflow file

1. **_Give a name_** to your Github action
2. Choose which **_type of the event_** should trigger this action, you can use push instead of pull_request, it's up to you.
3. Specify on **_which system_** this action should be launched, I choose the latest version of Ubuntu (Linux).
4. **_Checkout your code_**
5. **_Cache your node modules_** and the .next/cache folder. When you will first run this action, it will take some time. On the second launch, the action will take the modules that exist in the cache and will then proceed way faster.
6. Specify the **_version of Node_** you want to use, in my case, I choose the most recent version of Node 14th.
7. **_Install the dependencies_** of your project.
8. **_Build your project_**. Remember that after the build, the post-build command will be launch. This is what you should see in the `build` logs in your Github Action tab:
   ![Screenshot of the build-in Github Action](/images/articles/build-in-github-action-netlify.jpeg)
9. I added lint and test commands, which I commented. You can use these to trigger ESLint, Jest (even Cypress) or any other plugin that ensures your code doesn't have any issue.
10. Finally, we trigger the Netlify deployment to deploy our Next.js app to Netlify. 🎉

![Screenshot of all Github actions](/images/articles/all-github-actions-netlify.jpeg)

You may have seen an argument passed to the Netlify deploy:

```yml:.github/workflows/main.yml
args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
```

This will add a message for each Deploy Preview, a way to keep track of which PR generated which Deploy.

![Screenshot of the Deploy page on Netlify](/images/articles/deploy-netlify-preview.jpeg)

On the same deploy page, you can click on the Deploy Preview and access your app using the preview URL.

A better way would be to use another task to automatically populate your pull request with the log and preview URL. At the end of your file, add this action:

```yml:.github/workflows/main.yml
# Publish the inspect and preview link to the PR
- name: 👓 Netlify Preview URL
  uses: unsplash/comment-on-pr@master
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    OUTPUT: "This pull request is being automatically deployed to Netlify.\n\n🔍 Inspect: ${{ steps.deploy-netlify.outputs.NETLIFY_LOGS_URL }}\n✅ Preview: ${{ steps.deploy-netlify.outputs.NETLIFY_URL }}"
  with:
    msg: ${{ env.OUTPUT }}
    check_for_duplicate_msg: false
```

This will automatically create a comment in your PR.

![Screenshot of the PR on Github specifying the link to the logs and preview deploy URL](/images/articles/pr-github-preview-deploy-url.jpeg)

## Summary

If you are still reading this, congrats! You have succeeded in deploying a fully enabled Next.JS application to Netlify using Github Actions!

The next step for you now will be to add some linting rules and tests to ensure that you are sending to Netlify, an app that works perfectly!

Feel free to [download or fork the `next-netlify-github-actions-starter`](https://github.com/thedaviddias/next-netlify-github-actions-starter), open an issue if you find any problem or send me any suggestion to make it better!

### Sources:

- [How to Deploy Next.js Sites to Netlify](https://www.netlify.com/articles/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) by Jason Lengstorf
- [Preview Mode for Next.js now fully supported on Netlify](https://www.netlify.com/articles/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify/) by Cassidy Williams
- [Announcing one-click install Next.js Build Plugin on Netlify](https://www.netlify.com/articles/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/) by Cassidy Williams


Are you interested in Next.js and how to deploy your app to Netlify using Github Actions? Take a look at how Netlify allows you for free, to deploy your app with Server Side Rendering capabilities and more!.

How to deploy your Next.js app on Netlify using Github Actions


I’m not a psychologist or either a student in psychology. I spent a good amount of time in my life reading personal development books but in the end, I’m just a Front-End Web developer, who writes code. I had the chance to live in different countries and created real and profound relationships with people with different cultures, different colors, different ages, different religions, different visions of the world… I couldn’t imagine my life without all these persons and what they brought to my existence.

![A woman is a globe](/images/articles/you-have-something-in-you-the-world-needs/featured.jpeg 'Photo by <a href="https://unsplash.com/@benwhitephotography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ben  White</a> on Unsplash')

Talking and sharing life’s moments with all these people made me realized something you may know already: **most of the human beings struggle in being happy** and spend most of their lives, living in their past and acting or not acting based on numerous fears. Fear and past are the two biggest challenges that every human in history had to face.

## Fear kills

Fear is more than just a word or a feeling you experimented watching horror movies. Fear is just the most powerful weapon that, in 2019, is killing more than any other weapon in the world.

Fear does not just kill physically people, fear kills **creativity, originality, growth, relationships, marriages, ideas, will, happiness…** Fear makes you feel bad at work because you think you don’t know enough, it pushes you to fail at the University: fear to not be good enough, fear to fail another relationship, fear to talk too much, fear to not talk enough, fear to be judged, fear to be invisible, fear to be different, fear to not be understood…

With all the social media platforms, we try to connect people, reduce the friction in creating new possible relationships, and it works. We have so many incredible situations, made possible thanks to all these platforms out there. But I don’t think it’s really enough to make people fearless. You can be a movie star, or a famous singer, at the end of the day, your memories, your past is there. You can’t really push the button rewind or delete. All of us need to learn to live with our past, our mistakes. And that’s probably one of the most complicated parts of being human.

Take 2 minutes to analyze your day until now: I doubt you didn’t find any trace of fear pushing you to act or say something you didn’t really want to.

## We can only accept our pasts

We can’t do anything to change our past, including yesterday. We can try to forget or think that we are not attached to it, and yes, you are right, our pasts don’t define who we are. But our pasts mold our personality and our beliefs, and beliefs are something so hard to change sometimes.
We can battle a whole life and try to change our pasts, but you know and I know that it’s a waste of time. Our pasts are all painful, we all have moments we would like to forget, people that make us feel bad, people that hurt us, friends, parents, that disappointed us, love relationships that created a hole in our heart… Fortunately, not physically.

So what are our options? Actually, do we have options? Maybe we have an easy option. And if we tried to choose the one the majority chooses? That would work? I don’t think I have an answer that would make you feel happy. The only answer that I can think of, is that accepting our past, whatever happened, whatever you lived is probably the only way to live our present and feel that joy that exists in every little thing around you.

I know what you may think: “Easy to say, hard to do”. Does anyone told you in your entire life: “Things are easy!”? Just ask you the question. Why most of us want something easy instead of something true. What happened in the history of humanity to make us believe that life equal **easy or hard**? Why can’t we just say that things are how they should be, and we need to choose the way we want to react when we are facing them? The way we choose to react and act is what matters.

## Creating a barrier will never be the option

When someone out there, our neighbor, a president, a friend decide to create a wall in their garden or between countries, we all think and believe that it is not a solution or even an option. But how many times, did we create a mental barrier between us and the world? How many times, did we get nervous because we don’t have full control over our life’s events? How many times, did we get angry because our child felt and instead of showing him love, we yell at him because we were afraid it could hurt himself? Afraid that next time, he could fall being alone? It’s easier to hide that fear behind that attitude than accepts and embrace that uncomfortable feeling of fear and react with love.

![A red and white road block in front of a green door](/images/articles/you-have-something-in-you-the-world-needs/door-barriere.jpeg 'Photo by <a href="https://unsplash.com/@mattedpictures?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matthew Garoffolo</a> on Unsplash')

Maybe things in your life, made you create layers. Layers of protection to “help you face life’s challenge”. Really? Are you feeling happiest since you closed some doors and people think you are a negative person? Is the world a better place because you hide your feelings and you are not able to cry anymore? I don’t think so.

I wish I could have multiple lives (some people believe in it), but the one we all have is the one we are currently living. And we usually don’t regret things we did, but things we were not able to achieve and to do, like be open to our wife or husband, show to our kids that we are not perfect and that we made mistakes sometimes.

## You can’t talk about life

In some cultures, some places in the world, you can’t really talk about fear and past. You can’t talk about the struggle you have in your life. A lot of people across history tried their best to remove some humanity in some cultures and who really wants to defeat centuries of culture which forces you to not be yourself? Things are not equaled in the world, but it’s not a reason to not try.

What makes people think they can’t talk about their issues, once again, fear is probably behind that for most cases.

![Woman in the dark looking down do a screen that reflects on her face. She looks tired.](/images/articles/you-have-something-in-you-the-world-needs/face-sad.jpeg 'Photo by <a href="https://unsplash.com/@hamann?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Niklas Hamann</a> on Unsplash')

Sometimes I’m not sure why, in a work environment, people can’t say “I don’t know, I’m not sure, I’m having doubts lately…” Is an issue to be human nowadays? Because I feel, I can’t work? Because I’m not sure, I will not be a good employee? Of course, a company is a place for you to work, help a company to grow and get more value in the market but is it not a place where humans live, breath and share emotions and moments?

I met many people around the world that were themselves at home, but could never be themselves at work. Look at your right… yeah, you found him/her!

## What are you waiting for?

Things are going fast, technologies like cryptocurrency, AI, VR, autonomous cars, all of that is changing and is going to change our worlds. But in the end, fears, layers, will always be there, and one day, a lot more people will have to seek help if they want to be free from all of that. Life will always be what it is, but all of us can improve other’s lives, being there when they need, sending a small message asking if everything is fine. We don’t really need to make big efforts to help our world to feel better. Believing that you can do a lot for the people around you is the first step.

Right now, maybe a friend is waiting to receive a message from you. A signal to make him feel he is not alone. Have someone that can reassure him that his/her past will not define his/her tomorrow.

…What are you really waiting for? 📲

_Disclaimer: I usually write articles about code, immigration, and tech, but a lot of my friends are lately facing the same issues, and even I try my best to help them, it’s also up to them to take action and choose the life they really want. This article is a way to hopefully help other people that may be facing the same issues in their lives. Let me a comment if you find this article relevant for your life!_


Sometimes the only thing you need to remember is that you are not alone in this world.

You have something in YOU that the world needs

The David Dias

J'ai compilé la liste des ressources indispensables pour apprendre à devenir développeur Front-End. Vous trouverez dans cette ...

Ressources INDISPENSABLES pour Développeur Web Débutant

Vous venez d'installer Chrome... Et vous ne savez par quoi commencer. Google Chrome Sync vous permet de vous connecter à ...

Comment synchroniser Chrome avec son compte Google

Vous avez envie de partir vivre à l'étranger ? Travailler et gagner de l'expérience en travaillant dans le web ? Voici quelques ...

Astuces pour s&#39;expatrier au 🇨🇦CANADA

thedaviddias

A playground for me to test Github workflows

github-workflows-playground


You may be getting the issue **"The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files."** from your Github workflow.

![Screenshot showing the 'set-output' issue from the Github workflows](/images/notes/set-output-nvmrc-github-actions.jpg)

Few months ago, I choose to update some of my Github workflows to read from my `.nvmrc` file instead of manually specifying my node version.

```.bash:.github/workflows/production.yml
on: push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Detect Node version
        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
        id: nvmrc

      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
```

But [since October 2022](https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/) and the runner version `2.298.2`, Github shows a warning regarding a future depreciation of the `set-output` command.

After few trials, I figured out how to update using the `$GITHUB_OUTPUT` instead:

```.bash:.github/workflows/update-production.yml
on: push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Detect Node version
        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
        id: nvmrc
        # shell: bash (to be added if you use composite actions)

      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
        uses: actions/setup-node@v3
        with:
          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
```

And "voilà", the warning should have disappeared and you should see the number of the version right after `Use Node.js XXXX` in your workflow.


Find out how to fix the deprecated set-output when you read the Nodejs version from your .nvmrc file in Github workflows.

How to fix "set-output" when reading nvmrc from the GitHub Actions?


When recently working on my blog, I tried to add a `postbuild` scripts with `next-sitemap` in my `package.json`. My goal was to automatically generate `.xml` files after each Next.js builds.

Using [pnpm](https://pnpm.io/), I found out that my `postbuild` was working with `npm` but not `pnpm`.

I found out [this issue](https://github.com/pnpm/pnpm/issues/2891) on Github mentionning the same problem I encountered. It seems that pre/posts scripts are not activated if using pnpm.

I found the solution adding the line below in my `.npmrc` local file:

```.bash:.npmrc
enable-pre-post-scripts=true
```

Now I can use pre/posts scripts and `pnpm`. I hope this could save you some time!


Find out what I had to update to use pre and posts scripts with pnpm.

How to fix "postbuild" and "prebuild" not working with pnpm?


This was a long wait! After months of lurking on Youtube watching others playing with their Deck, I finally got **my purchase confirmation email** for the Steam Deck!

![](/images/notes/steam-deck-email-purchase.jpg)

What kept me sane during this time was probably [this tool](https://getmydeck.ingenhaag.dev/s/US/256/1626745255) created by [Labidou51](https://www.reddit.com/u/Labidou51). I was able to get a sense of when I would receive the email confirmation.

<Tweet url="https://twitter.com/TheDavidDias/status/1553069456704020480?s=20&t=5VHTZkURrFadrkG3H1nU1Q" />

Some more days to wait and I hope to get this new amazing piece of tech (it's a computer) in my own hands! Maybe I can find a [nice skin on Dbrand](https://dbrand.com/shop/steam-deck-skins) in the meantime 😜?!


Hey there!
I'm David Dias

Latest notes

How to fix "set-output" when reading nvmrc from the GitHub Actions?

How to fix "postbuild" and "prebuild" not working with pnpm?

Finally received my Steam Deck confirmation email!

Currently reading

To read next

Latest updated projects

thedaviddias

github-workflows-playground

Latest articles

How Front-End Developers, Web and UX/UI Designers could better collaborate together?

9 Best Practices & UX Improvements for the two-factor authentication (2FA)

How to deploy your Next.js app on Netlify using Github Actions

You have something in YOU that the world needs

Latest Youtube videos

Ressources INDISPENSABLES pour Développeur Web Débutant

Comment synchroniser Chrome avec son compte Google

Astuces pour s'expatrier au 🇨🇦CANADA

Mini Dashboard

Hey there! I'm David Dias

Hey there!
I'm David Dias