Web3Templates

https://docs.web3templates.com/
Admin
Web3Templates provides technical documentation and templates for web development, covering...
Tokens:24,233
Snippets:78
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Eleventy Dependencies

Source: https://docs.web3templates.com/getting-started/quickstart

Installs the necessary dependencies for an Eleventy template using npm. This command should be run in the project's root directory after unzipping the template.

```bash
npm install
```

--------------------------------

### Install Eleventy Dependencies

Source: https://docs.web3templates.com/quickstart

Installs the necessary dependencies for an Eleventy template using npm. This command should be run in the project's root directory after unzipping the template.

```bash
npm install
```

--------------------------------

### Build Eleventy Project

Source: https://docs.web3templates.com/getting-started/quickstart

Builds the Eleventy project to generate the initial CSS. This command is typically run once during the initial setup process.

```bash
npm run build
```

--------------------------------

### Install Eleventy Dependencies

Source: https://docs.web3templates.com/docs/getting-started/quickstart

Installs the necessary dependencies for an Eleventy template using npm. This command should be run in the project's root directory after unzipping the template.

```bash
npm install
```

--------------------------------

### Build Eleventy Project

Source: https://docs.web3templates.com/docs/getting-started/quickstart

Builds the Eleventy project to generate the initial CSS. This command is typically run once during the initial setup process.

```bash
npm run build
```

--------------------------------

### Build Eleventy Project

Source: https://docs.web3templates.com/quickstart

Builds the Eleventy project to generate the initial CSS. This command is typically run once during the initial setup process.

```bash
npm run build
```

--------------------------------

### Install Next.js Dependencies

Source: https://docs.web3templates.com/getting-started/quickstart

Installs the necessary dependencies for a Next.js template using yarn. This command should be executed in the project's root directory.

```bash
yarn
```

--------------------------------

### Start Astro Development Server

Source: https://docs.web3templates.com/docs/astro/installation-astro

Commands to start the development server for an Astro template. After installing dependencies, running these commands will launch a local server, typically at http://localhost:4321, allowing you to see your changes in real-time.

```Shell
npm run dev
# or
yarn dev
# or (recommended)
pnpm dev
```

--------------------------------

### Install Next.js Dependencies

Source: https://docs.web3templates.com/quickstart

Installs the necessary dependencies for a Next.js template using yarn. This command should be executed in the project's root directory.

```bash
yarn
```

--------------------------------

### Install Next.js Dependencies

Source: https://docs.web3templates.com/docs/getting-started/quickstart

Installs the necessary dependencies for a Next.js template using yarn. This command should be executed in the project's root directory.

```bash
yarn
```

--------------------------------

### Start Astro Development Server

Source: https://docs.web3templates.com/astro/installation-astro

Commands to start the development server for an Astro template. After installing dependencies, running these commands will launch a local server, typically at http://localhost:4321, allowing you to see your changes in real-time.

```Shell
npm run dev
# or
yarn dev
# or (recommended)
pnpm dev
```

--------------------------------

### Run Eleventy

Source: https://docs.web3templates.com/eleventy/installation-eleventy

Starts the Eleventy static site generator to serve the project locally. This command allows you to preview your website during development, usually at a specified localhost address.

```shell
npm run start
```

--------------------------------

### Run Eleventy Development Server

Source: https://docs.web3templates.com/getting-started/quickstart

Starts the Eleventy development server, making the website live at http://localhost:8080. This command is used to view the project during development.

```bash
npm run start
```

--------------------------------

### Run Eleventy Development Server

Source: https://docs.web3templates.com/quickstart

Starts the Eleventy development server, making the website live at http://localhost:8080. This command is used to view the project during development.

```bash
npm run start
```

--------------------------------

### Run Eleventy Development Server

Source: https://docs.web3templates.com/docs/getting-started/quickstart

Starts the Eleventy development server, making the website live at http://localhost:8080. This command is used to view the project during development.

```bash
npm run start
```

--------------------------------

### Run Eleventy

Source: https://docs.web3templates.com/docs/eleventy/installation-eleventy

Starts the Eleventy static site generator to serve the project locally. This command allows you to preview your website during development, usually at a specified localhost address.

```shell
npm run start
```

--------------------------------

### Build Project

Source: https://docs.web3templates.com/eleventy/installation-eleventy

Builds the project to generate the initial CSS files. This command is typically run once during the setup process to compile assets and prepare the project for development or production.

```shell
npm run build
```

--------------------------------

### Run Next.js Server

Source: https://docs.web3templates.com/docs/nextjs/installation-nextjs

This command starts the Next.js development server, allowing you to view your website locally. After successful execution, the website will typically be available at http://localhost:3000.

```bash
yarn dev
```

--------------------------------

### Run Next.js Development Server

Source: https://docs.web3templates.com/docs/getting-started/quickstart

Starts the Next.js development server, making the website live at http://localhost:3000. This command is used for local development and testing.

```bash
yarn dev
```

--------------------------------

### Run Next.js Server

Source: https://docs.web3templates.com/nextjs/installation-nextjs

This command starts the Next.js development server, allowing you to view your website locally. After successful execution, the website will typically be available at http://localhost:3000.

