Coder Social home page Coder Social logo

useflyyer / flyyer-official Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 1.0 6.83 MB

Official templates for Flyyer.io | https://flyyer.io/@/flyyer/official

Home Page: https://flyyer.io/@/flyyer/official

TypeScript 77.83% JavaScript 20.67% CSS 1.49%
react og-images twitter-cards typescript image-generation flyyer

flyyer-official's Introduction

๐ŸŒ  Flyyer-Official

Feel free to checkout the latest documentation at docs.flyyer.io ๐Ÿ“–

Development

You can start a development server at http://localhost:7777 with:

npm run start

# Custom port and host
npm run start --port 3000 --host 0.0.0.0

Then preview your template at https://useflyyer.github.io/studio

flyyer-studio screenshot

Deployment

Once you are ready to deploy to production please remember to build the project first:

NODE_ENV=production npm run build

Get your Flyyer key from https://flyyer.io/dashboard/_/settings and set it as an environment variable:

# in your terminal
export FLYYER_KEY=...

Alternatively you can create a .env file:

# .env
FLYYER_KEY=...

Deploy to production

npm run deploy

You can find the live URL for your deck in the terminal output, it is something like: https://cdn.flyyer.io/render/v2/tenant/deck/template.

Usage

Append queryparams to your URLs and we will set those as props when rendering.

Resultant flyyer live image

Resultant flyyer live image

Next steps:

FAQ & Caveats

What is Flyyer studio?

It's a browser app that opens your local server (localhost:7777) in multiple iframes so you can have a better developer experience. It works best on Firefox.

SCSS Support

Sure. Install npm install --save sass and just import your SASS/SCSS files just like: import "/styles.scss".

See: https://docs.flyyer.io/docs/features/styles

Custom fonts

Refer to https://docs.flyyer.io/docs/features/fonts. If you are building a template for the marketplace and want to support on-the-fly fonts you can use: flyyer/use-googlefonts.

Nested directories

This is not implemented yet. Please prefer a flat /templates directory. This means you have to avoid folders inside /templates.

Folders outside /templates is ok ๐Ÿ‘

Development server crashes or stop previewing

The development server (npm run start) can be buggy sometimes. Please restart the server if you encounter any problems.


Default image credits: Photo by Osvaldo Castillo from Pexels

flyyer-official's People

Contributors

dependabot[bot] avatar lopezjurip avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

lopezjurip

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.