Fixing the Service Worker issue when you rewrite a React app using the Next.js framework

Do you have a React app already deployed on a web server and realized that your app is not ranking at all in any web search engine? Are you thinking about rewriting your app to improve its SEO (search engine optimization)? If you are, you might be thinking about using the Next.js framework, but before you dive into it, we’d like to walk you through the Next.js Service Worker issue, which can be a pain in the neck!

Let’s start with the basics

Let’s start with a brief introduction to React, Next.js and Service Worker. React is a JavaScript library used to build user interfaces; in technical terms, it’s a front-end framework that runs on the client side. Next.js is a JavaScript framework that lets you render React apps but on the server side. Finally, a Service Worker is a JavaScript file that runs on the browser in a background thread intercepting and handling network requests and caching or retrieving some resources from the cache. It is also independent of the application that it’s associated with. We could continue discussing general concepts, but let’s get right to the reason you’re here.

The issue

When we create a React app, a Service Worker is invoked by default, so even if we unregister the Service Worker before deploying the React app using Next.js, we must make sure that every browser removed the Service Worker. Otherwise, we will have to fix an unexpected issue because Next.js does not use Service Workers — remember that Next.js runs on the server side — and it also stores static files in a different location so, if we don’t update it, the browser will continue using it in order to access to wrong static file paths — e.g. images. The only way to avoid this issue is unregistering the Service Worker before deploying the React app. However, this makes no sense because if we create a React app, we will want to have a good performance and, in order to achieve that, we need a Service Worker.

The solution

To solve this, the idea is to unregister the Service Worker of our React app so the browser can remove it. To do that, we have to create a Service Worker on the root of the Next.js project and add an EventListener — on any loaded page — to remove this file from the browser. Once we do this, we can be sure that next time a browser makes a request, it will be updated. Another important thing to note is that browsers need to close all the Service Worker’s instances associated with our app to apply the changes.

A final note

We hope this workaround was useful and saves time for other React developers. But before you decide to rewrite a React app using Next.js to make it SEO friendly, keep in mind that it may not be the best option, especially if you are using Redux/Sagas to manage the app stored. Next.js was optimized for Apollo — one of the best GraphQL clients — to create HTTP requests and manage the app stored. It also has one more restriction: the environment variables can not be accessed in the client side with all that this implies.

Add a blog to your website to improve its SEO ranking

With the rise of the Internet and social media, blogging has become a big part of running a business regardless of the industry. More and more companies are adding blogs to their websites that include articles with tips, news, and interesting information about their fields in an attempt to build on their SEO. Today, we’d like to discuss the importance of having a blog and talk you through the technical difficulties of implementing it with AWS CloudFront, offering a possible solution.

Why is blogging important?

There are many reasons to have a blog in the current business world. A blog not only helps keep your website fresh and current, but it also encourages visitors to stay longer and lets you connect you with your audience. This, together with the fact that blogging helps you grow your keyword base and focus on long-tail keywords, makes blogs an excellent strategy to improve your website’s SEO ranking. Blogging is essential for SEO because it helps with the different aspects that search engines consider important, thus, attracting more users to your site. You should keep in mind including images and video will also improve SEO since search engines will give more relevance to that kind of content and that articles should include share buttons for social networks to generate backlinks (links from external sites to your site).  

Technical challenges when adding a blog

It’s important to understand that, to get the most out of a blog, its pages should be hosted under the same domain as the website itself. Some websites use a subdomain just for their blog which is not as advantageous as having the articles as paths on the original domain. For instance, articles hosted in www.mywebsite.com/blog/article1 will get better SEO results than blog.mywebsite.com/article1.

However, having blog articles in the same domain is not as easy as it seems. In general, we can divide the site into two sections: the site itself, with the core features, and the blog articles. The website features will be implemented by web developers and the blog articles can be written on a blogging platform like WordPress, Blogger or Medium. So, the question is: How can we merge those two sources of information into a single website? To solve that problem, we can create a reverse proxy. In this kind of proxy, the server directs client requests to the appropriate back-end server without doing a redirect.

How to implement a reverse proxy with AWS CloudFront

Let’s take a look at how to implement a reverse proxy through an example using Amazon Web Services (AWS). We’ll be working with a website hosted on S3 (it could be an Angular, Vue or React project) and an external blogging platform like WordPress. The site is distributed using AWS CloudFront in www.mywebsite.com and the blog is hosted on a different domain: www.myblog.com.