```bash
yarn dev
```

--------------------------------

### Install Dependencies

Source: https://docs.web3templates.com/docs/eleventy/installation-eleventy

Installs all necessary project dependencies using npm. This command reads the package.json file to download and set up the required libraries and packages for the project.

```shell
npm install
```

--------------------------------

### Install Dependencies

Source: https://docs.web3templates.com/eleventy/installation-eleventy

Installs all necessary project dependencies using npm. This command reads the package.json file to download and set up the required libraries and packages for the project.

```shell
npm install
```

--------------------------------

### Build Project

Source: https://docs.web3templates.com/docs/eleventy/installation-eleventy

Builds the project to generate the initial CSS files. This command is typically run once during the setup process to compile assets and prepare the project for development or production.

```shell
npm run build
```

--------------------------------

### Run Next.js Development Server

Source: https://docs.web3templates.com/quickstart

Starts the Next.js development server, making the website live at http://localhost:3000. This command is used for local development and testing.

```bash
yarn dev
```

--------------------------------

### Run Next.js Development Server

Source: https://docs.web3templates.com/getting-started/quickstart

Starts the Next.js development server, making the website live at http://localhost:3000. This command is used for local development and testing.

```bash
yarn dev
```

--------------------------------

### Install Astro Template Dependencies

Source: https://docs.web3templates.com/docs/astro/installation-astro

This section provides commands to install project dependencies for an Astro template using popular package managers like npm, yarn, and pnpm. It's a crucial step before starting development.

```Shell
npm install
# or
yarn install
# or (recommended)
pnpm install
```

--------------------------------

### Install Astro Template Dependencies

Source: https://docs.web3templates.com/astro/installation-astro

This section provides commands to install project dependencies for an Astro template using popular package managers like npm, yarn, and pnpm. It's a crucial step before starting development.

```Shell
npm install
# or
yarn install
# or (recommended)
pnpm install
```

--------------------------------

### Basic TailwindCSS CSS File Setup

Source: https://docs.web3templates.com/tailwindcss/install-tailwindcss

This CSS code includes the essential Tailwind directives to enable its utility classes for styling your project.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### Install Dependencies with Yarn

Source: https://docs.web3templates.com/docs/nextjs/installation-nextjs

This command installs all the necessary project dependencies using Yarn, a JavaScript package manager. Ensure Node.js and Yarn are installed on your system before running this command.

```bash
yarn
```

--------------------------------

### Install Dependencies with Yarn

Source: https://docs.web3templates.com/nextjs/installation-nextjs

This command installs all the necessary project dependencies using Yarn, a JavaScript package manager. Ensure Node.js and Yarn are installed on your system before running this command.

```bash
yarn
```

--------------------------------

### Build and Preview Astro Template Locally

Source: https://docs.web3templates.com/astro/installation-astro

Commands to build the Astro template for production and preview it locally. This is useful for testing the final output before deploying the website to a hosting provider.

```Shell
npm run build
npm run preview

# or
yarn build
yarn preview

# or (recommended)
pnpm build
pnpm preview
```

--------------------------------

### Build and Preview Astro Template Locally

Source: https://docs.web3templates.com/docs/astro/installation-astro

Commands to build the Astro template for production and preview it locally. This is useful for testing the final output before deploying the website to a hosting provider.

```Shell
npm run build
npm run preview

# or
yarn build
yarn preview

# or (recommended)
pnpm build
pnpm preview
```

--------------------------------

### Cloning GitHub Repository

Source: https://docs.web3templates.com/nextjs/installation-nextjs

Instructions for cloning a template repository from GitHub. This involves using the `git clone` command, with options to clone into a specific directory or the current one. Ensure the repository name is updated before cloning.

```bash
# clone inside `my-project` folder
git clone https://github.com/username/template-repo.git my-project
# or clone in the same directory
git clone https://github.com/username/template-repo.git .
```

--------------------------------

### Cloning GitHub Repository

Source: https://docs.web3templates.com/docs/nextjs/installation-nextjs

Instructions for cloning a template repository from GitHub. This involves using the `git clone` command, with options to clone into a specific directory or the current one. Ensure the repository name is updated before cloning.

```bash
# clone inside `my-project` folder
git clone https://github.com/username/template-repo.git my-project
# or clone in the same directory
git clone https://github.com/username/template-repo.git .
```

--------------------------------

### Clone Astro Template from GitHub

Source: https://docs.web3templates.com/astro/installation-astro

Instructions for cloning an Astro template repository from GitHub. This involves forking the repository and then cloning it to your local system using Git. It covers cloning into a specific folder or the current directory.

```Shell
# clone inside `my-project` folder
git clone https://github.com/username/template-repo.git my-project
# or clone in the same directory
git clone https://github.com/username/template-repo.git .
```

--------------------------------

### Initialize TailwindCSS Configuration and PostCSS files

Source: https://docs.web3templates.com/tailwindcss/install-tailwindcss

This command initializes TailwindCSS, creating the `tailwind.config.js` and `postcss.config.js` files necessary for its configuration.

```shell
npx tailwindcss init -p
```

