This is a Next.js project bootstrapped with create-next-app.

Getting Started

Installing dependencies:

npm i

To start development you need two terminals:

1. One to start Next.js app

npm run dev

2. Second for Cloudflare functions:

npm run cf-dev-http

Open http://localhost:3000 with your browser to see the result.

Testing:

Before perofrmign visual regrerssion test, build a storybook with: npm run build-storybook

All tests are run with: npm run test

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

#SSL

For local development add SSL certificate(you will get issue in the browser regarding insecure connection):

sudo security add-trusted-cert -d -r trustRoot -k "/Library/Keychains/System.keychain" certificates/localhost.crt

To generate certificate on MacOS run

openssl req -x509 -out localhost.crt -keyout localhost.key \
 -newkey rsa:2048 -nodes -sha256 \
 -subj '/CN=localhost' -extensions EXT -config <( \
 printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

and move output files to certificates folder. You might need to close the browser application and reopen to refresh ssl certificates.

#D1 To preview current schema:

npx wrangler d1 execute preview --local --command="SELECT name, sql FROM sqlite_master"

Preview is used by everything except the local and prod env, so develop and all other branches.

to test: npx wrangler d1 execute production --local --command="SELECT * FROM users"

##Migrations to start: npx wrangler d1 migrations create visual-editor-preview <migration brief description>

to apply:

npx wrangler d1 migrations apply <DATABASE_NAME> [OPTIONS]

npx wrangler d1 migrations apply visual-editor-preview --local

npx wrangler d1 migrations apply visual-editor-preview --remote

npx wrangler d1 migrations apply visual-editor-production --remote --env=production

To erase local D1 (you have to apply migrations after that):

rm -rf .wrangler/state/v3/d1

##CF R2

wrangler r2 bucket create your-bucket-name

url to test upload:

curl --request PUT "<URL>" --header "Content-Type: text/plain" --header "Content-Length: 10" --data "nagvsudXgvakgabdgdkfaxsuieg"

Templates

To create a template, you can simply open the frontend in browser and run the following code in browser console:

fetch('/api/templates/{project-id}', {
  method: 'POST',
  body: JSON.stringify({ name: 'First template!', previewShape: 'SQUARE' }),
})