Cake local dev environment

Initial setup

Warning: The new OAE frontend is a local development instance. It is not ready for production.

Before working on the new frontend, you will need a few essentials to get started.

Bugs and other issues can be reported in our issue tracker and we're always available to help in our discord channel.

Main Requirements

• Node.js
• NPM
• Git
• Docker
• Docker Compose
• IDE of your choice

---

Choose an IDE

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code along with several others:

• ESlint
• i18n Ally
• Babel
• Svelte intellisense
• Debugger for Chrome or Debugger for Firefox
• Stylelint

(The official Prettier extension is included in Svelte for VS Code)

Download the latest version of Cake

Fork and download the most recent master version of Cake here. Then, open the project folder and a terminal (cmd or in your IDE) to do the following:

• Install the dependencies...

npm install

...then start Rollup:

npm run dev

This will help you check if the frontend is displaying the project homepage at http://0.0.0.0:5000/. At this stage it won't be possible to access other pages since we still haven't made a connection with the backend.

Setup Docker

The recommended way to install docker is to follow the official guide at https://docs.docker.com/engine/installation/. Make sure you have docker version >= 17.x and docker-compose version >= 1.6.0 before you proceed to cloning the repos. Check your versions by running the following commands:

$ docker -v
Docker version 17.03.0-ce, build 60ccb2265
$ docker-compose -v
docker-compose version 1.11.2, build dfed245

Also, don't forget the post-install instructions if you're using linux.

Get started

This is the nginx config it takes for Cake to work with Hilary: https://gist.github.com/brecke/b287c56072dca7ab8bf8162fa5f2995b

Place the file nginx.conf inside a folder with Cake to access it quickly. The final result should look like this:

Setup DNS entries (for Linux only)

You'll still need to set up the dns entries, as follows:

# As root or with sudo
echo "127.0.0.1 admin.oae.com" > /etc/hosts
echo "127.0.0.1 guest.oae.com" > /etc/hosts

Run docker

First: start container with docker run --rm -it -P --network host --name=oae ghcr.io/oaeproject/oae-demo:master

How to reload nginx using the new cake-ready configuration

As soon as the container boots, open a new terminal in your project folder (or one level before, as in the previous image) to download nginx.new.conf and nginx.old.conf as in the examples below.

To access the new interface in full, you will first need to create a guest user in the admin area (admin.oae.com) with the old oae interface nginx.old.conf before reloading the test tenant (guest.oae.com) with nginx.new.conf.

Download the new configuration and edit it

# First, download the template configuration
wget https://gist.githubusercontent.com/brecke/b287c56072dca7ab8bf8162fa5f2995b/raw/be87e6d44df1f407f0f108362028e3d4e276ca42/nginx.conf -O nginx.new.conf

# Let's edit the IP address
sed -i 's/host.docker.internal/localhost/g'                       nginx.new.conf
sed -i 's/\/usr\/src\//\/home\/node\//g'                          nginx.new.conf
sed -i 's/\/usr\/share\/files/\/home\/node\/Hilary\/tmp\/files/g' nginx.new.conf

Copy to container and reload

#
# Make sure you're running the OAE demo docker container before running the next command
#
# 1 Copy the config file into the docker container
docker cp nginx.new.conf oae:/etc/nginx/nginx.conf
# 2 Reload the nginx service
docker exec -it oae service nginx restart

How to reload nginx using the old configuration

Download the old configuration and edit it

wget https://raw.githubusercontent.com/oaeproject/3akai-ux/master/nginx/nginx.docker.conf -O nginx.old.conf
sed -i 's/host.docker.internal/localhost/g'                       nginx.old.conf
sed -i 's/\/usr\/src\//\/home\/node\//g'                          nginx.old.conf
sed -i 's/\/usr\/share\/files/\/home\/node\/Hilary\/tmp\/files/g' nginx.old.conf

Copy to container and reload

# 1 Copy the config file into the docker container
docker cp nginx.old.conf oae:/etc/nginx/nginx.conf
# 2 Reload the nginx service
docker exec -it oae service nginx restart

Once these steps are complete, you may go to admin.oae.com (admin interface) or guest.oae.com (test tenant).

Access guest tenant admin area

Congratulations!

The OAE frontend should be communicating with the backend at this stage.

The next step is to switch to the old nginx configuration and open http://admin.oae.com on your browser.

For testing purposes, use the default combo administrator as credentials. During a subsequent production phase, change these to ensure a secure connection.

Create/Edit testing guest user

To browse the new frontend and test newsfeed cards, you will need to create a testing guest tenant. Click on the edit icon next to guest (under Alias), as shown in the image below.

This is the sequence you need to follow to create a new testing guest user:

---

On left side menu, go back to Tenants and click on the link guest.oae.com to go to the old OAE interface. Alternatively, you can type guest.oae.com in your browser.

If the following shows, you're going on the right track.

Now you can add activities to the news feed to use in the new interface.

(Optional) Change logo/add auth options

Edit the guest tenant logo by clicking Skinning on the left side menu. Careful: the only accepted file extensions are .png and .jpg.

To add auth options for development purposes go to Configuration > OAE Authentication Module.

Access the new OAE

• Reload nginx to the new configuration..
• .. then start the frontend with npm run dev
• .. and open http://guest.oae.com

You should see the homepage:

During this stage of development, if you want to navigate to other pages you'll need to add /{page} to the link. For example, to open the dashboard, the anchor would be http://guest.oae.com/dashboard.

Note: If you create activities, they will show in the new interface.