--------------------------------

### Clone Astro Template from GitHub

Source: https://docs.web3templates.com/docs/astro/installation-astro

Instructions for cloning an Astro template repository from GitHub. This involves forking the repository and then cloning it to your local system using Git. It covers cloning into a specific folder or the current directory.

```Shell
# clone inside `my-project` folder
git clone https://github.com/username/template-repo.git my-project
# or clone in the same directory
git clone https://github.com/username/template-repo.git .
```

--------------------------------

### Initialize TailwindCSS config and CSS files

Source: https://docs.web3templates.com/docs/tailwindcss/install-tailwindcss

This command initializes TailwindCSS in your project, creating the necessary configuration files like `tailwind.config.js` and `postcss.config.js`.

```bash
npx tailwindcss init -p
```

--------------------------------

### React Widget Example

Source: https://docs.web3templates.com/customizations/typography

A basic React widget example demonstrating how to render an application. This snippet is written in JavaScript and is suitable for inclusion in documentation.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import './styles.css';

ReactDOM.render(<div><App /></div>, document.getElementById('root'));
```

--------------------------------

### Create TailwindCSS base CSS file

Source: https://docs.web3templates.com/docs/tailwindcss/install-tailwindcss

This code snippet demonstrates the essential directives needed in your main CSS file to enable TailwindCSS's base, component, and utility styles.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### React Widget Example

Source: https://docs.web3templates.com/docs/customizations/typography

A basic React widget example demonstrating how to render an application. This snippet is written in JavaScript and is suitable for inclusion in documentation.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import './styles.css';

ReactDOM.render(<div><App /></div>, document.getElementById('root'));
```

--------------------------------

### Sanity CMS Environment Variables (Next.js)

Source: https://docs.web3templates.com/docs/sanity/Installation-sanity

Configuration for Sanity CMS project ID in a Next.js application. This involves setting environment variables in the root .env.local file and optionally in the studio's .env.development or sanity.json file.

```bash
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
```

```bash
# .env.development
SANITY_STUDIO_API_PROJECT_ID=xxyyzz
SANITY_STUDIO_API_DATASET=production
```

```json
// sanity.json
  // ...
  "api": {
    "projectId": "xxyyzz",
    "dataset": "production"
  },
  // ...
```

--------------------------------

### Sanity CMS Environment Variables (Next.js)

Source: https://docs.web3templates.com/sanity/Installation-sanity

Configuration for Sanity CMS project ID in a Next.js application. This involves setting environment variables in the root .env.local file and optionally in the studio's .env.development or sanity.json file.

```bash
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
```

```bash
# .env.development
SANITY_STUDIO_API_PROJECT_ID=xxyyzz
SANITY_STUDIO_API_DATASET=production
```

```json
// sanity.json
  // ...
  "api": {
    "projectId": "xxyyzz",
    "dataset": "production"
  },
  // ...
```

--------------------------------

### Default Tailwind CSS Configuration

Source: https://docs.web3templates.com/docs/tailwindcss/configure-tailwindcss

This snippet shows the default structure of the `tailwind.config.js` file after installation. It includes basic settings for content, theme, and plugins, serving as a starting point for customization.

```javascript
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

--------------------------------

### Install TailwindCSS using npm or yarn

Source: https://docs.web3templates.com/tailwindcss/install-tailwindcss

This snippet shows the commands to install TailwindCSS as a development dependency in your project using either npm or yarn.

```shell
npm install -D tailwindcss
```

```shell
yarn add tailwindcss
```

--------------------------------

### Install TailwindCSS with npm or yarn

Source: https://docs.web3templates.com/docs/tailwindcss/install-tailwindcss

This snippet shows how to install TailwindCSS as a development dependency in your project using either npm or yarn package managers.

```bash
npm install -D tailwindcss
```

```bash
yarn add tailwindcss
```

--------------------------------

### Import Data to Sanity Studio

Source: https://docs.web3templates.com/configure-sanity

This snippet demonstrates how to import demo content into your Sanity Studio using the Sanity CLI. Ensure you have downloaded the demo content and placed the `production.tar.gz` file in the `yourProject/studio` directory. This step is crucial for the front-end to function correctly.

```shell
cd studio
sanity dataset import production.tar.gz production
```

--------------------------------

### Import Data to Sanity Studio

Source: https://docs.web3templates.com/docs/sanity/configure-sanity

This snippet demonstrates how to import demo content into your Sanity Studio using the Sanity CLI. Ensure you have downloaded the demo content and placed the `production.tar.gz` file in the `yourProject/studio` directory. This step is crucial for the front-end to function correctly.

```shell
cd studio
sanity dataset import production.tar.gz production
```

--------------------------------

### Import Data to Sanity Studio

Source: https://docs.web3templates.com/sanity/configure-sanity

This snippet demonstrates how to import demo content into your Sanity Studio using the Sanity CLI. Ensure you have downloaded the demo content and placed the `production.tar.gz` file in the `yourProject/studio` directory. This step is crucial for the front-end to function correctly.

```shell
cd studio
sanity dataset import production.tar.gz production
```
Tokens:
Raw