First, we need to update the blog articles since all links must redirect to the new blog’s URL: www.mywebsite.com/blog instead of www.myblog.com. After that, we can create a new origin on AWS CloudFront. Right now we only have one origin, the S3 bucket where we are hosting the website, so, we need to create a second origin: the external blog site.

Having two different origins will allow us to work some magic. For instance, when users go to www.mywebsite.com/blog/article1, we’ll show the content from the blog site, but keep the same URL the user entered. That will drastically improve the website’s SEO.

The next step is really simple: we need to create a new AWS CloudFront behavior to tell the CDN that every URL containing the /blog path pattern needs to use the blog origin we previously created.

It’s important to note that AWS CloudFront will not strip paths, so if we are asking for article logs under www.mywebsite.com/blog/, the original article on the blog platform needs to be hosted under /blog as well, for example, www.myblog.com/blog/article1

In some cases, other behaviors could be required. If we are using WordPress for the blog, we need to add a couple of extra behaviors to map the wp-content and wp-includes URLs. Otherwise, the proxy will try to look for those WordPress URLs on the front-end project code, returning a “Not Found” error.

This is how the final configuration will look like using WordPress:

And that’s it! Now we need to wait until the AWS CloudFront changes are propagated all over the world. In the days after implementing these changes, you’ll see the website’s SEO greatly improve.

Jest Snapshot testing

Today, we will talk about a useful tool called Jest Snapshot. This feature is the best option to make sure that our UI component does not change for no reason. We can also use Jest Snapshots as an ally to have unit tests that are cleaner and more maintainable, something that any developer will love.

What is a Jest Snapshot?

A Jest Snapshot is a screenshot of the React tree from a specific moment of some UI component. Jest can use that screenshot to compare it with the actual React tree render, and if both instances don’t match, the test will fail. If the test fails, we’ll know that a change was introduced since the last snapshot. The change can be expected or unexpected; in the first case, we just need to update the snapshot to be aligned with the new version of the UI component, and in the second case, we should review the component to check why there are differences between both instances.

When can Jest Snapshots be useful?

Jest Snapshots can be used not only for components -though, components are the most common use for it-, we can also use them for serializable data, functions, or anytime we need to test whether the output is correct.

Let’s take a look at some examples. Imagine we have a Header component which renders a title and subtitle from data prop -check the code below- and we need to test the component. Forget about the prop for a minute and focus only on the render; we need to check if it renders a <div> with their class name and their children, another two <div> which have <h1> and <h3> with the current text. You are probably thinking about many ways to do these simple tests, but let’s take a look at how easy it can be using Jest Snapshots.

If we decide to use Jest Snapshots, we’ll just need to add one test! We have to check if the render matches the snapshot and that’s it. But we have even more good news! If the component changes some tag or text in the future, we only have to update the snapshot and the unit tests will succeed again.

Now let’s say we have a Constants file and we should generate their unit tests. As you can guess, the best way to do this is using Jest Snapshots.

If you still have doubts, we hope this example shows you how Jest Snapshots make your life easier regarding unit tests, as it makes no sense to do complex things when we only need to know if some constant value has been changed or not.

Conclusion

Jest Snapshot testing is a fantastic tool that allows you to test your UI component render in a quick and easy way, saving time to spend on tests that really need more attention. Also, we have the benefit of getting a more maintainable unit test code.

If you are interested in this topic or you want to learn more about Jest and Enzyme, you can read Mock Function: Testing a React web app using Jest and Enzyme and Async code: Testing a React web app using Jest and Enzyme

Digital payment technologies are a reality. Have you ever imagined that the world would become 100% digital?

Well, it’s high time you did!

Today’s reality is that business and social activities are becoming digital, but what about how we pay for things? Is that becoming digital too?

Digital Payments

How to define digital payments? Digital payments are not one instrument but rather an umbrella term applied to a range of different instruments used in different ways.

Well, the answer is a hell YES!. Technology has transformed the way customers purchase. The reason being the increasing number of e-commerce businesses, as well as, the increasing penetration of mobile devices in the U.S.

All predictions indicate that online sales will keep growing in the next 5 years faster than offline sales. This is a worldwide trend and confirmed in countries such as China, USA, and UK that are leaders in retail online sales. More about digital payments in our blog

These factors imply changes in the user experience demanded by customers. They now want an intuitive and seamless experience which also needs to be fast, safe and convenient in all ways possible. Therefore, digital payment credentials must work in that way.

These changes are mostly promoted by the Millennials in comparison with Baby Boomers.

