Skip to content

Installation

You can build your app using a Docker container or by using a local webserver like Xampp. Please refer to the corresponding installation instructions since they differ a little from each other.

Download

Clone the GitHub repository:

git clone https://github.com/jonasbirkelof/beets-php

Install for Docker

Follow these steps to get started with Beets PHP by using Docker.

  1. Download Beets PHP by cloing the repository.

    git clone https://github.com/jonasbirkelof/beets-php
    
  2. Open a terminal in the project root, navigate to the /src folder and install the dependencies.

    cd src
    

    npm install
    
    composer install
    
  3. Open the file ~/config/config.php. Update the values below under Development variables and Productions variables.

    Example
    $appFolder = '/subdomain';
    $dbTablePrefix = 'app_';
    
    • $appFolder: If your application lives in a subfolder to your root, set the folder name here.
    • $dbTablePrefix: If you only have one database available, like on a shared host, and have to give your table a prefix you set that prefix here.
  4. Open the file ~/src/vendor/bramus/router/src/Bramus/Router.php.

  5. Find the run() method around line 274.

    Replace this line:

    $this->requestedMethod = $this->getRequestMethod();
    

    ...with this line and save the file:

    $this->requestedMethod = $_POST['_method'] ?? $this->getRequestMethod();
    
  6. Build the application to generate JavaScript and CSS files:

    npm run build
    
  7. Run docker compose from the root folder.

    cd ..
    
    docker compose up --build -d
    
  8. When the containers are running, open PhpMyadmin (localhost:9001) and import the database file ~/src/beetsphp.sql. Use the default login credentials:

    • Server: mysql_db
    • Username: root
    • Password: root

Open your website: localhost:9000.

Open MailHog: localhost:8025

Install for Xampp

Follow these steps to get started with Beets PHP by using Xampp or any other local web server.

The standard port 80 is shown for the URLs but you really don't need to have it there. If your port 80 is already in use, you have to set the Xampp port to something else (like 8080) and set the ports described below to that new port.

  1. Download Beets PHP by cloing the repository.

    git clone https://github.com/jonasbirkelof/beets-php
    
  2. Delete the following files and folders completely:

    • ~/phpmyadmin/
    • ~/Dockerfile
    • ~/docker-compose.yml
  3. Move the whole content of the ~/src/ folder to the root directory (~/) and delete the now empty src folder.

  4. Open a terminal in the project root and install the dependencies.

    npm install
    

  5. Open the file ~/.env.

    a. Update APP_URL to the virtual host you just created:

    APP_URL=http://beetsphp.local:80
    

    a. Update your database credentials. For Xampp it might look something like this:

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=beetsphp
    DB_CHARSET=utf8mb4
    DB_USERNAME=root
    DB_PASSWORD=
    
  6. Open the file ~/config/config.php. Update the values below under Development variables and Productions variables.

    Example
    $appFolder = '/subdomain';
    $dbTablePrefix = 'app_';
    
    • $appFolder: If your application lives in a subfolder to your root, set the folder name here.
    • $dbTablePrefix: If you only have one database available, like on a shared host, and have to give your table a prefix you set that prefix here.
  7. Open the file ~/webpack.mix.js.

    a. Update the BrowserSync proxy with the virtual host we just created:

    .browserSync({
      proxy: 'beetsphp.local:80'
    ])
    
  8. Open the router file ~/vendor/bramus/router/src/Bramus/Router.php and find the run() method around line 274.

    Replace this line:

    $this->requestedMethod = $this->getRequestMethod();
    

    ...with this line and save the file:

    $this->requestedMethod = $_POST['_method'] ?? $this->getRequestMethod();
    
  9. Add a virtual host for the project by adding the following code to <path-to-xampp>/apache/conf/extra/httpd-vhosts.conf:

    <VirtualHost *:80>
        DocumentRoot "<path-to-xampp-localhost>/beets-php"
        ServerName beetsphp.local
    </VirtualHost>
    
  10. Open Notepad as an administrator and open the hosts file C:\Windows\System32\drivers\etc\hosts. You will have to change the dropdown from only showing .txt files to show all files. Add the following line to the file, save and close it.

    127.0.0.1 beetsphp.local
    
  11. Start or restart Xampp with PhpMyAdmin.

  12. Open PhpMyadmin (localhost:80/phpmyadmin) and import the database file ~/beetsphp.sql.

  13. Build the application to generate the JavaScript and CSS files:

    npm run build
    

You can now visit your new Beets PHP application by visiting beetsphp.local:80

  1. If you want to use the dev server, start it with:

    npm run dev
    

Open your website: localhost:3000.