From 718a27af1a656e107b700331020d3a3d479b2063 Mon Sep 17 00:00:00 2001
From: Jessie Mongeon <jessie.mongeon@dfinity.org>
Date: Fri, 13 Dec 2024 11:23:27 -0600
Subject: [PATCH 1/3] update asset canister docs

---
 .../application-frontends/add-stylesheet.mdx  | 145 --------
 .../application-frontends/asset-security.mdx  |   7 -
 .../default-frontend.mdx                      | 347 ++----------------
 .../existing-frontend.mdx                     |  59 ++-
 .../level-1/1.3-first-dapp.mdx                |   2 +-
 plugins/utils/redirects.js                    |   8 +-
 sidebars.js                                   |   1 -
 7 files changed, 58 insertions(+), 511 deletions(-)
 delete mode 100644 docs/developer-docs/web-apps/application-frontends/add-stylesheet.mdx

diff --git a/docs/developer-docs/web-apps/application-frontends/add-stylesheet.mdx b/docs/developer-docs/web-apps/application-frontends/add-stylesheet.mdx
deleted file mode 100644
index 253f721793..0000000000
--- a/docs/developer-docs/web-apps/application-frontends/add-stylesheet.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
----
-keywords: [beginner, tutorial, frontend, stylesheet, assets, asset canister, style, css]
----
-
-import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
-import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
-
-# Using CSS to style frontends
-
-<MarkdownChipRow labels={["Beginner", "Tutorial"]} />
-
-## Overview
-
-[Cascading stylesheets (CSS)](https://www.w3schools.com/css/default.asp) are an important part of any frontend user interface. The default project template is configured to include a basic stylesheet that you can edit, but you may prefer to import your own custom stylesheet or use an alternate format. This guide illustrates how to style the [default frontend canister](default-frontend.mdx) using SCSS, the default format used by `dfx new` when creating React frontend <GlossaryTooltip>canisters</GlossaryTooltip>.
-
-### Prerequisites
-
-Before you start, verify that you have:
-
--  [x] `Node.js` `16.0.0` or newer installed for frontend development and can install packages using `npm install` in your project. For information about installing Node for your local operating system and package manager, see the [Node](https://nodejs.org/en/) website.
-
-- [x] Downloaded and installed [`dfx`](https://github.com/dfinity/sdk/releases/latest) version `0.17.0` or newer.
-
-## Create a new project
-
-You can either create a new project using [`dfx new`](/docs/current/developer-docs/developer-tools/cli-tools/cli-reference/dfx-new/), or you can follow the [default frontend canister](default-frontend.mdx) tutorial to setup a project that includes a React default frontend canister.
-
-If you’ve never used React before, you might want to explore the [intro to React](https://reactjs.org/tutorial/tutorial.html) tutorial or the [React website](https://reactjs.org/) before editing the frontend code.
-
-## Viewing the default stylesheet
-
-In the project `custom_greeting`, the default stylesheet for the frontend is stored in the file `src/custom_greeting_frontend/src/index.scss`. This file is imported to the `src/custom_greeting_frontend/src/main.jsx` file through the line:
-
-```
-import './index.scss';
-```
-
-Recall that in this default template, the `main.jsx` file is used to render the `App` content exported from `App.jsx`, and is then imported into the frontend's entrypoint `index.html` file.
-
-By default, this file contains the following code:
-
-```css
-body {
-  font-family: sans-serif;
-  font-size: 1.5rem;
-}
-
-img {
-  max-width: 50vw;
-  max-height: 25vw;
-  display: block;
-  margin: auto;
-}
-
-form {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-  flex-flow: row wrap;
-  max-width: 40vw;
-  margin: auto;
-  align-items: baseline;
-}
-
-button[type="submit"] {
-  padding: 5px 20px;
-  margin: 10px auto;
-  float: right;
-}
-
-#greeting {
-  margin: 10px auto;
-  padding: 10px 60px;
-  border: 1px solid #222;
-}
-
-#greeting:empty {
-  display: none;
-}
-```
-
-With this styling, the default frontend looks like this:
-
-![Sample frontend](_attachments/react-greeting.png)
-
-You can edit this style sheet to change the existing defined style, such as altering the font size, margin, border, and padding values, or you can add new style components, such as a background color. Here's a revised example:
-
-```css
-body {
-  font-family: serif;
-  font-size: 2.6rem;
-  color: purple;
-  background-color: lightblue;
-
-}
-
-img {
-  max-width: 100vw;
-  max-height: 100vw;
-  display: block;
-  margin: auto;
-}
-
-form {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-  flex-flow: row wrap;
-  max-width: 40vw;
-  margin: auto;
-  align-items: baseline;
-}
-
-button[type="submit"] {
-  padding: 5px 20px;
-  margin: 10px auto;
-  float: right;
-  color: pink;
-  font: serif;
-}
-
-#greeting {
-  margin: 10px auto;
-  padding: 10px 60px;
-  border: 10px solid #222;
-}
-
-#greeting:empty {
-  display: none;
-}
-```
-
-![Revised frontend](_attachments/revised-css.png)
-
-## Using multiple stylesheets
-
-Your application can use different stylesheets for different pages or sections of your app. Simply change the import statement to point to another stylesheet that should be used, such as:
-
-```
-import './another-stylesheet.scss';
-```
-
-## Next steps
-
-[Learn how to use an existing frontend application](existing-frontend.mdx).
\ No newline at end of file
diff --git a/docs/developer-docs/web-apps/application-frontends/asset-security.mdx b/docs/developer-docs/web-apps/application-frontends/asset-security.mdx
index 58f20eb929..af80d4c917 100644
--- a/docs/developer-docs/web-apps/application-frontends/asset-security.mdx
+++ b/docs/developer-docs/web-apps/application-frontends/asset-security.mdx
@@ -9,8 +9,6 @@ import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
 
 <MarkdownChipRow labels={["Intermediate", "Concept"]} />
 
-## Overview
-
 You can configure how a frontend <GlossaryTooltip>canister</GlossaryTooltip> responds to requests for specific assets by defining your
 desired configuration in a file named `.ic-assets.json` Each entry in `.ic-assets.json` allows for specifying a [glob](https://code.visualstudio.com/docs/editor/glob-patterns) pattern along with the headers to be returned in the response for any file that matches the pattern. You may also dictate whether redirects are performed from the non-certified endpoint to a certified endpoint for any given filename pattern.
 
@@ -49,8 +47,3 @@ If you are using an older version of `dfx`, we recommend updating your security
 ## Resources
 
 - [Asset canister architecture reference](/docs/current/references/asset-canister).
-
-## Next steps
-
-[Learn more about webpack](webpack.mdx).
-
diff --git a/docs/developer-docs/web-apps/application-frontends/default-frontend.mdx b/docs/developer-docs/web-apps/application-frontends/default-frontend.mdx
index 92c7acb6e3..811319ce9f 100644
--- a/docs/developer-docs/web-apps/application-frontends/default-frontend.mdx
+++ b/docs/developer-docs/web-apps/application-frontends/default-frontend.mdx
@@ -5,37 +5,25 @@ keywords: [beginner, tutorial, frontend, frontend canister, asset canister, asse
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
 
-# Using the default frontend canister
+# Hosting application frontends using an asset canister
 
 <MarkdownChipRow labels={["Beginner", "Tutorial"]} />
 
-## Overview
+When a dapp is deployed to ICP, it has the ability to host web assets natively. An ICP project's frontend is commonly referred to as the **frontend canister**, as it is a canister that hosts the frontend of the application.
 
-Dapps may have complex frontends that serve dynamic, interactive interfaces, or they can serve simple, static webpages such as HTML and CSS pages.
+Dapps may have complex frontends that serve dynamic, interactive interfaces, or they can be simple, static webpages using HTML and CSS. Web assets can come in many forms, such as CSS, JavaScript, React, HTML, images, videos, or streaming content. Most web apps contain a combination of several assets and frameworks together.
 
-Assets can come in many forms, such as:
+## What is an asset canister?
 
-- CSS.
+When a project has a frontend canister configured in its `dfx.json` file, `dfx` will compile the project's web assets into an **asset canister**. An asset canister is a special type of custom canister that uses Rust to compile the project's asset files into a Wasm module that can be installed and deployed to ICP. This is because canisters deployed on ICP must have a Wasm module.
 
-- JavaScript.
+## Application URLs
 
-- React.
+Frontend canisters serve the application's web assets via a URL that contains the <GlossaryTooltip>canister</GlossaryTooltip>'s ID. Local deployments use local URLs such as `http://127.0.0.1:4943/?canisterId=<canister-id>`, while applications deployed to the mainnet use public URLs containing the canister's ID followed by `.ic0.app`, `.icp0.io` or `raw.icp0.io`.
 
-- HTML.
+### Raw HTTP interfaces
 
-- Images, videos, or streaming content.
-
-- User interfaces that combine CSS, HTML, React, or other frameworks together.
-
-- Dynamic assets, such as dashboards that frequently update with real-time data.
-
-- Point of sale interfaces.
-
-When a dapp is deployed to ICP and has a frontend configured, the frontend assets will be displayed via a URL that contains the <GlossaryTooltip>canister</GlossaryTooltip>'s ID. For local deployments, canisters are accessible through local URLs such as `http://127.0.0.1:4943/?canisterId=<canister-id>`. The port `4943` is the default local deployment port, though this can be changed via the `dfx` configuration or using a `dfx` flag. [Learn more about custom local networks](/docs/current/developer-docs/developer-tools/cli-tools/advanced-dfx/networks-json).
-
-For canisters deployed to the mainnet, the canister can be accessed in a web browser using the canister's ID followed by `.ic0.app`, `.icp0.io` or `raw.icp0.io`. For example, the [playground](https://m7sm4-2iaaa-aaaab-qabra-cai.ic0.app/) is an application with a frontend user interface that can be used to deploy canisters in a temporary, sandbox environment. This dapp can be accessed via the URL `https://m7sm4-2iaaa-aaaab-qabra-cai.ic0.app/`.
-
-The `raw.icp0.io` domain is used for canisters deployed to the mainnet, and provides a way to access the raw HTTP interface of that canister. For local deployments that want to simulate the behavior of the `raw.icp0.io` domain, you must implement a method in your canister that consumes an HTTP request and outputs an HTTP response. Here is an example written in Motoko:
+The `raw.icp0.io` domain provides a way to access the raw HTTP interface of that canister. For local deployments that want to simulate the behavior of the `raw.icp0.io` domain, you must implement a method in your canister that consumes an HTTP request and outputs an HTTP response. Here is an example written in Motoko:
 
 ```motoko no-repl
 public shared(msg) func http_request(req: HttpRequest) : async HttpResponse {
@@ -47,123 +35,28 @@ public shared(msg) func http_request(req: HttpRequest) : async HttpResponse {
 };
 ```
 
-By default, projects created with `dfx new` have the option to include a frontend canister that uses a template for one of several frontend frameworks. This guide illustrates using the default React template generated by `dfx new` and guides you through some basic modifications to customize the interface displayed.
-
-
-### dfx v0.17.0 and newer
-
-Projects created with `dfx` v0.17.0 and newer include the option to decide between:
-
-- SvelteKit
-- React
-- Vue
-- Vanilla JS
-- No JS template
-- No frontend canister
-
-### dfx v0.16.1 and older
-
-`dfx` versions v0.16.1 and older include a JavaScript template `index.js` and `webpack.config.js` file.
-
-By default, the `index.js` file imports an agent that is located in the `src/declarations/project_frontend/` folder, where `project` is your project's name. This directory will be generated by `dfx` when you run `dfx deploy`, either locally or when deploying to the mainnet.
-
-### Prerequisites
-
-Before you start, verify that you have:
-
-- [x] Node.js `16.0.0` or newer installed for frontend development and can install packages using `npm install` in your project. For information about installing Node for your local operating system and package manager, see the [Node](https://nodejs.org/en/) website.
-
-- [x] Downloaded and installed [`dfx`](https://github.com/dfinity/sdk/releases/latest) version `0.17.0` or newer.
-
-## Create a new project
-
-To create a new project directory for your custom frontend dapp:
-
-- #### Step 1: Open a terminal shell on your local computer.
-
-- #### Step 2: Navigate to the directory you are using for your ICP projects, if you are using one. Otherwise, it is recommended to create a new working directory.
-
-- #### Step 3: Check that you have `Node.js` installed locally by running the following commands:
-
-```bash
-which node
-which npm
-```
-
-- #### Step 4:  Create a new project by running the following command:
+## Default `dfx` project configuration
 
-```
-dfx start --clean --background
-dfx new custom_greeting
-```
+By default, each project created with `dfx new` will include a frontend canister unless the `--no-frontend` flag is used. `dfx` supports default templates for the SvelteKit, React, Vue, and Vanilla JS frameworks, or you can select "No JS template" if you'd like no frontend template to be used.
 
-You will be prompted to select the language that your backend canister will use:
-
-```
-? Select a backend language: ›
-❯ Motoko
-  Rust
-  TypeScript (Azle)
-  Python (Kybra)
-```
-
-:::info
-`dfx` versions `v0.17.0` and newer support this `dfx new` interactive prompt. [Learn more about `dfx v0.17.0`](/blog/2024/02/14/news-and-updates/update#dfx-v0170).
-:::
-
-Then, select a frontend framework for your frontend canister. Select 'React':
-
-```
-  ? Select a frontend framework: ›
-  SvelteKit
-❯ React
-  Vue
-  Vanilla JS
-  No JS template
-  No frontend canister
-```
-
-Lastly, you can include extra features to be added to your project:
-
-```
-  ? Add extra features (space to select, enter to confirm) ›
-⬚ Internet Identity
-⬚ Bitcoin (Regtest)
-⬚ Frontend tests
-```
-
-- #### Step 5:  Navigate into your project directory by running the following command:
-
-```
-cd custom_greeting
-```
-
-If you’ve never used React before, you might want to explore the [intro to React](https://reactjs.org/tutorial/tutorial.html) tutorial or the [React website](https://reactjs.org/) before editing the frontend code.
-
-## Review the default configuration
-
-Before you make any changes, let’s review the default frontend settings in the `dfx.json` configuration file for your project:
-
-- #### Step 1: Open the `dfx.json` configuration file in a code editor.
-
-- #### Step 2: Notice that the `canisters` key includes settings for a `custom_greeting_frontend` canister.
+Frontend canisters will be defined in your project's `dfx.json` file as `PROJECT_NAME_frontend`.
 
 ```json
 {
   "canisters": {
-    "custom_greeting_backend": {
-      "main": "src/custom_greeting_backend/main.mo",
+    "PROJECT_NAME_backend": {
+      "main": "src/PROJECT_NAME_backend/main.mo",
       "type": "motoko"
     },
-    "custom_greeting_frontend": {
+    "PROJECT_NAME_frontend": {
       "dependencies": [
-        "custom_greeting_backend"
+        "PROJECT_NAME_backend"
       ],
       "source": [
-        "src/custom_greeting_frontend/dist"
+        "src/PROJECT_NAME_frontend/dist"
       ],
       "type": "assets",
-      "workspace": "custom_greeting_frontend"
+      "workspace": "PROJECT_NAME_frontend"
     }
   },
   "defaults": {
@@ -177,206 +70,28 @@ Before you make any changes, let’s review the default frontend settings in the
 }
 ```
 
-Let’s take a look at the settings in this section.
-
-- Frontend assets for your project are compiled into their own canister. In this case, a canister named `custom_greeting_frontend`.
-
-- The `custom_greeting_frontend` canister has a default dependency on the `custom_greeting_backend` canister for the project.
-
-- The `source` settings specify the paths to the `src` directory that is used for the static assets that will be included in your `custom_greeting_frontend` canister when you build your project. If you have CSS or JavaScript files, you would include them in this directory. After building the project, the assets are served from the `dist` directory.
-
-- The `type` setting specifies that the `custom_greeting_frontend` should be deployed using the [asset canister](https://github.com/dfinity/sdk/tree/master/src/canisters/frontend/ic-frontend-canister), which comes with everything you need to host static assets on ICP.
-
-## Review the default frontend files
-
-For this guide, you are going to make calls to the default backend canister through a custom frontend. Before you make any changes, let’s take a look at the default frontend canister files.
-
-- #### Step 1: View the contents of `src/custom_greeting_frontend/src/index.html`.
-
-This template file is the default frontend entrypoint for the dapp. It contains standard HTML that imports the `/src/main.jsx` script that is used to serve the React application:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>IC Hello Starter</title>
-  <base href="/" />
-  <link rel="icon" href="/favicon.ico" />
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
-</html>
-```
-
-- #### Step 2:  View the contents of `src/custom_greeting_frontend/src/main.jsx`.
-
-```js
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.scss';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
-```
-
-This file is imported into the `index.html` file and is used to render the App that is exported from the `App.jsx` file.
-
-- #### Step 3:  View the contents of `src/custom_greeting_frontend/src/App.jsx`.
-
-This file will contain the following piece of code:
-
-```js
-import { useState } from 'react';
-import { custom_greeting_backend } from 'declarations/custom_greeting_backend';
-
-function App() {
-  const [greeting, setGreeting] = useState('');
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    const name = event.target.elements.name.value;
-    custom_greeting_backend.greet(name).then((greeting) => {
-      setGreeting(greeting);
-    });
-    return false;
-  }
-
-  return (
-    <main>
-      <img src="/logo2.svg" alt="DFINITY logo" />
-      <br />
-      <br />
-      <form action="#" onSubmit={handleSubmit}>
-        <label htmlFor="name">Enter your name: &nbsp;</label>
-        <input id="name" alt="Name" type="text" />
-        <button type="submit">Click Me!</button>
-      </form>
-      <section id="greeting">{greeting}</section>
-    </main>
-  );
-}
-
-export default App;
-```
-
-This code has the following components:
+Frontend canisters have the following default configuration settings:
 
-- An `import` statement points to an actor that will allow us to make calls to our `custom_greeting_backend` canister from `"../declarations"`.
+- Frontend assets for your project are compiled into their own canister. In this case, a canister named `PROJECT_NAME_frontend`.
 
-- A function that handles the logic for calling the backend canister's `greeting` method when the button is pressed.
+- The `PROJECT_NAME_frontend` canister has a default dependency on the `PROJECT_NAME_backend` canister for the project.
 
-- Creates the components for the image file, input form, and clickable button.
-
-- Returns the result of the `greeting` method along with the input from the submitted form.
-
-## Deploy the dapp
-
-- #### Step 1:  Check that you are still in the root directory for your project, if needed.
-
-- #### Step 2:  Build and deploy your dapp by running the following command:
-
-```
-dfx deploy // Deploy locally
-dfx deploy --network ic // Deploy to the mainnet
-```
+- The `source` setting specifies the paths to the `src` directory that are used for the web assets that will be compiled into your `PROJECT_NAME_frontend` canister when you build the project.
 
-:::info
-Deploying to the mainnet will cost [cycles](/docs/current/developer-docs/getting-started/tokens-and-cycles).
-:::
+- The `type` setting specifies that the `PROJECT_NAME_frontend` should be deployed using the [asset canister](https://github.com/dfinity/sdk/tree/master/src/canisters/frontend/ic-frontend-canister), which compiles the web assets listed in `source` into a Wasm module.
 
-## View the frontend
-
-You can now access the frontend for the default dapp by navigating to the frontend canister's generated URL.
-
-- #### Step 1: To view the frontend locally, open a new tab or window of your terminal and run:
-
-```
-npm start
-```
-
-Then, open a browser and navigate to `http://localhost:4943`.
-
-To view the frontend on the mainnet, navigate to the frontend canister URL returned when you ran `dfx deploy`, such as:
-
-```
-https://<canister-id>.icp0.io/
-```
-
-- #### Step 2: Verify that you are prompted to type a name.
-
-For example:
-
-![Sample frontend](_attachments/react-greeting.png)
-
-- #### Step 3: Enter a name in the input field with the text you want to display, then click **Click Me!** to see the result.
-
-For example:
-
-![Greeting result](_attachments/greeting-response.png)
-
-## Revise the frontend and test your changes
-
-After viewing the frontend, you might want to make some changes. To modify the frontend code:
-
-- #### Step 1:  Open the `src/custom_greeting_frontend/src/App.jsx` file in a code editor to modify the application's style settings.
-
-For example, you might want to add a placeholder for the input field or change the button text and styling by making changes such as:
-
-```js
-import { useState } from 'react';
-import { custom_greeting_backend } from 'declarations/custom_greeting_backend';
-
-function App() {
-  const [greeting, setGreeting] = useState('');
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    const name = event.target.elements.name.value;
-    custom_greeting_backend.greet(name).then((greeting) => {
-      setGreeting(greeting);
-    });
-    return false;
-  }
-
-  return (
-    <main>
-      <img src="/logo2.svg" alt="DFINITY logo" />
-      <br />
-      <br />
-      <form action="#" onSubmit={handleSubmit}>
-        <label htmlFor="name">Enter your name: &nbsp;</label>
-        <input id="name" placeholder="Type your name here" alt="Name" type="text" />
-	<button type="submit"><strong>Click here</strong></button>
-</form>
-      <section id="greeting">{greeting}</section>
-    </main>
-  );
-}
-
-export default App;
-```
+### Default frontend canister files
 
-- #### Step 2:  Save the file and view the updated page in your browser.
+The default files included in the frontend canister will depend on the framework you chose when you created your project, or you can use an [existing application frontend](existing-frontend.mdx).
 
-If viewing the changes locally, refresh the page, and the updates should be reflected in the browser.
+## Example frontend canisters
 
-If you deployed to the mainnet, you will need to run `dfx deploy` again to upgrade the canister and apply the changes.
+A few example frontend canisters you can reference include:
 
-For example:
+- [ICP Ninja sample projects](https://icp.ninja).
 
-![Modified styles on your entry page](_attachments/revised-greeting.png)
+- [Minimal counter dapp](https://github.com/dfinity/examples/tree/master/motoko/minimal-counter-dapp/src/minimal_dapp_frontend).
 
-## Next steps
+- [Random maze](https://github.com/dfinity/examples/tree/master/motoko/random_maze/src/random_maze_assets).
 
-You can change things such as font family, background color, button styling, and more through CSS stylesheets. [Learn how to customize the frontend with CSS](add-stylesheet.mdx).
\ No newline at end of file
+- [IC Point of sale](https://github.com/dfinity/examples/tree/master/motoko/ic-pos/src/icpos_frontend).q
diff --git a/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx b/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx
index af258f87a7..3fecff0c08 100644
--- a/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx
+++ b/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx
@@ -4,79 +4,65 @@ keywords: [intermediate, tutorial, frontend, assets, asset canister]
 
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
+import TabItem from "@theme/TabItem";
 
 
 # Using an existing frontend application
 
 <MarkdownChipRow labels={["Intermediate", "Tutorial"]} />
 
-## Overview
-
 While numerous starter projects and examples exist for those who prefer to start from scratch, deploying an existing frontend application as a frontend <GlossaryTooltip>canister</GlossaryTooltip> is also a viable option for building an application on ICP.
 
-This guide provides an overview of how to deploy an existing Next.js application as a frontend canister.
-
 :::caution
 Server methods such as `getServerSideProps` are not supported, since it will be deployed as a client-only application.
 :::
 
-## Next.js
+## Using a Next.js frontend
 
 [Next.js](https://nextjs.org/) is an open-source web development framework providing React-based web applications with server-side rendering and static website generation.
 
 [View the GitHub repo for this example](https://github.com/jennifertrin/nextjsicp).
 
-### Prerequisites
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
 
-Before you start, verify that you have:
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
 
-- [x] Downloaded and installed [`dfx`](https://github.com/dfinity/sdk/releases/latest).
+</TabItem>
+</Tabs>
 
-- [x] An existing Next.js application. This guide will use the [Next.js ICP example](https://github.com/jennifertrin/nextjsicp).
-
-### Step 1: Build your Next.js application
+- #### Step 1: Build your Next.js application.
 
 To start, you must generate static files and build your Next.js application. To generate the static files, add this line to your `next.config.js` file:
 
-```js
-output: 'export'
-```
-
-Your `next.config.js` file should resemble the following:
-
 ```js
 const nextConfig = {
   output: 'export',
 };
 ```
 
-Please note that you may have existing settings that you should avoid overriding.
+:::danger
+Please note that you may have existing settings that you should avoid overwriting.
+:::
 
-Then, build your Next.js application by running the appropriate build command. For example, if you are using npx:
+Then, build your Next.js application by running the appropriate build command. You should reference your `package.json`'s `scripts` section to determine the correct build command.
+ For example, if you are using npx:
 
 ```bash
 npx run build
 ```
 
-You should reference your `package.json` `scripts` section to determine the correct build command.
-
 This should generate an `out` folder, which consists of the static assets that make up the frontend.
 
-:::info
-When deploying on ICP, these static files are not public to anyone, including the nodes. Only the Wasm file, which is a binary instruction file that does not leak any of your code, is public.
-:::
-
-### Step 2: Create a `dfx.json` file
+- #### Step 2: Create a `dfx.json` file
 
 In the top-level directory of your repository, add a `dfx.json` file containing the following content:
 
 ```json
 {
     "canisters": {
-      "app": {
-        "frontend": {
+        "frontend": {
           "entrypoint": "out/index.html"
-        },
         "source": ["out"],
         "type": "assets"
       }
@@ -85,13 +71,13 @@ In the top-level directory of your repository, add a `dfx.json` file containing
 }
 ```
 
-`dfx.json` is the configuration file for deploying your to ICP as a canister. In this example, this file is configuring a canister called 'app'. Note that you can adjust `app` to refer to the name of your canister. Also, make sure that these point to the correct files:
+`dfx.json` is the configuration file used for configuring and deploying your app to ICP as a canister. In this example, this file is configuring a canister called 'app'. Note that you can adjust `app` to refer to the name of your canister. Also, make sure that these point to the correct files:
 
-- `"entrypoint": "out/index.html"`
+- `"entrypoint": "out/index.html"`: The index or entrance point for the application's files.
 
-- `"source": ["out"]`
+- `"source": ["out"]`: The directory hosting the application's web assets.
 
-### Step 3: Generate Candid definitions
+- #### Step 3: Generate Candid definitions.
 
 Run the following command to generate the correct [Candid](/docs/current/developer-docs/smart-contracts/candid/candid-concepts) type definitions:
 
@@ -99,7 +85,7 @@ Run the following command to generate the correct [Candid](/docs/current/develop
 dfx generate
 ```
 
-### Step 4: Deploy the project
+- #### Step 4: Deploy the project.
 
 Then, you can deploy the Next.js application locally for testing:
 
@@ -119,10 +105,7 @@ Deploying to the mainnet will cost [cycles](/docs/current/developer-docs/getting
 
 After running either command, you will see a generated link that is now hosting your Next.js application. The local url will be in the format `http://127.0.0.1:4943/?canisterId=<canister-id>`, while the mainnet URL will be in the format `https://<canister-id>.icp0.io/`.
 
-### Step 5: Navigate to the frontend canister to view the application
+- #### Step 5: Open the application.
 
 Navigate to the frontend canister using the URL you received in the last step.
 
-## Next steps
-
-[Learn about asset security policies](asset-security.mdx).
diff --git a/docs/tutorials/developer-journey/level-1/1.3-first-dapp.mdx b/docs/tutorials/developer-journey/level-1/1.3-first-dapp.mdx
index 6c600cf950..cfa85a83a9 100644
--- a/docs/tutorials/developer-journey/level-1/1.3-first-dapp.mdx
+++ b/docs/tutorials/developer-journey/level-1/1.3-first-dapp.mdx
@@ -623,7 +623,7 @@ Start by creating the file `src/poll_frontend/src/index.html` that contains the
 **What does this code do?**
 The HTML code above is a simple form that provides the end user with options to select using radio buttons. There is nothing 'Web3' or specific to ICP about this code.
 
-Then, the `<head>` tag is used to include some basic CSS for the page's styling. To learn more about adding a stylesheet, see: [add a stylesheet](/docs/current/developer-docs/web-apps/application-frontends/add-stylesheet).
+Then, the `<head>` tag is used to include some basic CSS for the page's styling. To learn more about adding a stylesheet, see: [add a stylesheet](/docs/current/developer-docs/web-apps/application-frontends/default-frontend).
 :::
 
 Next, you will need a `webpack.config.js` file that defines several parameters to facilitate your local development web server.
diff --git a/plugins/utils/redirects.js b/plugins/utils/redirects.js
index 3217b7a205..99851dfc7d 100644
--- a/plugins/utils/redirects.js
+++ b/plugins/utils/redirects.js
@@ -54,7 +54,7 @@ const redirects = `
   /docs/rust-guide/rust-intro /docs/current/developer-docs/backend/rust/
   /docs/languages/languages-overview /docs/current/developer-docs/smart-contracts/write/overview
   /docs/current/developer-docs/smart-contracts/write/choosing-language /docs/current/developer-docs/smart-contracts/write/overview
-  /docs/current/developer-docs/frontend/my-contacts /docs/current/developer-docs/web-apps/application-frontends/add-stylesheet
+  /docs/current/developer-docs/frontend/my-contacts /docs/current/developer-docs/web-apps/application-frontends/default-frontend
   /docs/ic-interface-spec /docs/current/references/ic-interface-spec
   /docs/interface-spec /docs/current/references/ic-interface-spec
   /docs/current/developer-docs/updates/computation-and-storage-costs /docs/current/developer-docs/gas-cost
@@ -110,7 +110,7 @@ const redirects = `
   /docs/developers-guide/troubleshooting /docs/current/developer-docs/getting-started/troubleshooting
   /docs/developers-guide/tutorials-intro /docs/current/motoko/main/getting-started/motoko-introduction
   /docs/developers-guide/tutorials/default-frontend /docs/current/developer-docs/web-apps/application-frontends/default-frontend
-  /docs/developers-guide/tutorials/my-contacts /docs/current/developer-docs/web-apps/application-frontends/add-stylesheet
+  /docs/developers-guide/tutorials/my-contacts /docs/current/developer-docs/web-apps/application-frontends/default-frontend
   /docs/developers-guide/webpack-config /docs/current/developer-docs/web-apps/application-frontends/overview
   /docs/developers-guide/work-with-languages /docs/current/developer-docs/smart-contracts/write/overview
   /docs/developers-guide/working-with-canisters /docs/current/developer-docs/smart-contracts/maintain/settings
@@ -340,7 +340,7 @@ const redirects = `
   /docs/current/developer-docs/setup/best-practices/troubleshooting /docs/current/developer-docs/smart-contracts/best-practices/troubleshooting
   /docs/current/developer-docs/frontend/ /docs/current/developer-docs/web-apps/application-frontends/overview
   /docs/current/developer-docs/frontend/default-frontend /docs/current/developer-docs/web-apps/application-frontends/default-frontend
-  /docs/current/developer-docs/frontend/add-stylesheet /docs/current/developer-docs/web-apps/application-frontends/add-stylesheet
+  /docs/current/developer-docs/frontend/add-stylesheet /docs/current/developer-docs/web-apps/application-frontends/default-frontend
   /docs/current/developer-docs/frontend/boilerplate-frontend /docs/current/developer-docs/web-apps/application-frontends/overview
   /docs/current/developer-docs/frontend/existing-frontend /docs/current/developer-docs/web-apps/application-frontends/existing-frontend
   /docs/current/developer-docs/production/custom-domain/ /docs/current/developer-docs/web-apps/custom-domains/using-custom-domains
@@ -657,6 +657,8 @@ const redirects = `
   /docs/current/developer-docs/defi/tokens/ledger/usage/overview /docs/current/developer-docs/defi/overview
   /docs/current/developer-docs/web-apps/obtain-verify-ic-pubkey /docs/current/developer-docs/developer-tools/cli-tools/cli-reference/dfx-ping
   /docs/current/developer-docs/web-apps/design-dapps /docs/current/developer-docs/smart-contracts/overview/introduction
+  /docs/current/developer-docs/web-apps/application-frontends/add-stylesheet /docs/current/developer-docs/web-apps/application-frontends/default-frontend
+
   `
   .split(/[\r\n]+/)
   .map((line) => line.trim().replace(/^#.*$/, "").trim())
diff --git a/sidebars.js b/sidebars.js
index bbff85da62..f5168fa60f 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -532,7 +532,6 @@ const sidebars = {
               id: "developer-docs/web-apps/application-frontends/overview",
             },
             "developer-docs/web-apps/application-frontends/default-frontend",
-            "developer-docs/web-apps/application-frontends/add-stylesheet",
             "developer-docs/web-apps/application-frontends/existing-frontend",
             "developer-docs/web-apps/application-frontends/asset-security",
             "developer-docs/web-apps/application-frontends/webpack",

From da7180c1c292cb8afd69e6e210c57aad31a29684 Mon Sep 17 00:00:00 2001
From: Jessie Mongeon <133128541+jessiemongeon1@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:55:10 -0600
Subject: [PATCH 2/3] Update
 docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx

---
 .../web-apps/application-frontends/existing-frontend.mdx        | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx b/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx
index 3fecff0c08..71d1154de4 100644
--- a/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx
+++ b/docs/developer-docs/web-apps/application-frontends/existing-frontend.mdx
@@ -5,6 +5,8 @@ keywords: [intermediate, tutorial, frontend, assets, asset canister]
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
 import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
 
 
 # Using an existing frontend application

From 6a2b7c3f27c73078259ec03fc40b32d645c61b34 Mon Sep 17 00:00:00 2001
From: Jessie Mongeon <jessie.mongeon@dfinity.org>
Date: Fri, 13 Dec 2024 13:42:52 -0600
Subject: [PATCH 3/3] fix links

---
 .../developer-docs/web-apps/application-frontends/overview.mdx | 2 --
 docs/developer-docs/web-apps/application-frontends/webpack.mdx | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/docs/developer-docs/web-apps/application-frontends/overview.mdx b/docs/developer-docs/web-apps/application-frontends/overview.mdx
index 3c88956dad..c771a6e590 100644
--- a/docs/developer-docs/web-apps/application-frontends/overview.mdx
+++ b/docs/developer-docs/web-apps/application-frontends/overview.mdx
@@ -133,8 +133,6 @@ let path = HttpCertificationPath::wildcard("/js");
 
 - Using [raw HTML and JavaScript](/docs/current/motoko/main/getting-started/motoko-introduction) to display a simple HTML entry page.
 
-- Using [React and TypeScript](./add-stylesheet.mdx) to import CSS properties from an external file.
-
 - [Vite + React + Motoko](https://github.com/rvanasa/vite-react-motoko) template example.
 
 - [Vite + SvelteKit + Motoko](https://github.com/letmejustputthishere/vite-sveltekit-motoko-ii/tree/main) template example.
diff --git a/docs/developer-docs/web-apps/application-frontends/webpack.mdx b/docs/developer-docs/web-apps/application-frontends/webpack.mdx
index b332a80bb7..5f1de6fd65 100644
--- a/docs/developer-docs/web-apps/application-frontends/webpack.mdx
+++ b/docs/developer-docs/web-apps/application-frontends/webpack.mdx
@@ -18,8 +18,7 @@ In many cases, you can use the default `webpack.config.js` file as is, without a
 plugins, modules, and other custom configurations to suit your needs. The specific changes you make to
 the `webpack.config.js` configuration largely depends on the other tools and frameworks you want to use.
 
-For example, if you have experimented with the [using the default frontend canister](default-frontend.mdx)
-or [using CSS to style frontends](add-stylesheet.mdx) tutorials, you might have modified the following section to work with React
+For example, if you have experimented with the default frontend canister, you might have modified the following section to work with React
 JavaScript:
 
 ```js