In the previous chart you can appreciate that not only Millennials prefer using a smartphone as a digital payment option, but also Baby Boomers do.

Smart Phones and tablets are very popular among Millennials for mobile baking like checking their account balance. Moreover, digital payment methods such as peer to peer payments through apps, like Apple Pay and Android Pay are becoming more popular every day.

However, the willingness of each generation to use wearables, digital currencies such as Bitcoins, e-wallets or other digital payment options are clearly different. Needless to say, Millennials are transforming the way we purchase.

All in all, digital payment methods are rapidly evolving in order to meet the instant gratification Millennials expect.s do.

Stay tuned to learn about trending digital payment methods! Hope you have enjoyed it ? Any feedback is welcome!

Are you totally out of this new tendency in the market? Do you have an entrepreneurial mindset, ambition, and curiosity about what a Bitcoin Wallet means?

Well, l will make it simple to you.

Bitcoin is a form of virtual currency, known as “cryptocurrency”. The difference is that they can be divided into minuscule fractions of a single coin. They can be exchanged for real money. You can buy and sell digital currency through Coinbase for example, and earn some extra money (or lose) just taking advantage of the market ups and downs.

Bitcoin wallet is not like a traditional wallet but digital. It’s composed of a Bitcoin Address (also known as Public Key) and a Private Key (known as the Secret). The Bitcoin Address is what you give others to send you bitcoins and the secret is the thing that enables you to spend the bitcoins because it’s needed to sign an outgoing transaction which verifies that you are the owner of those bitcoins.

Since bitcoins are stored in the network and only you own the signature (Secret) that allows you to spend those bitcoins, a couple of important things are true:

If you ever lose the secret, your bitcoins are gone, there’s no way to get them back.

If someone gets access or can see a copy of your secret, they can steal all your bitcoins and there’s no way to get them back

Bitcoin Theft: 5 Common Threats, Hacks, and Scams

Bitcoin wallet types

There are many types of bitcoin wallets, they can be desktop, mobile, online, hardware and paper wallets.

• Desktop: Most secure but not so practical
• Mobile: Most practical.
• Online: Easier and quicker to make transactions. Some argue that they are not very secure. Coinbase is an example.
• Hardware: They are portable, be careful not to lose it!
• Paper: Offline. Easy to become damaged or forgotten but a good way to store a backup of your wallet. Many people have a backup of their wallet stored in paper in a bank vault.

Now that you know what a Bitcoin Wallet is, make sure you never reveal the Private Key to anyone and that you store multiple backups of it in very secure places.

What is Blockchain Technology?

A Blockchain is a data structure that makes it possible to create a digital ledger of all bitcoins transactions and share it among a distributed network of computers. The Blockchain is seen as the main technological innovation of Bitcoin.

“Every informed person needs to know about Bitcoin because it might be one of the world’s most important developments.” Leon Luow

So first… let’s see what a bitcoin is.

It is a currency just like $, €, £. However, bitcoin is a decentralized, digital money created, held and spent electronically around the world.

Distributed database technology

A Blockchain is a public ledger of all Bitcoin transactions that have been executed.
It is constantly growing and the blocks are added to it in a chronological order. Each computer connected to the Bitcoin network automatically gets a copy of the Blockchain. The latter has complete information about the addresses and their balances right from the genesis block to the most recently completed block.

What about an analogy with Conventional Banking?

To use conventional banking as an analogy, the Blockchain is like a full history of banking transactions. Bitcoin transactions are entered chronologically in a Blockchain just the way bank transactions are. Blocks, meanwhile, are like individual bank statements.

How does it work?

The Blockchain network automatically checks in for transactions with itself every ten minutes. Each group of these transactions is referred to as a “block”. Each block of new transactions is shared with all nodes in the network. Altering any unit of information on the Blockchain would mean using a huge amount of computing power to override the entire network.

All in all…

Clearly, the Blockchain technology is revolutionalizing the finance industry. It is the first time we can exchange value without intermediaries. Therefore, Blockchain has all the potential to solve some of your business complex problems now and in the near future.

Introduction

React has become a popular library to build websites, earning second place in the most loved libraries according to the 2018 Stack Overflow survey. In the same way, React Native has also been increasing its popularity. However, there are some differences between these two technologies that we would like to discuss with you today: React vs React Native.

Library vs Framework

