WebStudio Community

https://github.com/webstudio-is/webstudio-community.git
Admin
Webstudio is an open-source visual development platform for developers and designers, offering...
Tokens:67,312
Snippets:101
Trust Score:9.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run Webstudio Development Server

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/contributing/contributing-for-developers.md

Instructions to start the development server using `pnpm dev` after setting up the VS Code Dev Container. This command initiates the application build and serves it locally, providing a URL to access the application in the browser.

```sh
pnpm dev

```

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

### Install Node.js using NVM

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/cli.md

Installs Node Version Manager (NVM) and then installs Node.js version 20 or greater. NVM is a prerequisite for using the Webstudio CLI.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install 20
node --version
```

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

### Post-Build Steps for JavaScript App

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/cli.md

Details the steps required after building a JavaScript application. This includes installing dependencies and running the development server or building for production.

```bash
npm install
npm run dev
npm run build
```

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

### Install and Verify Webstudio CLI

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/cli.md

Installs the Webstudio CLI globally using npm and verifies the installation by checking the CLI version. This command makes the webstudio command available in your terminal.

```bash
npm install -g webstudio
webstudio --version
```

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

### GitHub OAuth App Setup and Environment Variables

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/contributing/contributing-for-developers.md

Details the required settings for creating a GitHub OAuth application and the corresponding environment variables needed for Webstudio integration. Ensure the Homepage URL and Callback URL match your application's base URL for successful authentication.

```env
Name: Webstudio
Homepage URL: http://localhost:3000
Authorization callback URL: http://localhost:3000/auth/github/callback
```

```env
GH_CLIENT_SECRET=
GH_CLIENT_ID=
```

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

### Deploy Webstudio App to Netlify CLI

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/netlify.md

This command initiates the deployment process for a Webstudio project to Netlify using the Netlify CLI. It assumes the project is configured for Netlify deployment.

```bash
netlify deploy
```

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

### Deploy JavaScript App to Vercel using Vercel CLI

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/vercel.md

This command deploys a JavaScript application built with Webstudio to Vercel. It requires the Webstudio CLI to be installed and the project to be built locally. The command initiates the deployment process, guiding the user through configuration if necessary.

```Shell
vercel deploy
```

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

### Resource Query Example

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/foundations/cms.md

Fetch specific data from a CMS based on URL parameters. This example shows how to query for posts using a slug parameter from the URL.

```Webstudio Syntax
posts(slug: system.params.slug)
```

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

### Initiate and Link Webstudio Project

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/cli.md

Starts a Webstudio Project locally and links it to your Webstudio Cloud project. The `link` command prompts for a shareable link generated from your Webstudio Cloud project, requiring Build access.

```bash
webstudio
webstudio link
```

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

### Build Webstudio for Netlify Serverless

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/netlify.md

This command builds a Webstudio project specifically for Netlify, targeting serverless functions. It's used to configure the build output for Netlify's serverless environment.

```bash
webstudio build --template netlify
```

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

### Run Local Static Server

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/README.md

This command starts a simple local server to host static files. It is required for static site exports because the files use absolute URLs, necessitating a server environment for correct rendering.

```bash
npx serve .
```

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

### Webstudio Dynamic Page Path

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/integrations/notion.md

Defines a dynamic path for a page in Webstudio, allowing content to be fetched based on URL parameters. This example sets up a path for individual event records.

```APIDOC
Dynamic Page Configuration:
  Path: /events/:slug
  Description:
    - The first segment 'events' describes the record type.
    - The second segment ':slug' is a dynamic parameter that will be used to fetch a specific record from the Notion database.
  Usage:
    - This path allows URLs like /events/birthday or /events/conference-2023.
    - The value of ':slug' is used to query the Notion API for the corresponding database entry.
