Skip to content

Cake local dev environment

Jump to bottom
Rita Oak edited this page Feb 17, 2022 · 7 revisions

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.

Choose an IDE

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

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

Download the latest version of Cake

  • 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 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:

Screenshot_from_2021-11-17_09-05-47

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 window 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) before reloading the test tenant (guest.oae.com).

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.

Firefox_Screenshot_2022-02-17T15-54-07 414Z

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:

Firefox_Screenshot_2022-02-17T15-54-20 192Z

Firefox_Screenshot_2022-02-17T15-54-56 610Z

Firefox_Screenshot_2022-02-17T15-55-10 504Z

Firefox_Screenshot_2022-02-17T15-55-34 393Z

Firefox_Screenshot_2022-02-17T15-55-48 875Z

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.

Firefox_Screenshot_2022-02-17T15-56-08 849Z

Firefox_Screenshot_2022-02-17T15-56-16 221Z

Firefox_Screenshot_2022-02-17T15-56-28 125Z

(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.

Firefox_Screenshot_2022-02-17T21-27-22 667Z

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

Firefox_Screenshot_2022-02-17T21-28-15 150Z

Access the new OAE

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

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.

Clone this wiki locally