Skip to main content

Presta UI Setup

Presta UI setup for fronetend development​

Prerequisites​

info

Ensure you have NGINX installed and running on your system.

1. Clone the repository:​

git clone git@github.com:workpointltd/presta-ui.git

Note the path to the cloned repository, as you will need it in the next steps.

2. Copy the NGINX configuration file:​

Get the NGINX configuration file from folder ''. (Will be added later).
Copy the file to the NGINX configuration directory, typically located at /etc/nginx/conf.d/. If the directory does not exist, create it. Ensure it is also imported by the main NGINX configuration file, usually located at /etc/nginx/nginx.conf. Check for include /etc/nginx/conf.d/*.conf; in the main configuration file. If it is not present, add it in http server block.

Create a symbolic link to the cloned repository in the NGINX configuration directory. This allows NGINX to serve the files from the cloned repository.

sudo ln -s /path/to/project/presta-ui /var/www/html/kopesha
sudo ln -s /path/to/project/presta-ui /var/www/html/prestapay
sudo ln -s /path/to/project/presta-ui /var/www/html/lms

4. Add the paths to Host file:​

Add the link dev.presta.co.ke to the /etc/hosts file.Add it as part of localhost hostnames.

5. Allow execution on directory:​

Run the following commands to allow traversal (execute) on parent directories

sudo chmod +x /path
sudo chmod +x /path/to
sudo chmod +x /path/to/project
sudo chmod +x /path/to/project/presta-ui

Ensure the files are executable

sudo chmod -R o+r /path/to/project/presta-ui

6. Restart NGINX:​

Restart NGINX to apply the changes. Visit dev.presta.co.ke/. You should see the interface.

7. Adding SSL certificates:​

To allow dev.presta.co.ke to communicate with the backend securely, we will need SSL certificates installed for it.
Start by installing mkcert and nss

sudo apt install mkcert libnss3-tools

Generate the certificates for the domain

mkdir -p ~/ssl
cd ~/ssl
mkcert localhost 127.0.0.1 ::1 dev.presta.co.ke

A path to the certificate will be provided. Note it and add it to NGINX configuration in dev.presta.co.ke server block. Add the lines as such:

server {
  listen       	443 ssl;
  server_name	dev.presta.co.ke;
  root       	/var/www/html/;
  
  #Header Configs
  ...
  ssl_certificate path/to/certs/localhost+3.pem;
  ssl_certificate_key path/to/certs/localhost+3-key.pem;

  location /kopesha/api/ {
    #Rest of configs
  ...

8. Restart NGINX:​

Restart NGINX and isit dev.presta.co.ke. The UI should now be fully functional.

9. Code away:​

Start coding and see your changes as you develop