Getting started
Setup a new Next.js app with Makeswift in ~5 minutes.
AnchorClone the starter project
First, we'll clone the Makeswift
basic-typescript
example.
Copy and paste the snippet of code below to make a local copy and change to the new directory. Feel
free to change the name from my-project
to something else.
npx degit makeswift/makeswift/examples/basic-typescript my-project
cd my-project
AnchorInstall project dependencies
Next, let's install our project's dependencies.
yarn install
# or
npm install
AnchorConfigure the Makeswift site API key
Go to your Makeswift site and get a hold of your site's API key.
Then, create a .env.local
file with the contents below. Replace <your_site_api_key>
with your
site's API key.
MAKESWIFT_SITE_API_KEY=<your_site_api_key>
AnchorRun the local dev script
Run the local development script. This will start the Next.js app at http://localhost:3000
. If
port 3000
is already in use, your app might be assigned a different port.
yarn dev
# or
npm run dev
Take note of the URL provided by Next.js when running this command. We'll use it in the next step.
AnchorAdd your app's preview URL to Makeswift
Finally, you'll just need to add your app's preview URL to your Makeswift site settings. If you
haven't changed anything in the example and it's running on port 3000
, the value should be
http://localhost:3000/makeswift
.
When you're ready to deploy, you'll probably set up a separate site and use your deployment URL
instead of localhost
. You can keep this site for local development.
AnchorStart building!
That's it! You should be able to create a page in Makeswift and start dropping in registered components.
You can register new components in the lib/makeswift/register-components
file.
// lib/makeswift/register-components.tsx
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 }),
},
})
You will find your registered components in the toolbar of the Makeswift builder. Drag and drop your components into your page and start building!
You can learn more about registering components here.