Setup

This page describes how you can install StoryTime for Windows, mac or linux

Download

Ignore clone steps if you have downloaded the latest release of StoryTime.

Windows and MacOS users can install StoryTime by going to release page. Click and download the latest version of your operating system. The StoryTime application comes with a in-built server to communicate between the game engine and StoryTime.

App installation

Installation

Your game engine of choice where you can receive JSON from the API.

A Firebase database(free or blaze tier) or an SQL database (PostgreSQL, SQLite or MSSQL).

A web host to communicate with Firebase and return JSON data to your framework/engine.

NPM install

# clone our repo
git clone https://github.com/vamidi/StoryTime.git

# change directory to our repo
cd storytime

# install the repo with npm
npm install

Firebase

• If you don't have a Google account create it.

• If you already have an account go to the Firebase Console. Login and follow the steps to create a new project.

Name of your project

• Fill in the name of your project. Once filled click to continue.

Agree to all terms

These steps are optional, but I would recommend using them if you want to receive analytics for your app.

• Enable Google Analytics for this project if not already enabled and click continue.

• Select an account to use Google Analytics for, if this does not exist create one.

• Once finished click "create project".

Congratulations you've create your first project!

• Once your project is generated, press "continue" to go to the home screen.

• In the top left corner click on settings ⚙️ and click project settings to get your credentials.

• In the General tab when you scroll down you see that you do not have any apps in your project. Click on web app and register your app.

• Fill in the name of your app, you can keep Firebase Hosting unchecked and click register app.

The config that you see will be for your firebase credentials. Keep them safe!

• Once you have registered your app click to continue back to console, and you will see your credentials.

You can also use the credentials from the registration form

Authentication

For StoryTime to work you need users, so we have to add it now to the firebase project.

• Go back to the firebase console, Under the Build category click on authentication.

• Click on Get started to continue to the authentication page.

• In the sign-in methods tab click on email/password and enable it (make sure to save it in order to see the changes).

• Go to the users tab

• Add a new user.

Can be any kind of email as long as it is a valid email. The password can be anything you want

Firebase Database

For StoryTime to work you need to use Firebase realtime database, so we have to add it now to the firebase project.

• Go back to the firebase console, unfold build on the left side panel and click realtime database.

• Click on Create database to continue setting up the database.

Choosing the database that is close to your location might help with the connection to the database

• Choose the location where you want to store your database. You can choose what you prefer, I prefer United States.

• Click next to continue.

Database rules can be changed later!

• For development purposes I recommend choosing test mode, this will give read write access until the timestamp is surpassed (30days).

• Click enable to continue.

• Once the database is created you are set and ready to configure StoryTime.

Configuration

StoryTime uses environment variables to configure firebase automatically. The [.env] file contains all the environment variables used in StoryTime.

the .env should not be deleted or renamed, because the installation depends on this file.

If you are using separate environments make sure you create multiple apps with different firebase credentials and different .env.[YOUR_ENVIRONMENT] files.

• Create a file in the root of the project, name it .env and copy over the content from the .env.example file.

The following table describes the configurable environment variables.

Variables with an asterisk are optional

Variable	Default Value	Description
APP_NAME*	"StoryTime - Dev"	The name of your app
FIREBASE_API_KEY	YOUR_API_KEY	The API key firebase uses to connect to the database.
FIREBASE_AUTH_DOMAIN	YOUR_AUTH_DOMAIN	Firebase auth domain.
FIREBASE_DATABASE_URL	YOUR_DATABASE_URL	Firebase database url to grab data from the database.
FIREBASE_PROJECT_ID	YOUR_PROJECT_ID	Firebase project id.
FIREBASE_STORAGE_BUCKET	YOUR_STORAGE_BUCKET	Firebase storage bucket url.
FIREBASE_MESSAGING_ID	YOUR_MESSAGING_ID	Firebase messaging id.
FIREBASE_APP_ID	YOUR_APP_ID	Firebase app id.
FIREBASE_MEASUREMENT_ID	YOUR_MEASUREMENT_ID	Firebase measurement id.
PRISMA_SECRET	YOUR_RANDOM_PRISMA_SECRET	Random secure token that we check in order to make calls to the prisma API
PATH_TO_CONFIG	./PATH/TO/YOUR/CONFIG.JSON.FILE	Path where the config.json file should be made.
REL_PATH_TO_CONFIG	./REL_PATH/TO/YOUR/CONFIG.JSON.FILE	Relative path from the main.ts to the config.json file.

• Go back to Firebase console and in the top left corner click on settings ⚙️ and click afterwards on project settings to get part of the credentials needed.

• Scroll down and copy over apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId and measurementId (optional), to the corresponding variables in the .env file

var firebaseConfig = {
	apiKey: "[FIREBASE_API_KEY]",
	authDomain: "[FIREBASE_AUTH_DOMAIN]",
	projectId: "[FIREBASE_PROJECT_ID]",
	storageBucket: "[FIREBASE_STORAGE_BUCKET]",
	messagingSenderId: "[FIREBASE_MESSAGING_ID]",
	appId: "[FIREBASE_APP_ID]",
	measurementId: "[FIREBASE_MEASUREMENT_ID]"
};

• Go back to the Firebase console and unfold build and click on realtime database.

• Copy the url and place it in the .env file under the variable FIREBASE_DATABASE_URL.

Development

• When all firebase variables are filled in, you are able to start the server to see everything in action.

• npm run all will start the local dev environment and the server to communicate with the game engines.

# start the server
npm start

# if you want to start the server 
# and the communication server between the engine and StoryTime
npm run all

# if you're in China use cnpm
# https://github.com/cnpm/cnpm

• Go to http://localhost:4200 in your browser

• Go to http://localhost:300

Production

Ignore build steps if you have downloaded the release of StoryTime.

# Build for production
npm run build:prod

• Fill in the right credentials in assets/data/config.json to make API calls.

• Copy over dist, or the contents of the release folder to your server where you want to run StoryTime from it from.

• Copy over the server folder to communicate with Firebase through NextJS (Vercel framework) WIP.