In the mobile app ecosystem, providing a seamless user experience is critical. One way to enhance this is by implementing deep links and dynamic links within your app. Dynamic links allow you to share content and ensure users have a smooth transition whether they have your app installed or not. In this blog, we'll explore how to create dynamic links and deep linking URLs using Node.js for a React Native application. What Are Dynamic Links and Deep Links? Deep Links: These are URLs that take users to a specific part of your app. When users click on a deep link, the app opens to the specific content the link is meant to display. If the app is not installed, the link typically opens the web version of the app or a fallback page. Dynamic Links: These are deep links with added flexibility. They can change their behavior based on different conditions, such as whether the app is installed, the platform (iOS or Android), or even the context in which the link is opened (e.g., marketing campaigns). Why Use Dynamic Links? Cross-Platform Compatibility: Dynamic links work on multiple platforms, including iOS, Android, and web. Deferred Deep Linking: If the app isn't installed, dynamic links can direct users to the app store and then to the specific content once the app is installed. Enhanced User Experience: They provide a more personalized experience by directing users to the right content within your app. Prerequisites Before we dive in, make sure you have the following: Node.js installed on your machine. A React Native project setup. Firebase account (optional, but recommended for generating dynamic links). ## Step 1: Setting Up a Node.js Server We'll start by setting up a Node.js server that will generate dynamic links. You can use Express.js to create a simple server. First, create a new Node.js project: ``` mkdir dynamic-links-server cd dynamic-links-server npm init -y npm install express shortid ``` ## Step 2: Generating Dynamic Links ``` const express = require("express"); const shortId = require("shortid") const { appendSeoDetail } = require("./utils"); const app = express() const PORT = process.env.PORT || 3000 app.use(express.json()) app.use("/.well-known", express.static('.well-known')) const urls = {}; app.post("/create-url", (req, res) => { try { const { title, description, image, newsId } = req.body const previewUrl = `https://3a09-2402-4cc0-2501-1f4-71ad-7a58-7a4c-895c.ngrok-free.app/?newsId=${newsId}&title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&image=${encodeURIComponent(image)}` const id = shortId.generate(); urls[id] = previewUrl; res.send({ url: `https://3a09-2402-4cc0-2501-1f4-71ad-7a58-7a4c-895c.ngrok-free.app/${id}` }) } catch (error) { res.send({ error: "Something went wrong" }) } }) app.get('/:id', (req, res) => { const id = req.params.id; const url = urls[id]; if (url) { res.redirect(url); } else { res.sendStatus(404); } }); app.get('*', (req, res,) => { const { title, description, image } = req.query // Define values const source = appendSeoDetail({ title, description, image }) // Return the webpage return res.send(source); }); app.listen(PORT, () => { console.log("App is running on ", PORT) }) ``` ## Step 3: Creating index html for the social share preview ``` {{title}}

Redirecting you to Example app.

``` ## Step 4: Creating utils for the appending dynamic seo title ``` const path = require("path") const fs = require("fs"); function appendSeoDetail({ title, description, image }) { const _title = title ?? 'POUCH - Packaging News App'; const _subtitle = description ?? 'Pouch is a news aggregator application for the Packaging industry that summarises news articles and stories sourced from various third-party links including industry journals, expert blogs, and innovative company releases'; const _image = image ?? 'https://www.pouch.news/cropped-pulse%201.png'; // Load HTML template const templatePath = path.join(__dirname, '../index.html'); // Replace handles with content var source = fs.readFileSync(templatePath, { encoding: 'utf-8' }) .replaceAll('{{title}}', _title) .replaceAll('{{description}}', _subtitle) .replaceAll('{{image}}', _image); return source } module.exports = { appendSeoDetail } ``` ## Step 5: Make a .well-know folder and insert files for assetlinks.json and apple-app-site-association ``` { "applinks": { "details": [ { "appIDs": [ "EXDFF##.com.example" ], "paths": [ "*" ] } ] }, "webcredentials": { "apps": [ "EXDFF##.com.example" ] } } [ { "relation": [ "delegate_permission/common.handle_all_urls" ], "target": { "namespace": "android_app", "package_name": "com.example", "sha256_cert_fingerprints": [ "9B:83:32:66:75:91:03:3B:9C" ] } } ] ``` ## Step 7: Integrating Deep Links in React Native ``` const linking = { prefixes: ["example://", "https://3a09-2402-4cc0-2501-1f4-71ad-7a58-7a4c-895c.ngrok-free.app"], config, async getInitialURL() { const url = await Linking.getInitialURL() console.log(url, "Dynamic url") if (typeof url === "string") { return url } js }, } ``` --- {% embed https://reactnavigation.org/docs/deep-linking/ %} Conclusion By setting up dynamic links and deep linking in your React Native app with a Node.js backend, you can significantly enhance the user experience by providing seamless navigation and personalized content. Dynamic links offer a powerful way to ensure that users get to the right content, whether they have your app installed or not. This setup is not just limited to Firebase. You can use other services like Branch.io or create a custom solution depending on your needs. The principles, however, remain the same: enabling users to move directly to the content they care about. Happy coding!

surajprasad13

Creating Dynamic Links and Deep Linking URLs in Node.js for React Native

Join Our Newsletter. No Spam, Only the good stuff.