Deploying Fb app on Heroku

Question

I'm new to Heroku. For sometimes I've been trying to deploy an app on Heroku for Fb but have not seen success. I've tried searching for solution on the internet but have not found any step by step guide, so I'm asking here.

My Fb App code "index.php"

<?php
session_start();
require_once __DIR__ . '/fbsdk/autoload.php';

$fb = new Facebook\Facebook([
'app_id' => '************',
'app_secret' => '**********',
'default_graph_version' => 'v2.4',]);
 $helper = $fb->getCanvasHelper();
 $permissions = ['email']; 

try {
if (isset($_SESSION['facebook_access_token'])) {
$accessToken = $_SESSION['facebook_access_token'];
} else {
    $accessToken = $helper->getAccessToken();
}
} catch(Facebook\Exceptions\FacebookResponseException $e) {
} catch(Facebook\Exceptions\FacebookSDKException $e) {
}

if (isset($accessToken)) {

if (isset($_SESSION['facebook_access_token'])) {
    $fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
} else {
    $_SESSION['facebook_access_token'] = (string) $accessToken;
    $oAuth2Client = $fb->getOAuth2Client();
    $longLivedAccessToken = $oAuth2Client->getLongLivedAccessToken($_SESSION['facebook_access_token']);
    $_SESSION['facebook_access_token'] = (string) $longLivedAccessToken;
    $fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
}

try {
    $request = $fb->get('/me');
} catch(Facebook\Exceptions\FacebookResponseException $e) {
    if ($e->getCode() == 190) {
        unset($_SESSION['facebook_access_token']);
        $helper = $fb->getRedirectLoginHelper();
        $loginUrl = $helper->getLoginUrl('https://apps.facebook.com/APP_NAMESPACE/', $permissions);
        echo "<script>window.top.location.href='".$loginUrl."'</script>";
        exit;
    }
} catch(Facebook\Exceptions\FacebookSDKException $e) {
}

try {
    $requestPicture = $fb->get('/me/picture?redirect=false&height=300'); 
    $requestProfile = $fb->get('/me');
    $picture = $requestPicture->getGraphUser();
    $profile = $requestProfile->getGraphUser();
} catch(Facebook\Exceptions\FacebookResponseException $e) {
} catch(Facebook\Exceptions\FacebookSDKException $e) {
}

echo "<img src='".$picture['url']."'/>";
} else {
$helper = $fb->getRedirectLoginHelper();
$loginUrl = $helper->getLoginUrl('https://apps.facebook.com/APP_NAMESPACE/');
echo "<script>window.top.location.href='".$loginUrl."'</script>";
 }

"composer.json"

 {}

Commands I used on Git Bash

heroku create AppName
mkdir AppName
cd AppName
git init
git add .
git commit -m "comment"
heroku git:remote -a AppName
git push heroku master

git branch
git commit -am "comment"
git push heroku master

Everything goes well, heroku compiles the PHP files, deploys the file. But when I open the Fb app or even the heroku app address directly it shows a **403 Forbidden" message fbapp-2.herokuapp.com

The directory structure

Buildpacks set as heroku/php
I dont have procfile or .htaccess file

heroku logs shows

State changed from starting to up
2016-04-05T15:30:14.413923+00:00 heroku[router]: at=info method=GET path="/"             host=fbapp-2.herokuapp.com request_id=ea94baf1-a433-4631-bbe5-7493cb7e137f   wd="43.230.135.148" dyno=web.1 connect=0ms service=3ms status=403 bytes=373
2016-04-05T15:30:14.399879+00:00 app[web.1]: [Tue Apr 05 15:30:14.395964 2016] [autoindex:error] [pid 82:tid 139840075028224] [client 1.3.2.3:58066] AH01276: Cannot serve directory /app/: No matching DirectoryIndex (index.php,index.html,index.htm) found, and server-generated directory index forbidden by Options directive
2016-04-05T15:30:14.400023+00:00 app[web.1]: 1.3.2.3 - - [05/Apr/2016:15:30:14 +0000] "GET / HTTP/1.1" 403 209 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 OPR/36.0.2130.46
2016-04-05T15:30:14.873648+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=fbapp-2.herokuapp.com request_id=8b65b3b6-2f82-4ab4-abb4-d4849c1ec225 fwd="43.230.135.148" dyno=web.1 connect=0ms service=1ms status=404 bytes=373
2016-04-05T15:30:14.856297+00:00 app[web.1]: 1.3.2.3 - - [05/Apr/2016:15:30:14 +0000] "GET /favicon.ico HTTP/1.1" 404 209 "http://fbapp-2.herokuapp.com/" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 OPR/36.0.2130.46

Answer 1

The error log you are getting indicates that your app is not sitting in the /app directory on the Heroku server and that there is nothing in that directory to be served. Try shifting your entire application from the web root into the /app directory and see how that goes, should solve your issue, if not reply back with an updated error log.

Answer 2

So, as I understood from the error you do not have any index file inside directory you are trying to access and directory listing is disabled, so in the end you are getting 403 error.

I would suggest to try creating .htaccess inside directory you want to access file with:

Options +Indexes

Which is enabling a directory listing in this location.