### Set Up Development Environment Variables
Source: https://docs.shipany.ai/en
This command copies the example environment variable file to be used for local development. You will need to configure this file with your specific settings.
```bash
cp .env.example .env.development
```
--------------------------------
### Set Up Development Environment Variables
Source: https://docs.shipany.ai/index
This command copies the example environment variable file to a new file named '.env.development'. This file will contain local development specific configurations for the ShipAny project.
```bash
cp .env.example .env.development
```
--------------------------------
### Install Project Dependencies with pnpm
Source: https://docs.shipany.ai/index
This command installs all the necessary project dependencies for ShipAny using the pnpm package manager. Ensure you have pnpm installed globally before running this command.
```bash
pnpm install
```
--------------------------------
### Start ShipAny Development Server
Source: https://docs.shipany.ai/index
This command starts the Next.js development server for the ShipAny project. It allows you to preview your changes locally and debug the application in real-time.
```bash
pnpm dev
```
--------------------------------
### Install Project Dependencies with pnpm
Source: https://docs.shipany.ai/en
This command installs all necessary project dependencies using the pnpm package manager. Make sure pnpm is installed globally.
```bash
pnpm install
```
--------------------------------
### Start ShipAny Development Server
Source: https://docs.shipany.ai/en
This command starts the Next.js development server, allowing you to preview and debug your project locally. The project will typically be available at http://localhost:3000.
```bash
pnpm dev
```
--------------------------------
### Generate Landing Page Content with AI
Source: https://docs.shipany.ai/index
This example demonstrates how to use AI to generate new landing page content. It provides a prompt example for creating content for a product named 'Flux AI Image Generator' and references a URL.
```json
{
"productName": "Flux AI Image Generator",
"tagline": "Generate stunning images with AI.",
"description": "Flux AI Image Generator is a powerful tool that uses artificial intelligence to create unique and high-quality images from text prompts.",
"features": [
"Text-to-image generation",
"High-resolution output",
"Customizable styles",
"Easy to use interface"
],
"callToAction": {
"text": "Try Flux AI Now",
"url": "https://www.flux.ai/"
}
}
```
--------------------------------
### Clone ShipAny Project Code
Source: https://docs.shipany.ai/en
This snippet shows how to clone the ShipAny project repository using Git. Ensure you have Git installed and access to the ShipAny GitHub repository.
```bash
git clone git@github.com:shipanyai/shipany-template-one.git my-shipany-project
```
--------------------------------
### Submit Project Code to GitHub
Source: https://docs.shipany.ai/en
This code block demonstrates the Git commands required to set the remote origin for a GitHub repository, stage all changes, commit them with a message, and push to the main branch.
```shell
git remote set-url origin https://github.com/your-username/your-project-name.git
git add .
git commit -m "update landing page"
git push origin main
```
--------------------------------
### Check Git Version
Source: https://docs.shipany.ai/en/guide/good-to-know
This snippet displays how to check the installed version of Git, which is required for version control and accessing Github repositories. It also shows an example output for Git on macOS.
```bash
$ git --version
git version 2.39.3 (Apple Git-146)
```
--------------------------------
### Submit Project Code to GitHub
Source: https://docs.shipany.ai/index
Provides Git commands to update the remote repository URL, stage changes, commit them with a message, and push to the main branch.
```shell
git remote set-url origin https://github.com/your-username/your-project-name.git
git add .
git commit -m "update landing page"
git push origin main
```
--------------------------------
### Install NodeJS and npm
Source: https://docs.shipany.ai/en/guide/good-to-know
This snippet shows how to check the installed versions of NodeJS and npm, which are essential for running the ShipAny framework. It displays the expected output for these commands.
```bash
$ node -v
v22.2.0
$ npm -v
10.7.0
```
--------------------------------
### Update Website Localization Text
Source: https://docs.shipany.ai/index
Guides users on how to update website localization files, specifically `en.json`, using AI prompts to generate new content based on project details and keywords.
```json
{
"project": "Flux AI",
"keywords": "flux ai, ai image generator"
}
```
--------------------------------
### Clone ShipAny Project Code
Source: https://docs.shipany.ai/index
This snippet shows how to clone the ShipAny project repository using Git. It assumes you have SSH access configured with GitHub. This is the first step in setting up the project locally.
```bash
git clone git@github.com:shipanyai/shipany-template-one.git my-shipany-project
```
--------------------------------
### Navigate to Project Directory
Source: https://docs.shipany.ai/en
This command changes the current directory to the root of the cloned ShipAny project.
```bash
cd my-shipany-project
```
--------------------------------
### Update Website Localization Text
Source: https://docs.shipany.ai/en
Guides users on how to update website localization files, specifically `en.json`, using AI prompts to generate new content based on project details and keywords.
```json
{
"project": "Flux AI",
"keywords": "flux ai, ai image generator"
}
```
--------------------------------
### Configure AWS S3 Storage
Source: https://docs.shipany.ai/index
Sets up environment variables for AWS S3 storage integration. Requires AWS credentials, region, bucket name, and optionally an endpoint and domain.
```python
STORAGE_ENDPOINT = ""
STORAGE_REGION = ""
STORAGE_ACCESS_KEY = ""
STORAGE_SECRET_KEY = ""
STORAGE_BUCKET = ""
STORAGE_DOMAIN = ""
```
--------------------------------
### Create Production Environment File
Source: https://docs.shipany.ai/deploy/deploy-to-cloudflare
Copy the example environment file to create a production-specific configuration. This file should contain your production environment settings.
```bash
cp .env.example .env.production
```
--------------------------------
### Create Production Environment File
Source: https://docs.shipany.ai/en/deploy/deploy-to-cloudflare
Copy the example environment file to create a production-specific configuration. This file should contain your production environment settings.
```bash
cp .env.example .env.production
```
--------------------------------
### Environment Configuration Variables (.env)
Source: https://docs.shipany.ai/index
Defines essential environment variables for both development and production, covering web information, database connection, authentication providers (Google, GitHub), analytics services, payment gateway keys, and locale settings.
```env
# -----------------------------------------------------------------------------
# Web Information
# -----------------------------------------------------------------------------
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"
NEXT_PUBLIC_PROJECT_NAME = "ShipAny"
# -----------------------------------------------------------------------------
# Database with Supabase
# -----------------------------------------------------------------------------
# https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
# Set your Supabase DATABASE_URL
DATABASE_URL = ""
# -----------------------------------------------------------------------------
# Auth with next-auth
# https://authjs.dev/getting-started/installation?framework=Next.js
# Set your Auth URL and Secret
# Secret can be generated with `openssl rand -base64 32`
# -----------------------------------------------------------------------------
AUTH_SECRET = "Zt3BXVudzzRq2R2WBqhwRy1dNMq48Gg9zKAYq7YwSL0="
AUTH_URL = "http://localhost:3000/api/auth"
AUTH_TRUST_HOST = true
# Google Auth
# https://authjs.dev/getting-started/providers/google
AUTH_GOOGLE_ID = ""
AUTH_GOOGLE_SECRET = ""
NEXT_PUBLIC_AUTH_GOOGLE_ID = ""
NEXT_PUBLIC_AUTH_GOOGLE_ENABLED = "false"
NEXT_PUBLIC_AUTH_GOOGLE_ONE_TAP_ENABLED = "false"
# Github Auth
# https://authjs.dev/getting-started/providers/github
AUTH_GITHUB_ID = ""
AUTH_GITHUB_SECRET = ""
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "false"
# -----------------------------------------------------------------------------
# Analytics with Google Analytics
# https://analytics.google.com
# -----------------------------------------------------------------------------
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = ""
# -----------------------------------------------------------------------------
# Analytics with OpenPanel
# https://openpanel.dev
# -----------------------------------------------------------------------------
NEXT_PUBLIC_OPENPANEL_CLIENT_ID = ""
# Analytics with Plausible
# https://plausible.io/
NEXT_PUBLIC_PLAUSIBLE_DOMAIN = ""
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL = ""
# -----------------------------------------------------------------------------
# Payment with Stripe
# https://docs.stripe.com/keys
# -----------------------------------------------------------------------------
STRIPE_PUBLIC_KEY = ""
STRIPE_PRIVATE_KEY = ""
STRIPE_WEBHOOK_SECRET = ""
NEXT_PUBLIC_PAY_SUCCESS_URL = "http://localhost:3000/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "http://localhost:3000/#pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "http://localhost:3000/#pricing"
NEXT_PUBLIC_LOCALE_DETECTION = "false"
ADMIN_EMAILS = ""
NEXT_PUBLIC_DEFAULT_THEME = "light"
```
--------------------------------
### Install pnpm Package Manager
Source: https://docs.shipany.ai/en/guide/good-to-know
This snippet demonstrates how to install the pnpm package manager globally using npm. pnpm is recommended for managing packages within the ShipAny project.
```bash
$ npm install -g pnpm
```
--------------------------------
### Environment Configuration Variables (.env)
Source: https://docs.shipany.ai/en
Defines essential environment variables for both development and production, covering web information, database connection, authentication providers (Google, GitHub), analytics services, payment gateway keys, and locale settings.
```env
# -----------------------------------------------------------------------------
# Web Information
# -----------------------------------------------------------------------------
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"
NEXT_PUBLIC_PROJECT_NAME = "ShipAny"
# -----------------------------------------------------------------------------
# Database with Supabase
# -----------------------------------------------------------------------------
# https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
# Set your Supabase DATABASE_URL
DATABASE_URL = ""
# -----------------------------------------------------------------------------
# Auth with next-auth
# https://authjs.dev/getting-started/installation?framework=Next.js
# Set your Auth URL and Secret
# Secret can be generated with `openssl rand -base64 32`
# -----------------------------------------------------------------------------
AUTH_SECRET = "Zt3BXVudzzRq2R2WBqhwRy1dNMq48Gg9zKAYq7YwSL0="
AUTH_URL = "http://localhost:3000/api/auth"
AUTH_TRUST_HOST = true
# Google Auth
# https://authjs.dev/getting-started/providers/google
AUTH_GOOGLE_ID = ""
AUTH_GOOGLE_SECRET = ""
NEXT_PUBLIC_AUTH_GOOGLE_ID = ""
NEXT_PUBLIC_AUTH_GOOGLE_ENABLED = "false"
NEXT_PUBLIC_AUTH_GOOGLE_ONE_TAP_ENABLED = "false"
# Github Auth
# https://authjs.dev/getting-started/providers/github
AUTH_GITHUB_ID = ""
AUTH_GITHUB_SECRET = ""
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "false"
# -----------------------------------------------------------------------------
# Analytics with Google Analytics
# https://analytics.google.com
# -----------------------------------------------------------------------------
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = ""
# -----------------------------------------------------------------------------
# Analytics with OpenPanel
# https://openpanel.dev
# -----------------------------------------------------------------------------
NEXT_PUBLIC_OPENPANEL_CLIENT_ID = ""
# Analytics with Plausible
# https://plausible.io/
NEXT_PUBLIC_PLAUSIBLE_DOMAIN = ""
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL = ""
# -----------------------------------------------------------------------------
# Payment with Stripe
# https://docs.stripe.com/keys
# -----------------------------------------------------------------------------
STRIPE_PUBLIC_KEY = ""
STRIPE_PRIVATE_KEY = ""
STRIPE_WEBHOOK_SECRET = ""
NEXT_PUBLIC_PAY_SUCCESS_URL = "http://localhost:3000/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "http://localhost:3000/#pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "http://localhost:3000/#pricing"
NEXT_PUBLIC_LOCALE_DETECTION = "false"
ADMIN_EMAILS = ""
NEXT_PUBLIC_DEFAULT_THEME = "light"
```
--------------------------------
### Configure Robots.txt
Source: https://docs.shipany.ai/en/features/seo
Example configuration for the public/robots.txt file, specifying user-agent directives and disallowed paths.
```text
User-agent: *
Disallow: /*?*q=
Disallow: /privacy-policy
Disallow: /terms-of-service
```
--------------------------------
### Configure Github Login
Source: https://docs.shipany.ai/features/oauth
Guides through setting up Github Login by creating an OAuth app on Github, obtaining Client ID and Secret, and updating environment variables such as AUTH_GITHUB_ID, AUTH_GITHUB_SECRET, and NEXT_PUBLIC_AUTH_GITHUB_ENABLED.
```env
AUTH_GITHUB_ID = "xxx"
AUTH_GITHUB_SECRET = "xxx"
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "true"
```
--------------------------------
### Generate Terms of Service
Source: https://docs.shipany.ai/en
Details the process of generating new terms of service using AI, incorporating landing page content and essential business information such as brand name, domain, and contact email.
```en
update terms-of-service according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "support@shipany.ai"
```
--------------------------------
### Generate Terms of Service
Source: https://docs.shipany.ai/index
Details the process of generating new terms of service using AI, incorporating landing page content and essential business information such as brand name, domain, and contact email.
```en
update terms-of-service according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "support@shipany.ai"
```
--------------------------------
### Customize ShipAny Theme Styles
Source: https://docs.shipany.ai/index
This instruction explains how to customize the website's color scheme by pasting theme styles into the 'src/app/theme.css' file. It mentions using shadcn themes and tailwindcss for styling.
```css
/* Paste theme styles here */
/* Example:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 210 40% 9.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 9.8%;
--border: 209 60% 90%;
--input: 209 60% 90%;
--ring: 210 40% 9.8%;
--radius: 0.5rem;
}
*/
```
--------------------------------
### Configure Github Login
Source: https://docs.shipany.ai/en/features/oauth
Guides through setting up Github Login by creating an OAuth app on Github, obtaining Client ID and Secret, and updating environment variables such as AUTH_GITHUB_ID, AUTH_GITHUB_SECRET, and NEXT_PUBLIC_AUTH_GITHUB_ENABLED.
```env
AUTH_GITHUB_ID = "xxx"
AUTH_GITHUB_SECRET = "xxx"
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "true"
```
--------------------------------
### Check pnpm Version
Source: https://docs.shipany.ai/en/guide/good-to-know
This snippet shows how to check the installed version of the pnpm package manager. A specific version is recommended for compatibility with ShipAny.
```bash
$ pnpm -v
9.15.0
```
--------------------------------
### Start ngrok Service
Source: https://docs.shipany.ai/en/features/payment/stripe
Starts the ngrok service to listen to a local port and generate a temporary domain for testing webhook notifications.
```bash
ngrok http http://localhost:3000
```
--------------------------------
### Create Wrangler Configuration File
Source: https://docs.shipany.ai/en/deploy/deploy-to-cloudflare
Copy the example wrangler.toml file to configure your Cloudflare deployment. Ensure production environment variables from .env.production are included in the [vars] section and update the project name.
```bash
cp wrangler.toml.example wrangler.toml
```
--------------------------------
### Create Wrangler Configuration File
Source: https://docs.shipany.ai/deploy/deploy-to-cloudflare
Copy the example wrangler.toml file to configure your Cloudflare deployment. Ensure production environment variables from .env.production are included in the [vars] section and update the project name.
```bash
cp wrangler.toml.example wrangler.toml
```
--------------------------------
### Configure Sitemap XML
Source: https://docs.shipany.ai/en/features/seo
Example configuration for the public/sitemap.xml file, defining the site's URL and last modification date.
```xml
Hello from ShipAny.
", }); console.log("send email result", result); ``` -------------------------------- ### Generate Text with OpenAI Models Source: https://docs.shipany.ai/en/ai-integrations/chat-completions Demonstrates generating text using OpenAI models like GPT-4o via the ShipAny SDK. It includes setting up the model and handling the response. ```typescript import { generateText } from "ai"; import { openai } from "@ai-sdk/openai"; const prompt = "who are you?"; const model = "gpt-4o"; const textModel = openai(model); const { text, warnings } = await generateText({ model: textModel, prompt: prompt, }); if (warnings && warnings.length > 0) { throw new Error("gen text failed"); } console.log("gen text ok:", text); ``` -------------------------------- ### Install React Email and Resend Source: https://docs.shipany.ai/en/features/email/resend Installs the necessary React Email component library and Resend for email sending using pnpm. ```bash pnpm add resend @react-email/components ``` -------------------------------- ### Deploy to Vercel Source: https://docs.shipany.ai/en/deploy/deploy-to-vercel This section details the process of deploying a project to Vercel. It involves committing code to GitHub, creating a project in Vercel, and configuring environment variables for production. ```Shell 1. First, develop your project locally and commit the code to a private Github repository. 2. Create a new project in the Vercel console, import the code repository, and deploy with one click 3. Once the build is complete, you can see your project in the Vercel console 4. Open the domain to access your project > You can also add a custom domain in the Vercel console 5. Modify environment variables > First, edit the content of `.env.production` locally, fill in the production environment configuration, then copy and paste it into Vercel’s environment variables. The next time you push code, it will automatically redeploy with the new environment variables ``` -------------------------------- ### AI Prompt for Landing Page Content Generation (Cursor) Source: https://docs.shipany.ai/en/tutorials/customize-landing-page An example prompt to be used with the AI editor Cursor to generate new landing page content. It specifies the product name and provides a URL for content reference. ```text I want to build a landing page for my product named "Flux AI Image Generator", please update the landing page json file, content reference @Web @https://www.flux.ai/ ``` -------------------------------- ### Set Up Kling AI Environment Variables Source: https://docs.shipany.ai/en/ai-integrations/video-generation Configure environment variables for Kling AI access by setting KLING_ACCESS_KEY and KLING_SECRET_KEY. This is a prerequisite for using Kling AI's video generation services. ```env KLING_ACCESS_KEY = "xxx" KLING_SECRET_KEY = "xxx" ```