Skip to content

Commit

Permalink
Add a Makeswift example (#38018)
Browse files Browse the repository at this point in the history
  • Loading branch information
apledger authored Jun 29, 2022
1 parent 55769e2 commit 90deca9
Show file tree
Hide file tree
Showing 12 changed files with 195 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/advanced-features/preview-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ description: Next.js has the preview mode for statically generated pages. You ca
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app//">Demo</a>)</li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco-heartcore">Umbraco Heartcore Example</a> (<a href="https://next-blog-umbraco-heartcore.vercel.app/">Demo</a>)</li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-plasmic">Plasmic Example</a> (<a href="https://nextjs-plasmic-example.vercel.app/">Demo</a>)</li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift">Makeswift Example</a> (<a href="https://nextjs-makeswift-example.vercel.app/">Demo</a>)</li>
</ul>
</details>

Expand Down
2 changes: 2 additions & 0 deletions examples/cms-makeswift/.env.local.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
MAKESWIFT_API_HOST=https://api.makeswift.com
MAKESWIFT_SITE_API_KEY=
38 changes: 38 additions & 0 deletions examples/cms-makeswift/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel

# typescript
*.tsbuildinfo
74 changes: 74 additions & 0 deletions examples/cms-makeswift/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# A statically generated landing page with Next.js and Makeswift

This example showcases how you can use [Makeswift](https://www.makeswift.com/) to visually build statically generated pages in Next.js.

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift&project-name=cms-makeswift&repository-name=cms-makeswift)

## Demo

### [https://nextjs-makeswift-example.vercel.app/](https://nextjs-makeswift-example.vercel.app/)

## How to use

1. Download the example:

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example cms-makeswift cms-makeswift-app
# or
yarn create next-app --example cms-makeswift cms-makeswift-app
# or
pnpm create next-app --example cms-makeswift cms-makeswift-app
```

2. Install dependencies:

```bash
yarn install
# or
npm install
# or
pnpm install
```

3. Rename the `.env.local.example` file to `.env.local` and include your Makeswift site's API key:

```diff
-- MAKESWIFT_API_HOST=
-- MAKESWIFT_SITE_API_KEY=
++ MAKESWIFT_API_HOST=https://api.makeswift.com
++ MAKESWIFT_SITE_API_KEY=<YOUR_MAKESWIFT_SITE_API_KEY>
```

4. Run the local dev script:

```bash
yarn dev
# or
npm run dev
```

Your host should be up and running on http://localhost:3000.

5. Finally, go to your Makeswift site settings and add http://localhost:3000/makeswift as the host URL and you're all set!

## Deploy it

When you're ready to go live, deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). All you'll need to do is update your host inside of Makeswift to your Vercel deployment.

## Next steps

With Makeswift, you can give your marketing team custom building blocks to create high quality Next.js pages.

To learn more about Makeswift, take a look at the following resources:

- [Makeswift Website](https://www.makeswift.com/)
- [Makeswift Documentation](https://www.makeswift.com/docs/)
- [Makeswift Discord Community](https://discord.gg/dGNdF3Uzfz)

You can check out [the Makeswift GitHub repository](https://github.com/makeswift/makeswift) - your feedback and contributions are welcome!
16 changes: 16 additions & 0 deletions examples/cms-makeswift/lib/makeswift/register-components.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Style } from '@makeswift/runtime/controls'
import { ReactRuntime } from '@makeswift/runtime/react'

// Register your components here!

function HelloWorld(props: { className?: string }) {
return <p {...props}>Hello, world!</p>
}

ReactRuntime.registerComponent(HelloWorld, {
type: 'hello-world',
label: 'Hello, world!',
props: {
className: Style({ properties: Style.All }),
},
})
5 changes: 5 additions & 0 deletions examples/cms-makeswift/next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
9 changes: 9 additions & 0 deletions examples/cms-makeswift/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ['s.mkswft.com'],
},
}

module.exports = nextConfig
19 changes: 19 additions & 0 deletions examples/cms-makeswift/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@makeswift/runtime": "0.0.21",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "17.0.41",
"@types/react": "18.0.12",
"typescript": "4.7.3"
}
}
7 changes: 7 additions & 0 deletions examples/cms-makeswift/pages/[[...path]].ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import '../lib/makeswift/register-components'

export {
getStaticPaths,
getStaticProps,
Page as default,
} from '@makeswift/runtime/next'
1 change: 1 addition & 0 deletions examples/cms-makeswift/pages/_document.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Document as default } from '@makeswift/runtime/next'
3 changes: 3 additions & 0 deletions examples/cms-makeswift/pages/makeswift.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import '../lib/makeswift/register-components'

export { getServerSideProps, Page as default } from '@makeswift/runtime/next'
20 changes: 20 additions & 0 deletions examples/cms-makeswift/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

0 comments on commit 90deca9

Please sign in to comment.