The main difference between these two languages is that while ReactJS is a JavaScript library to build UI interfaces on the web, React Native is a whole framework to create native mobile apps using the React library. For that reason, web developers with React experience can easily build native mobile apps on Android and iOS using React Native; they only have to learn the main differences between these languages.

UI components

React on the web modifies the browser DOM using a browser-independent DOM system for performance and cross-browser compatibility. When using React Native, mobile apps are rendered natively; therefore, an Android project can create an Android native LinearLayout with a Text inside. Similarly, an iOS app will render a UILabel inside a UIView.

For that reason, the naming convention is different on both platforms. The React library lets us use the same HTML tags we use on the web, for example, “div”, and “p”, while in the React Native framework, we have to use a more generic naming for UI components like View and Text.

Styling

Styling is done differently on both platforms. On React, we can use plain CSS, Sas  or choose an alternative like CSS-in-JS. However, in React Native there is no special language or syntax for defining styles. You just style your application using JavaScript through an API called “StyleSheet” that uses flexbox styling.

Animations

Animations are another feature that is done differently on React and React Native. On the web, we can use the famous CSS animation, but on React Native we should use the Animations API. We can see an example on the official documentation:

Libraries

It is usually difficult to share a library between React and React Native. There are exceptions when the library is just JavaScript code and doesn’t use HTML, SVG or canvas components. In that case, the library can be used on both platforms.

Navigation

Of course navigation on the web is different from navigation on the native code. In this case, the number of libraries to navigate between pages and screen is too high and the choice is personal. We recommend react-router for React and React Navigation for React Native.

React Native on the web

What if you want to build a single app and use it in Android, iOS and the web? During his time in Twitter, Nicolas Gallagher created a library to achieve this, which is currently used by Twitter, Major League Soccer, Flipkart, PlayStation, Uber, and The Times. React Native for the web makes it possible to run React Native components and APIs on the web using React DOM.

You can see a list of examples here: http://necolas.github.io/react-native-web/examples/

Conclusion

React vs React Native: They have several similarities that allow developers to build modern websites and native mobile apps in less time. Learning these differences allows a developer to build websites and mobile apps indistinctly. Additionally, new libraries like React Native web make it even easier to share code between web and mobile environments.

 

 

Testing React with Jest and Enzyme

Nowadays, it is almost inevitable for a React app to communicate with a backend using an API, so we can imagine that it’s very common to have to run async code in JavaScript. Because of this, today we’ll be discussing async code (asynchronous code) and the ways that we can test it using Jest and Enzyme. If you are new to Jest and Enzyme, you can take a look at Testing a React web app using Jest and Enzyme and Testing a React web app using Jest and Enzyme: mock functions to start getting familiar with them.

Think about any app that has to call an endpoint to get some useful data, and now imagine, what would you do to test that? You are probably thinking about calling the endpoint and then checking for the expected value. This approach is good, but we are missing something. When you call an endpoint, you are dispatching an async code, so you must let Jest know when the test has finished before it can continue with another test. If you don’t do that, the test will probably fail because it will start the next one immediately and you won’t know which test will be running when the first callback is returned. Fortunately, Jest has three different ways to handle this: callbacks, promises and async/await.

Callbacks

This is the first option that Jest brings us to handle the async code unit tests. It’s very simple; you have to create a test with a single argument called “done”, and you will use that argument as a function -callback- to indicate that test is finished. If done is never called, the test will fail as we explained in the previous paragraph.

Promises

This is the second option and it’s also simple. If you are using promises to get the response of an endpoint, you can also return a promise in your test and Jest will wait for it to resolve. In this case, it’s very important to return a promise. If you expect the promise to be rejected, you must use the catch method to assert the test.

Async/await

This is the last option to handle the async tests and it’s very similar to the Promises approach. You just add the “async” keyword as the name of the function test, and the “await” keyword in front of the function that calls the endpoint. Using these two keywords lets Jest know that the test will be an async one. If you expect the promise to be rejected, you must use the catch method, as you did for Promises.

Callbacks, Promises and Async code example

Let’s make an example to review the concepts above. Imagine you have an API with an endpoint (GET request) that, given a user ID, returns the user’s info, such as name, age, gender and email. Let’s call the function that sends the request “getUserData” and let’s create a unit test for this example by mixing the three approaches in the same file.

Conclusion

Any developer knows the importance of async code, but not every developer is familiar with how to test it. We tried to summarize the three ways that Jest can handle this kind of tests. Remember that none of these is better than the others, they are just different approaches to do the same thing. You can even mix them and use them in whichever way you find to be easier.