```

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

### Basic Hygraph Posts Query

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/integrations/hygraph.md

This GraphQL query retrieves basic post information, specifically the 'title' and 'slug' fields, from a Hygraph backend. It serves as a foundational example before implementing advanced features like pagination.

```graphql
query Posts {
  ...
  posts {
    title
    slug
    ...
  }
}
```

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

### Build Webstudio Project

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/cli.md

Builds your Webstudio Project either as a JavaScript application or a static site. The default build creates a dynamic app; use the `--template ssg` flag for static site generation.

```bash
webstudio build
webstudio build --template ssg
```

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

### JSON Data Structure Example

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/foundations/expression-editor.md

An example JSON object illustrating a typical data structure that can be accessed and bound within the Expression Editor. This structure shows nested objects and values.

```json
{
  "title": "Hello World",
  "slug": "hello-world",
  "image": {
    "url": "<https://example.com/image.png>",
    "alt": "I'm an image"
  }
}
```

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

### Data Binding Example

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/foundations/cms.md

Connect CMS data to Webstudio components and fields. This example shows how to bind a 'title' value from a 'CMS Data' resource to a component's text content.

```Webstudio Syntax
CMS Data.title
```

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

### Airtable Fetch Records Curl Command

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/integrations/airtable.md

Example of a curl command to list records from an Airtable base. This command can be pasted into Webstudio to automatically populate resource fields.

```bash
curl -X GET "https://api.airtable.com/v0/YOUR_BASE_ID/YOUR_TABLE_NAME?api_key=YOUR_SECRET_API_TOKEN"
     -H "Authorization: Bearer YOUR_SECRET_API_TOKEN"
```

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

### JavaScript Expression Examples

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/foundations/expression-editor.md

Demonstrates common JavaScript expressions supported by the Expression Editor for data manipulation and conditional logic. Includes ternary operators, template literals, and string concatenation.

```javascript
CMS Data.image ? true : false
```

```javascript
`Updated On ${CMS Data.updatedOn}`
```

```javascript
"Updated on " + CMS Data.updatedOn
```

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

### Webstudio CLI Commands for Docker Build

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/hetzner-coolify.md

Commands to sync project changes and build the project specifically for Docker deployment. These are typically run in a terminal environment.

```cli
webstudio sync
webstudio build --template docker
```

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

### Airtable API FilterByFormula Parameter

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/integrations/airtable.md

Provides an example of how to use the Airtable API's filterByFormula parameter to dynamically filter records. This is crucial for implementing search and filtering functionalities.

```APIDOC
GET https://api.airtable.com/v0/appXXXXXXXXXX/BASE_NAME?filterByFormula=YOUR_FORMULA

Parameters:
  - filterByFormula: A formula string to filter records. For example, `RECORD_ID() = 'rec123'` or `Name = 'Example Name'`.
```

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

### Webstudio Dynamic Page Path Configuration

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/integrations/wordpress.md

Configure a dynamic page in Webstudio to display content based on URL parameters. This example sets up a path for individual blog posts, using a slug extracted from the URL to fetch specific content from WordPress.

```APIDOC
Webstudio Dynamic Page Configuration:
  Path: /blogs/:slug
    - Description: Defines a dynamic route for blog posts.
    - Segments:
      - 'blogs': A static segment identifying the content type.
      - ':slug': A dynamic segment that captures the post's unique identifier (slug) from the URL.
    - Usage: The captured ':slug' value is used to query and display a specific WordPress post.
    - Related: Dynamic Pages are templates that change content based on URL parameters, enabling features like individual post views or category listings.
```

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

### Webstudio Dynamic Page Path Configuration

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/integrations/airtable.md

Defines the structure for dynamic pages in Webstudio, allowing content to change based on URL segments. The example shows a path with a static segment and a dynamic parameter.

```Webstudio
/products/:slug
```

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

### Sync Webstudio Project with Cloud

Source: https://github.com/webstudio-is/webstudio-community.git/blob/main/docs/university/self-hosting/cli.md

Synchronizes your local Webstudio Project with the version published in Webstudio Cloud. Ensure your project is published in the cloud before running this command locally.

```bash
webstudio sync
```
Tokens:
Raw