Installation Olobase Fullstack Framework under the Ubuntu 22.04

5 min readJul 19, 2024

Olobase is an Open Source full-stack developer framework designed to create fast and easy web applications using Vue.js — Php technologies with allows extensive customizations. Olobase helps you reach your startup goals faster.

Olobase Open Source Fullstack Vue.js / Php Framework

Frontend Installation

To install the framework, the Node.js package must be installed on your computer. Look at tge following link to install Node.js with Nvm Manager.

Only Node.js 18.15.0 and above are supported, check out the article below to install Node.js with Nvm in your environment.

Follow the steps below to create an Olobase frontend project.

git clone --branch 1.3.1 git@github.com:olomadev/olobase-skeleton-ui myproject

Go to your project root

cd /var/www/myproject

Initalize the olobase-admin submodule

git submodule update --init

Install node modules with npm.

npm i

Save the env.dist file in the root directory as env.dev.

VITE_DEFAULT_LOCALE=en
VITE_FALLBACK_LOCALE=en
VITE_SUPPORTED_LOCALES=en,tr
VITE_API_URL=http://example.local/api
VITE_HCAPTCHA_SITE_KEY=
VITE_LICENSE_KEY=
VITE_SESSION_UPDATE_TIME=5
VITE_COOKIE={ "token": "_token", "user": "_user" }

Vite.config.js

The server.host address value of the vite configuration should always remain 0.0.0.0 by default. This value means that the server is open to listening on all host addresses, whether you are working with a local or virtual server such as VMWare. Because of this every IP address entered points to your application.

export default defineConfig({
  // transpileDependencies: true,
  transpileDependencies: ["vuetify"],
  server: {
    host: '0.0.0.0',
    port: 3000 // the port number you want
  },
  plugins: [ ...

Starting Your Local Server

Starts the application in the local environment.

npm run dev

If you are working on a local computer, you can visit http://127.0.0.1:3000. If you are working on a local virtual server, you can type the IP address of your server into your browser and visit an IP address like in this example; http://192.168.231.129:3000.

Exporting the Project

With this command, your javascript files compiled for the production environment are exported to the /dist folder.

npm run build

Getting Updates

When you set up the project as above, olobase-admin is included in your project as a submodule.

- myproject
  + packages
    - admin   // (olobase-admin submodule)
      + src
        .git
        EULA.md
        package.json
        README.md
  + src
    .env.dev
    .gitignore
    .gitmodules
    app.css
    env.dist
    favicon.ico
    index.html
    package.json
    README.md
    vite.config.js

You can keep your olobase application up to date by upgrading this package to new versions. To do this, look at the releases on the releases address. And follow the steps below to install the updated version.

cd /var/www/myproject

Enter the packages/admin folder within the current folder.

cd packages/admin

Upgrade your olobase-admin submodule to the latest version.

git pull origin 1.3.4

Don’t forget to follow the versions of your olobase-admin submodule to keep your application up to date.

Did You Edit The Submodule ?

If you did some changes in your olobase-admin submodule folder (accidently or for test purposes etc.) you need use stash command before the pull operation.

Do stash & pull

cd packages/admin

git stash
git pull origin 1.3.4

Still Didn’t Work ?

If you still cannot get the update you want after trying the commands above, try to run the commands below.

git restore .
// HEAD detached at 1.2.0

git pull origin 1.3.4
git checkout 1.3.4

Backend Installation

To install PHP libraries, the composer package must be installed on your computer.

Requirements

Before installation, please install the following components in your working environment.

Composer
Php 8.0 or higher versions
Apache 2 or higher
Apache Mod Rewrite
Redis Server
Php Redis Extension

To create an Olobase project backend application, first copy the clone link from github php repository and then paste it into your console along with the following git clone command.

git clone --branch 1.3.1 git@github.com:olomadev/olobase-skeleton-php.git example-php

Install composer packages.

/var/www/example-php$ composer install

Give 777 permision for /data/tmp cache folder.

chmod 777 -R /var/www/example-php/data/tmp

In general, we’d advise you to try setting the permissions of the cache/ directory to 755 and the files inside it — to 644. If you absolutely must use higher permissions, try using 777 for the cache/ directory and 666 for the files in it. Avoid setting the permissions of regular files to 777.

Apache2 Configuration

Enable Apache mod_rewrite plugin.

sudo a2enmod rewrite

The AllowOverride option for directories in the apache2.conf file must be All.

vim /etc/apache2/apache2.conf

Change this option from the default None to All.

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Create a hosts file.

cd /etc/apache2/sites-available
cp 00-default.conf example.local.conf
vim example.local.conf

In your Apache host file, the DocumentRoot configuration must be set to the yourproject/public/ folder. It is recommended to set DirectoryIndex to index.php. ServerName is set to example.local in this example.

<VirtualHost *:80>

    SetEnv "APP_ENV" "local"
    ServerName example.local
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/olobase-skeleton-php/public/
    DirectoryIndex index.php

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

Save your vhost file and restart the apache server.

a2ensite example.local.conf
sudo service apache2 restart

.htaccess

Configuration requires the .htaccess file as follows. This file is located in the /public folder.

# Disable directory indexing
# Options -Indexes
# Options +FollowSymLinks
# Options -MultiViews

php_value post_max_size 10M
php_value upload_max_filesize 10M

RewriteEngine On
#
# Redirect www to non-www
#
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

# The following rule allows authentication to work with fast-cgi
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# The following rule tells Apache that if the requested filename
# exists, simply serve it.
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

# The following rewrites all other queries to index.php. The
# condition ensures that if you are using Apache aliases to do
# mass virtual hosting, the base path will be prepended to
# allow proper resolution of the index.php file; it will work
# in non-aliased environments as well, providing a safe, one-size
# fits all solution.

RewriteCond %{REQUEST_URI} !/api/
RewriteRule ^(.*)$ %{ENV:BASE}index.html [NC,L]
RewriteCond %{REQUEST_URI}::$1 ^(/.+)(.+)::\2$
RewriteRule ^(.*) - [E=BASE:%1]
RewriteRule ^(.*)$ %{ENV:BASE}index.php [NC,L]

Linux Host File

In this example, the project is defined as example.local in the /etc/hosts file.

127.0.1.1       example.local

After this definition, you can access your application from your browser with the project name as follows.

http://example.local/

Local Environment Configuration

To work in a local environment, copy the local.php.dist file in the /config/autoload/ folder in your project and save it with the name local.php.

For more detailed information about the configuration of environments, you can browse the environments section.

Generating JWT Keys

The jwt encoder uses two public and private keys, private_key when signing tokens and public_key when reading tokens. You need to create different keys for each project. You can create public and private keys using this link.

Creating the Default Database

Before running the file named default.sql in the olobase-skeleton-php project create a database named olobase_default.

CREATE DATABASE olobase_default;

Then run default.sql SQL codes for this database.

Database Configuration

The example link above is for the Mysql driver for more examples you can visit the laminas-db link.

Login to Your Application

http://example.local/api/auth/token

You can test your application using software such as Postman as in the following example.

Username: demo@example.com
Password: 12345678

Conclusion

In this article you learned how to install Olobase Fullstack Framework for frontend and backend from scratch.

Note: The above information is taken from the documentation on the olobase.dev website.