Getting started

Create project#

We recommend creating a new Flayyer app using create-flayyer-app, which sets up everything automatically for you. To start a project follow the steps below.

Using Yarn will create a folder called my-project in your current directory:

Terminal.app
yarn create flayyer-app my-project

You will be prompted with multiple starting setups. You can choose the one that suites best for you.

? Select the best template setup for you โ€ฆ You can customize the template later
react
react-styled-components
react-typescript-styled-components
react-typescript-tailwind
vue
vue-typescript

Your first template#

CLI

For more details about the available commands refer to Command-Line Interface.

Create (if you don't have) a file with the desired name of your template in a directory called templates. Every project created with create-flayyer-app starts with a file named templates/main.js, template/main.tsx, or template/main.vue.

Let's take https://github.com/flayyer/create-flayyer-app/tree/master/templates/react as example

PROJECT-NAME/
โ”‚ ...
โ”œโ”€โ”€ templates/
โ”‚ โ””โ”€โ”€ main.js
templates/main.js
import React from "react";
import background from "../static/background.jpg";
import logo from "../static/logo.svg";
import "./styles.css"
// Make sure to 'export default' a React component
export default function MainTemplate({ variables }) {
const { title = "Hello world!", img = background, description, } = variables;
return (
<div>
<div className="layer background" style={{ backgroundImage: `url("${img}")` }} />
<div className="layer fade" />
<div className="layer content">
<img className="logo" src={logo} />
<h1 className="title">
{title}
</h1>
{description && (
<span className="description">
{description}
</span>
)}
</div>
</div>
);
}

Start the development server with:

Terminal.app
yarn start
caution

Please use Google Chrome, Firefox or Opera. Safari is not widely supported.

This command starts a development server using Parcel.js. Then open Flayyer Studio in your browser for a better developer experience.

Flayyer Studio screenshot

Deploy#

Work on your template, try changing the variables and when you are ready, run:

Terminal.app
yarn build

To upload the final bundled templates to our cloud you must have an API Key.

Click here to manage your keys ๐Ÿ”‘

When you are ready to deploy, run:

Terminal.app
yarn run deploy

If everything is correct, you should see an output with your templates' URLs.

๐Ÿ–ผ Created template with URL: https://flayyer.io/v2/company/deck/template.jpeg

Congratulations! You deployed your first Flayyer project! ๐ŸŽ‰

cat on a rocket

Continue reading this documentation to understand more about Flayyer and what other amazing features we support.