Scully Starter - Recipes

This is a Scully starter project for a recipes website. It's configured to pull recipes data from Flotiq and can be easily deployed to your cloud hosting - Heroku, Netlify, etc.

Live Demo: https://vibrant-mclean-8da635.netlify.app/

Screenshot

This project was generated with Angular CLI version 11.0.2.

Quick start

Clone project

git clone https://github.com/flotiq/scully-recipes-starter

Setup "Recipe" Content Type in Flotiq

Create your Flotiq.com account. Next, create the Recipe Content Type:

Note: You can also create Recipe using Flotiq REST API.
Configure application

The next step is to configure our application to know from where it has to fetch the data.

In src/environments/environment.prod.ts and in src/environments/environment.js change YOUR_FLOTIQ_API_KEY to Read only Flotiq API key.

Remember to change them back to YOUR_FLOTIQ_API_KEY before committing code to repository.
Start developing
```
    cd scully-recipes-starter/
    npm install
```
If you wish to import example recipes to your account install flotiq-cli, and run in project directory:
```
    flotiq import . [flotiqApiKey]
```
It will add 4 images and 2 recipes to your Flotiq account.

Note: You need to put your Read and write API key as the flotiqApiKey for import to work. You don't need the Recipe content type in your account. If you already have recipes with ids recipe-1, recipe-2 they will be overwritten.

Run ng run start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

If you wish to add new elements to the project run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run npm run build:prod to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

To build the static version with Scully run:
```
npm run build --prod
npm run scully -- --scanRoutes
npm run scully serve
```
This will start the Scully static server on http://localhost:1668/
Manage your recipes using Flotiq editor

You can now easily manage your recipes using Flotiq editor
Update Flotiq Angular SDK when you create or update Type Definition

Everytime you change something in your Content Type Definitions, you have to regenerate Flotiq Angular Package inside project.
1. Go to your dashboard in Flotiq, and click on Angular icon in "Your API packages" section, to download an SDK with the updated content of your schema.
2. Extract downloaded zip in flotiq directory in the project.
3. Done, you have updated Flotiq Angular SDK in your project!