I am trying to display some data in my application that I am fetching from the Github Gist API. I am getting a response, but I cannot access below a certain level of my response object. How do I access the "content" under "forgeLikeServerSetup.md"?
Here is my fetch function:
fetch('https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f')
.then(results => {
return results.json();
})
.then(data => {
console.log(data.files);
});
And here is my response:
{
"url": "see_above",
"forks_url": "https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f/forks",
"commits_url": "https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f/commits",
"id": "53e1780a5a68fe9281cfbbc9820d381f",
"git_pull_url": "https://gist.github.com/53e1780a5a68fe9281cfbbc9820d381f.git",
"git_push_url": "https://gist.github.com/53e1780a5a68fe9281cfbbc9820d381f.git",
"html_url": "https://gist.github.com/53e1780a5a68fe9281cfbbc9820d381f",
"files": {
"forgeLikeServerSetup.md": {
"filename": "forgeLikeServerSetup.md",
"type": "text/plain",
"language": "Markdown",
"raw_url": "https://gist.githubusercontent.com/m1guelpf/53e1780a5a68fe9281cfbbc9820d381f/raw/a74da413bd8ad348523b4535053687533cc10485/forgeLikeServerSetup.md",
"size": 7434,
"truncated": false,
"content": "### Let's Log in!\n- Create ssh pair for login on a fresh DO droplet.\n- ssh into the server\n- `apt-get update` It updates server's knowledgeable packages. Not technically updates any software.\n\n### Alright, let's start installing our stuff boys!\n- `apt-get install -y git tmux vim curl wget zip unzip htop` -y flag to say yes to all prompts\n- Adding additional repositories so that we can get latest version of the softwares from this respective repositories of them:\n- For NGINX: `add-apt-repository -y ppa:nginx/development` (Development branch of nginx repo is actually what they consider stable because its stable + bug-fixes, its not exactly the dev branch)\n- For PHP: `add-apt-repository -y ppa:ondrej/php`\n- Now after adding the repos we need to tell the server to suck in & update its cache of available packages: `apt-get update`\n- `apt-get install -y nginx`\n- `curl localhost` , also we can type in the IP in the browser & confirm the nginx default landing page shows up\n- `apt-get install -y php7.1-fpm php7.1-cli php7.1-mcrypt php7.1-gd php7.1-mysql php7.1-pgsql php7.1-imap php7.1-memcached php7.1-mbstring php7.1-xml php7.1-curl php7.1-bcmath php7.1-sqlite3 php7.1-xdebug`\n- `ps aux | grep php` To check the php fpm process is running\n- `php -v` to check we got the latest PHP installed\n- Install Composer: `php -r \"readfile('http://getcomposer.org/installer');\" | sudo php -- --install-dir=/usr/bin/ --filename=composer`\n- `which composer` to check it was installed in the given directory.\n- `composer -v` to check composer is working\n\n### Let's get NGINX configured to use PHP\n- `cd /var/www/html/`\n- `vim index.php` Just dump phpinfo() in that file for time being\n- Hit IP/index.php in the browser. It will download the file at this moment because PHP isn't working\n- `cd /etc/nginx/`\n- `sites-available` has all the configurations. `sites-enabled` have the symlinks to the configs in the `sites-available` which we want to be enabled.\n- `sudo vim sites-enabled/default`\n- Configure the server block in that default file. To get a basic understanding of the default file watch [this part of the video](https://youtu.be/VQNrsMYCOFg?t=13m43s) again.\n- `sudo nginx -t` To test the nginx config and show errors if any\n- `sudo service nginx configtest` will ONLY tell you if things are ok or not. So the previous one is better \n- `sudo service nginx reload`\n- Refresh the IP in the browser & now you should see the output of the phpinfo() from our index.php file\n- Done!\n\n### Making a Laravel app\n- `cd /var/www`\n- `composer create-project laravel/laravel:dev-develop myapp` dev-develop will pull in the latest under development unreleased laravel version\n- `sudo vim /etc/nginx/sites-available/default`\n- Change the root to the new laravel app's public directory path like in this case: `root /var/www/myapp/public;`\n- `nginx -t`\n- `sudo service nginx reload`\n- cd into myapp/public directory\n- Refresh browser and you will see the permission denied to write into the log file.\n- If we do `ps aux | grep php` we see that the \"php-fpm\" which is running our web requests, which is running our php is owned by user & group `www-data`.\n- That means this processes of php are running as user `www-data`\n- But if you run `ll` you will see that all the files in our app/public directory (in which we currently are) are owned by user `root`\n- So the `www-data` cannot write into the storage directory & the bootstrap/cache directory as they are owned by user & group `root` which in a laravel app should be writable by the `www-data`\n- To solve this do the following:\n- `cd ..` so we are out of the public directory\n- Then run `sudo chown -R www-data: storage/ bootstrap/`\n- Solved!\n\n### Wait Bro!\n- But now we will probably be pushing our code as some user so the permissions will again override for the storage & bootstrap directory\n- What Forge does is it uses PHP as user forge and uploads/pushes the code as user forge as well so the permissions remain at level\n- So let's do that!\n\n### Solving the above problem (wow what a heading! I know, thanks.)\n- `cd ~`\n- `adduser forge`\n- Enter the password for the user forge\n- `ll /home/`\n- A directory called `forge` have been created in the home directory for the user forge we just created\n- `cd ~`\n- `cd /var/www`\n- `mv myapp/ /home/forge/` We moved this application into the user forge's home directory\n- `cd /home/forge/`\n- `ll`\n- `chown -R forge: myapp/`\n- So now our web root is `/home/forge/myapp/public`\n- So lets edit the nginx config to replace the above path as the root\n- `vim /etc/nginx/sites-available/default`\n- Update the root directive\n\n- WAIT! PHP & NGINX ARE RUNNING AS `www-data` BUT ALL THE FILES & DIRECTORIES IN OUR myapp/ directory ARE OWNED BY USER `forge`. So....again the same problem, Laravel could not write to the storage directory and so in the browser we again get the 'permission denied' error.\n- So instead to change to files get owned by `www-data` it makes sense to change PHP to change what user PHP would run as.\n- `cd /etc/php/7.1/fpm/`\n- `cd pool.d/`\n- `vim www.conf` This file determines how PHP-fpm runs & how it manages the processes like how many processes it spins up to handle requests.\n- In the file there will be:\nuser = www-data\ngroup = www-data\n- Change both to forge\n- `:wq`\n- `sudo service php7.1-fpm reload`\n- `ps aux | grep php` to check the php-fpm is now running as user & group `forge`\n- So now the permissions line up as both our code & PHP are running as user & group `forge`.\n- Refresh the browser & you will see the laravel landing page.\n- Good Job Chris!\n\n### Allowing user forge to use sudo\n- `usermod -aG sudo forge`\n- We can check it worked by running `groups forge`\n- Now everytime we push our code and since we will be pushing code from the user forge we need to sudo php fpm reload. But that will everytime ask for the user forge's password.\n- So we want to make sure that for only that command we do not have to enter the password\n- `visudo -f /etc/sudoers.d/php-fpm`\n- Add the following in it:\n`forge ALL=NOPASSWD: /usr/sbin/service php7.1-fpm reload`\n- This means \"user forge from all/any host can run sudo commands with No password but only the following commands\" that is the commands after the colon.\n- Let's test this!\n- Exit to clear the cached password & login back\n- `sudo su forge`\n- Run `sudo service php7.1-fpm reload`\n- And voila! It didn't asked for the password. So now we have 1 less barrier in our goal of automated deployment.\n\n> **We reload php-fpm mainly to clear the opcache so our new code is reflected. Even if we not have opcache it's better to reload php-fpm as some php process might be stuck in the old code might be, not sure! so it's a good practice & doesn't hurts too**\n\n### Here comes the MySQL!\n- `sudo apt-get install -y mysql-server`\n- Enter the password for the new `root` user\n- **You can automate this without prompts. Chris has videos on how to do that on serversforhackers.com**\n- Check by running `sudo service mysql status`\n- `mysql_secure_installation`\n- Remove anonymous users\n- Disallow root logins remotely\n- Remove test databases\n- Reload privileges\n- login to mysql by: `mysql -u root -p`\n- `create database myapp charset utf8mb4`\n- `create user myuser@localhost identified by 'secret'`\n- `grant all privileges on myapp.* to myuser@localhost;`\n- `flush privileges;` to burst the privileges cache\n- exit;\n- Update the .env file in the laravel app and we are done!\n"
}
},
"public": false,
"created_at": "2017-07-13T19:01:10Z",
"updated_at": "2017-07-13T19:01:10Z",
"description": "Personally written version of Chris Fidao's video on setting up a Forge like server: ",
"comments": 0,
"user": null,
"comments_url": "comments_url",
"owner": {
"login": "m1guelpf",
"id": 23558090,
"avatar_url": "avatar,"
"gravatar_id": "",
"url": "url_test",
"html_url": "h",
"followers_url": "followers",
"following_url": "/users/m1guelpf/following{/other_user}",
"gists_url": "/m1guelpf/gists{/gist_id}",
"starred_url": "/users/m1guelpf/starred{/owner}{/repo}",
"subscriptions_url": "/m1guelpf/subscriptions",
"organizations_url": "/m1guelpf/orgs",
"repos_url": "users/m1guelpf/repos",
"events_url": "/m1guelpf/events{/privacy}",
"received_events_url": "/m1guelpf/received_events",
"type": "User",
"site_admin": false
},
"fork_of": null,
"forks": [
],
"truncated": false
}
What goes after data.files in my fetch function?
You can access that like this:
fetch('https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f')
.then(results => {
return results.json();
})
.then(data => {
console.log(data.files["forgeLikeServerSetup.md"].content);
});
It is slightly complicated by the fact that the title "forgeLikeServerSetup.md" includes a '.', so you have to use the bracket notation rather than the dot notation, but it works just the same.