Add full stack dev skill guide (#6101)
* partially complete guide staging * complete full-stack developer skills guidepull/6029/head^2
dsh
5 months ago
committed by
GitHub
parent
3c065338db
commit
dadaa18687
3 changed files with 298 additions and 1 deletions
@ -0,0 +1,266 @@ |
|||||||
|
--- |
||||||
|
title: '8 In-Demand Full Stack Developer Skills to Master' |
||||||
|
description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.' |
||||||
|
authorId: fernando |
||||||
|
excludedBySlug: '/full-stack/developer-skills' |
||||||
|
seo: |
||||||
|
title: '8 In-Demand Full Stack Developer Skills to Master' |
||||||
|
description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg' |
||||||
|
isNew: true |
||||||
|
type: 'textual' |
||||||
|
date: 2024-07-05 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## 8 In-Demand Full Stack Developer Skills to Master |
||||||
|
|
||||||
|
It should be no surprise to anyone that given the fast pace of the web development industry, every type of developer, especially full stack developers, must stay ahead of the curve by continuously updating their skills. |
||||||
|
|
||||||
|
Full-stack web developers share a unique blend of expertise that allows them to independently build and maintain entire web applications. However, this mix of skills is a double-edged sword because it makes staying up-to-date harder for them. |
||||||
|
In this article, we will explore the 8 essential full stack developer skills that you need to master and thrive in your career. |
||||||
|
|
||||||
|
Remember that you have more details about the different technologies and topics to cover in our [full stack developer roadmap](https://roadmap.sh/full-stack). |
||||||
|
|
||||||
|
## Understanding full-stack development |
||||||
|
|
||||||
|
Full stack development involves both frontend and backend work. It means you're not just limited to designing the parts of a website or application that users interact with (frontend), but also managing the server, database, and application logic that power those interactions (backend). |
||||||
|
|
||||||
|
Plus, full-stack developers need to be proficient in working with both relational and non-relational databases, setting up and maintaining infrastructure, and ensuring that their applications are scalable and secure. In other words, if they need to, full-stack developers can be the equivalent of a one-man army. Is this an ideal situation? No, it isn’t. In fact, a better way to look at a full stack developer is to think of them as a wildcard that can be placed in any team, and they’ll consistently add value to it, with minimum ramp-up time needed. |
||||||
|
|
||||||
|
With that foundation in mind, let's dive into the specific skills you need to master. |
||||||
|
|
||||||
|
## 1. Basic understanding of HTTP |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Let’s start with the basics: understanding HTTP. HTTP, or HyperText Transfer Protocol, is the foundation of any interaction on the web. It’s what allows clients (like your web browser) and servers to communicate with each other. As a full-stack developer, having a solid grasp of HTTP is crucial for building, debugging, and maintaining web applications. It’s your bread and butter, and you’ll need to internalize it if you hope to become great at your job. |
||||||
|
|
||||||
|
### Why HTTP Matters for Full Stack Developers? |
||||||
|
Without HTTP, the internet as we know it wouldn’t function, it’s that simple. For a full-stack developer, understanding HTTP means you can effectively manage how your frontend communicates with your backend. |
||||||
|
|
||||||
|
### Key Concepts to understand in HTTP |
||||||
|
|
||||||
|
- **HTTP Methods**: These are the actions that can be performed on a resource. The most common methods are GET (to retrieve data), POST (to send data to the server), PUT (to update data), and DELETE (to remove data). Each method has a specific purpose and knowing when to use each one is essential for building efficient APIs. You can read the [full list of verbs here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). |
||||||
|
- **Status Codes**: HTTP status codes are responses from the server to the client's request. They indicate whether the request was successful, if there was an error, or if further action is needed. Common status codes include 200 (OK), 404 (Not Found), 500 (Internal Server Error), and 403 (Forbidden). Understanding these codes helps in debugging and improving user experience. Here’s the [full list of status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) in case you’re wondering. |
||||||
|
- **Headers**: HTTP headers are key-value pairs sent between the client and server. They carry essential information like content type, authorization information (in some cases even credentials), and cache control. Familiarity with headers allows you to manage security, content negotiation, and request-response flow more effectively. While you can create your own, here’s a list of the [standard set of HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers). |
||||||
|
|
||||||
|
## 2. HTML/CSS/JavaScript |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
For full-stack developers, a solid grasp of HTML, CSS, and JavaScript is essential. These technologies are the building blocks of the visual side of the web, enabling you to create an engaging and functional user interface. While you'll need many other coding skills, mastering these three should be your first priority. |
||||||
|
|
||||||
|
### HTML (HyperText Markup Language) |
||||||
|
|
||||||
|
HTML forms the backbone of any web page, providing structure and content. It defines elements like headings, paragraphs, links, images, and multimedia components. |
||||||
|
|
||||||
|
**Key Features**: |
||||||
|
|
||||||
|
- **Semantic Elements**: Elements like `<header>`, `<footer>`, `<article>`, and `<section>` enhance accessibility and SEO. Properly using these elements makes your content more understandable for users, search engines, and accessibility devices like screen readers. |
||||||
|
- **Foundational**: Understanding HTML is crucial for laying the foundation of any web application, making it an essential skill for full stack developers. |
||||||
|
|
||||||
|
### CSS (Cascading Style Sheets) |
||||||
|
|
||||||
|
CSS is responsible for the visual presentation of a web page. It controls layout, colors, fonts, and overall style, making your web pages visually appealing. |
||||||
|
|
||||||
|
**Key Features**: |
||||||
|
|
||||||
|
- **Rich visual elements**: Features like Flexbox, Grid Layout, animations, and transitions allow you to create complex designs with minimal code. |
||||||
|
- **Responsive Design**: Media queries, Flexbox, and Grid are vital for creating web pages that look great on all devices, from desktops to smartphones. |
||||||
|
|
||||||
|
### JavaScript |
||||||
|
|
||||||
|
JavaScript adds interactivity and dynamic behavior to web pages. In other words, it makes the webpage come to life. |
||||||
|
|
||||||
|
**Key Features**: |
||||||
|
|
||||||
|
- **Modern JavaScript**: Features like arrow functions, template literals, destructuring, modules, and promises make your code more concise and readable. |
||||||
|
- **Interactive Elements**: JavaScript makes your web pages interactive, responding to user actions in real time. |
||||||
|
|
||||||
|
## 3. Writing Modern JavaScript |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Modern JavaScript is a key element for full stack development, bringing not just new syntax but powerful tools that make development more efficient and scalable. Mastering this involves understanding how to stay up-to-date with the latest developments in the JS-world, and it also involves technologies such as: npm, build-tools, and bundlers that streamline the development process. |
||||||
|
|
||||||
|
### What is “modern JavaScript”? |
||||||
|
|
||||||
|
The term “Modern JavaScript” can be a bit ambiguous, considering how every new feature or syntax update will directly affect your experience as a developer. |
||||||
|
Some of those “key modern features” are: |
||||||
|
|
||||||
|
- **Arrow Functions**: Offer a shorthand for writing functions and lexical scoping of the this keyword. |
||||||
|
- **Template Literals**: Provide an easier way to create strings with embedded expressions. |
||||||
|
- **Destructuring**: Simplifies the extraction of values from arrays or properties from objects. |
||||||
|
- **Modules**: Enable better code organization and reuse. |
||||||
|
- **Promises and Async/Await**: Facilitate asynchronous programming by providing cleaner and more intuitive ways to handle async operations. |
||||||
|
|
||||||
|
### npm (Node Package Manager) |
||||||
|
|
||||||
|
For those who don’t yet know, [npm](https://www.npmjs.com/) is a critical tool for managing JavaScript libraries and dependencies. It allows you to easily install, update, and manage packages, ensuring your projects stay up-to-date with the latest versions and features. |
||||||
|
|
||||||
|
### Build Tools and Bundlers |
||||||
|
|
||||||
|
Build tools and bundlers to automate many repetitive tasks, optimize performance, and ensure code is production-ready. Let’s take a look at some key tools: |
||||||
|
|
||||||
|
- **Webpack**: [Webpack](https://webpack.js.org/) is a robust module bundler that processes and bundles JavaScript files along with assets like images and stylesheets. It has an ecosystem of plugins and loaders, making it highly configurable and suitable for complex applications. |
||||||
|
- **Parcel 2**: [Parcel](https://parceljs.org/) simplifies the bundling process with zero configuration out of the box. It automatically handles code splitting hot module replacement and supports a variety of file types. |
||||||
|
- **Vite**: [Vite](https://vitejs.dev/) is designed for speed, leveraging native ES modules to deliver lightning-fast development builds and optimized production builds using Rollup. It’s particularly ideal for modern frameworks like Vue, React, and Svelte. Vite’s configuration is straightforward, and it supports an extensive plugin system for additional functionality. |
||||||
|
|
||||||
|
## 4. At least One Frontend Framework (React, Vue, Angular) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Although HTML, CSS, and JavaScript form the core of front-end development, there are many frameworks and libraries that can significantly enhance your development workflow. Among the most popular front-end frameworks and libraries are React, Vue, and Angular. |
||||||
|
|
||||||
|
Mind you, there are quite a lot of other options out there. However, React, Vue, and Angular remain the primary choices for most developers due to their widespread use and strong community support. |
||||||
|
|
||||||
|
### React |
||||||
|
|
||||||
|
Developed by Facebook, React is a powerful JavaScript library for building user interfaces, especially for single-page applications. |
||||||
|
|
||||||
|
- **Component-Based Architecture**: React’s structure is built around components that encapsulate their own logic, styles, and behaviors. This modular approach promotes reusability and maintainability, making it easier to manage complex applications. |
||||||
|
- **Virtual DOM**: React uses a virtual DOM to optimize performance. This technique reduces the need for direct DOM manipulation, which translates into faster updates and a smoother user experience. |
||||||
|
- **Large Ecosystem and Community**: With a large ecosystem of libraries and tools, plus a strong community, React provides lots of resources for problem-solving and third-party integrations. |
||||||
|
|
||||||
|
### Angular |
||||||
|
|
||||||
|
Developed and maintained by Google, Angular is a full framework for building dynamic web applications |
||||||
|
|
||||||
|
- **Full-Featured Framework**: Angular offers a “complete” solution with built-in support for routing, state management, form handling, and HTTP requests. This approach minimizes the need for additional third-party libraries. |
||||||
|
- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view (the data and its representation), making updates more efficient. |
||||||
|
- **Extensive Documentation and Community Support**: Angular has excellent documentation and a very active community, providing a wealth of resources for learning and troubleshooting. |
||||||
|
|
||||||
|
### Vue |
||||||
|
|
||||||
|
Vue.js, created by Evan You after working for Google, is known for its progressive framework design, making it easy to integrate into projects incrementally. |
||||||
|
|
||||||
|
- **Progressive Framework**: Vue is designed to be incrementally adoptable, allowing developers to start with a small part of their application and gradually integrate more features as needed. |
||||||
|
- **Simplicity and Ease of Learning**: Vue’s straightforward syntax and design make it easier for new developers to learn and start building applications quickly. |
||||||
|
- **Flexibility**: Vue offers extensive customization options and can be easily integrated with other projects or libraries. It combines a simple core library with advanced features suitable for larger applications. |
||||||
|
|
||||||
|
Each of these frameworks has its own set of strengths and use cases. The right choice depends on your specific project requirements and personal preference. |
||||||
|
|
||||||
|
## 5. Backend Programming Language |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Choosing the right backend programming language is crucial for building robust and efficient server-side applications. Here are some of the most popular languages used in backend development, each with its own unique features and benefits. You can read this detailed guide for more options and a complete description of each one: [The best backend languages to master](https://roadmap.sh/backend/languages). |
||||||
|
|
||||||
|
**JavaScript (Node.js)**: JavaScript, primarily known for front-end development, extends to the backend through Node.js. Node.js allows for server-side scripting, enabling full stack developers to use the same language for both client-side and server-side development. When it comes to picking a single language for full stack development, JavaScript definitely takes the lead. |
||||||
|
|
||||||
|
**Python**: Python is well known for its simplicity and readability, making it a favorite among developers. Its vast ecosystem of libraries and frameworks, such as Django and Flask, streamlines backend development and makes full stack web development very straightforward. Python's versatility and ease of use make it suitable for both beginners and experienced developers. |
||||||
|
|
||||||
|
**Java**: Java is a highly popular, class-based, object-oriented programming language that’s designed to have as few implementation dependencies as possible. Java is commonly used in large-scale enterprise applications. Frameworks like Spring and Hibernate further enhance its capabilities. |
||||||
|
|
||||||
|
**Ruby**: Ruby is known for its elegant syntax that is natural to read and easy to write. Ruby on Rails, a powerful web application framework, simplifies the process of building web applications by providing default structures for a database, a web service, and web pages. Its convention-over-configuration approach makes development faster and easier. |
||||||
|
|
||||||
|
There are many more options, and as a full stack developer, you’ll need to understand the type of technologies you feel more comfortable with, before choosing the language for your backend. |
||||||
|
|
||||||
|
## 6. Consuming and Creating RESTful APIs |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
For full stack developers, working with RESTful APIs is a fundamental skill that bridges the front-end and back-end of web applications. APIs (Application Programming Interfaces) allow different software systems to communicate with each other, enabling your front-end to interact seamlessly with server-side logic and data. |
||||||
|
|
||||||
|
### Consuming RESTful APIs |
||||||
|
|
||||||
|
Consuming APIs involves making HTTP requests from your front-end application to retrieve or send data to the server. Here are the key concepts: |
||||||
|
|
||||||
|
- **HTTP Methods**: Understanding the different HTTP methods is crucial. We’ve already mentioned them above when describing HTTP itself, so make sure to check out the links listed there for more details. |
||||||
|
- **Endpoints and Routes**: An API endpoint is a specific path where your API can be accessed by a client. Each endpoint corresponds to a route in your back-end server, handling specific requests. In the case of RESTful APIs, these routes refer to resources in your system. |
||||||
|
- **Request and Response**: When consuming an API, the front-end sends a request to the server and receives a response. The request typically includes headers (metadata about the request) and a body (data sent to the server), while the response contains the status code, headers, and data. |
||||||
|
- **Fetching Data**: In JavaScript, you can use the native fetch API or libraries like Axios to make HTTP requests. |
||||||
|
|
||||||
|
### Creating RESTful APIs |
||||||
|
|
||||||
|
Creating APIs involves setting up server-side routes and handling requests. Here’s how to get started: |
||||||
|
|
||||||
|
- **Define Routes**: In your back-end framework (like Express for Node.js or Django for Python), define routes that correspond to different endpoints. Each route should handle a specific HTTP method. |
||||||
|
- **Handle Requests and Responses**: For each route, write logic to handle incoming requests and send appropriate responses. Use status codes to indicate the outcome of the request (e.g., 200 for success, 404 for not found, 500 for server errors). |
||||||
|
- **Middleware**: Middleware functions in frameworks like Express can process requests before they reach the endpoint handlers. They’re useful for tasks like authentication, logging, and data validation. |
||||||
|
- **Database Integration**: Often, your API will interact with a database. Use an ORM (Object-Relational Mapping) tool like Sequelize for SQL databases or Mongoose for MongoDB to manage database operations. |
||||||
|
- **REST Principles**: Ensure your API follows REST principles, such as statelessness (each request is independent), resource-based URLs (use nouns for endpoints), and appropriate use of HTTP methods. You can [read here](https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) the full details about REST from the paper that defined the concept. |
||||||
|
|
||||||
|
## 7. Databases |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Understanding both relational and non-relational databases is crucial for managing and storing data effectively in your applications. Each type of database has its own strengths and use cases, and knowing when to use each is essential for building robust and scalable applications. |
||||||
|
|
||||||
|
### Relational Databases |
||||||
|
|
||||||
|
Relational databases store data in structured tables with predefined schemas. They use SQL (Structured Query Language) for querying and managing data. Here are some key relational databases: |
||||||
|
|
||||||
|
- **MySQL**: MySQL is one of the most popular open-source relational databases. It's known for its ease of use (a common choice for new developers) and performance. |
||||||
|
- **PostgreSQL**: PostgreSQL is a powerful, open-source relational database system known for its advanced features and compliance with SQL standards. It supports complex queries, transactions, and extensibility, making it suitable for a wide range of applications. |
||||||
|
- **SQLite**: SQLite is a lightweight, disk-based database that's easy to set up and use. It's often used in embedded systems and applications that require a simple, self-contained database engine. You’re not going to see big systems using SQLite for its main database, but it’s very common in small projects. |
||||||
|
|
||||||
|
### Non-Relational Databases |
||||||
|
|
||||||
|
Non-relational databases, also known as NoSQL databases, store data in various formats such as documents, key-value pairs, graphs, or wide-column stores. They are designed to handle large volumes of unstructured or semi-structured data. Here are some popular non-relational databases: |
||||||
|
|
||||||
|
- **MongoDB**: MongoDB is a document-oriented database that stores data in JSON-like documents. It’s highly flexible and scalable, making it ideal for applications that require quick iterations and schema flexibility. |
||||||
|
- **Redis**: Redis is an in-memory key-value store known for its high performance and speed. It’s commonly used for caching, real-time analytics, and as a message broker. |
||||||
|
- **Cassandra**: Cassandra is a distributed, wide-column store designed for handling large amounts of data across many commodity servers without any single point of failure. It's highly scalable and suitable for applications that require high availability and performance. |
||||||
|
|
||||||
|
In the end, like with many other technologies, there is not one single option that’s better than the others. It’s more about your particular needs and the features of each database. When having to decide on a specific database option, try to understand their capabilities and try to match them to your particular context. |
||||||
|
|
||||||
|
## 8. Hosting and Infrastructure |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
For full stack developers, understanding hosting and infrastructure is essential for deploying and managing their web applications. This involves knowing where to host your applications, how to set up servers, and how to ensure your application runs smoothly and efficiently. Here’s a breakdown of key concepts and services in this area: |
||||||
|
|
||||||
|
### Cloud Hosting Providers |
||||||
|
|
||||||
|
Cloud hosting providers offer scalable and flexible solutions for hosting web applications. They provide various services including virtual machines, storage, databases, and more. Some of the most popular providers are: |
||||||
|
|
||||||
|
- **Amazon Web Services (AWS)**: AWS offers a comprehensive suite of cloud services, including EC2 for virtual servers, S3 for storage, and RDS for managed databases. Its scalability and range of services make it a go-to choice for many developers. |
||||||
|
- **Google Cloud Platform (GCP)**: GCP provides robust cloud computing services, including Compute Engine for virtual machines, Cloud Storage, and Cloud SQL for managed databases. |
||||||
|
- **Microsoft Azure**: Azure offers a wide range of cloud services similar to AWS and GCP. It includes Azure Virtual Machines, Blob Storage, and Azure SQL Database. Azure integrates well with Microsoft’s other products, making it ideal for enterprise applications. |
||||||
|
|
||||||
|
### Web Hosting Services |
||||||
|
|
||||||
|
For simpler or smaller-scale projects, traditional web hosting services might be more than enough. These services typically offer easy setup and management for hosting websites and web applications: |
||||||
|
|
||||||
|
- **Heroku**: Heroku is a platform-as-a-service (PaaS) that makes it easy to deploy, manage, and scale applications. It supports several programming languages and provides a straightforward way to deploy applications directly from your code repository. |
||||||
|
- **Netlify**: Netlify specializes in hosting static websites and front-end applications. It provides continuous deployment from Git repositories, built-in SSL, and a global CDN, making it a popular choice for modern web development workflows. |
||||||
|
- **Vercel**: Vercel is optimized for Next.js. It offers seamless deployment, serverless functions, and a global CDN, ensuring fast and reliable performance for web applications. |
||||||
|
|
||||||
|
### Containers and Orchestration |
||||||
|
|
||||||
|
Containers allow developers to package applications with all their dependencies, ensuring consistency across different environments (this simplifies deployment processes by ensuring your app always gets deployed into the same system). Orchestration tools manage and scale these containers: |
||||||
|
|
||||||
|
- **Docker**: Docker is a platform that allows developers to create, deploy, and run applications in containers. Containers are lightweight and portable, making it easier to manage application dependencies and environments. |
||||||
|
- **Kubernetes**: Kubernetes is an open-source orchestration tool for managing containerized applications at scale. It automates deployment, scaling, and operations of application containers, providing a solid infrastructure for large-scale applications. |
||||||
|
|
||||||
|
### Serverless Architecture |
||||||
|
|
||||||
|
If you just don’t want to think about the server, at all (configuration, specs, resource requirements, etc), then you probably want a serverless architecture. |
||||||
|
|
||||||
|
Serverless architecture allows developers to build and run applications without managing server infrastructure (the servers are there, you just don’t interact directly with them). Key benefits include automatic scaling and pay-per-use billing. |
||||||
|
|
||||||
|
- **AWS Lambda**: AWS Lambda lets you run code without provisioning or managing servers. It executes code in response to events and automatically scales based on the number of requests, making it ideal for microservices and real-time data processing. |
||||||
|
- **Google Cloud Functions**: Google Cloud Functions is a serverless execution environment for building and connecting cloud services. It allows you to write simple, single-purpose functions that are triggered by events. |
||||||
|
- **Azure Functions**: Azure Functions provides a serverless compute service that enables you to run event-triggered code. It integrates with other Azure services, offering a seamless development and deployment experience. |
||||||
|
|
||||||
|
### Infrastructure as Code (IaC) |
||||||
|
|
||||||
|
IaC allows developers to manage and provision computing infrastructure through machine-readable configuration files rather than physical hardware configuration or interactive configuration tools. This is a great option if you’re looking to version your infrastructure configuration. |
||||||
|
|
||||||
|
- **Terraform**: Terraform is an IaC tool that allows you to define and provision data center infrastructure using a high-level configuration language. It supports multiple cloud providers, making it a versatile choice for managing infrastructure. While not fully open-source, Terraform offers a paid version called Terraform Cloud. If you’re looking for a fully open-source version, you can look into OpenTofu, which is an open-source fork from Terraform under the Mozilla Public License 2.0. |
||||||
|
- **Ansible**: Ansible is an open-source automation tool for configuration management, application deployment, and task automation. It uses YAML and doesn’t require agent software on the target nodes, making it easy to use and manage. |
||||||
|
|
||||||
|
##Conclusion |
||||||
|
Keeping up-to-date with the full set of skills any full stack web developer will need for their job is not easy, given how varied their work might be. That said, the 8 full stack developer skills listed here are more than enough to get you started, and you can keep adding more as you see the need for them. |
||||||
|
|
||||||
|
Remember that if you want more details about the roadmap to become a great full stack developer, you have a great resource here: [Full stack developer roadmap](https://roadmap.sh/full-stack). |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
--- |
||||||
|
import GuideContent from '../../components/Guide/GuideContent.astro'; |
||||||
|
import GuideHeader from '../../components/GuideHeader.astro'; |
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro'; |
||||||
|
import { getGuideById } from '../../lib/guide'; |
||||||
|
import { getOpenGraphImageUrl } from '../../lib/open-graph'; |
||||||
|
import { replaceVariables } from '../../lib/markdown'; |
||||||
|
|
||||||
|
const guideId = 'full-stack-developer-skills'; |
||||||
|
const guide = await getGuideById(guideId); |
||||||
|
|
||||||
|
const { frontmatter: guideData } = guide!; |
||||||
|
|
||||||
|
const ogImageUrl = |
||||||
|
guideData.seo.ogImageUrl || |
||||||
|
getOpenGraphImageUrl({ |
||||||
|
group: 'guide', |
||||||
|
resourceId: guideId, |
||||||
|
}); |
||||||
|
--- |
||||||
|
|
||||||
|
<BaseLayout |
||||||
|
title={replaceVariables(guideData.seo.title)} |
||||||
|
description={replaceVariables(guideData.seo.description)} |
||||||
|
permalink={guide.frontmatter.excludedBySlug} |
||||||
|
canonicalUrl={guideData.canonicalUrl} |
||||||
|
ogImageUrl={ogImageUrl} |
||||||
|
> |
||||||
|
<GuideHeader guide={guide!} /> |
||||||
|
<GuideContent guide={guide!} /> |
||||||
|
</BaseLayout> |
||||||
Loading…
Reference in new issue