This is a NextJS React app that provides users a way to access contents of a Google Drive directory through a single page application.
This novel app eliminates the need for users to search through unrelated Google Drive directories, files, and shared folders, reducing clutter in search results.
The app can be hosted for free on platforms such as Vercel and is secured through a secure Google Simple Sign-on process.
First, download the contents of this repository into your local environment for testing and run the following inside the terminal
npm install
Next, lets create the config.json file that will power the application.
The config-example.json
file contains the necessary configuration details to connect to the Google Drive API. To set up the connection, you will need to replace the placeholder values in the JSON file with your own Google Drive API credentials and settings.
At the time this readme is written, config-example.json
looks something like this:
{
"api" : {
"api_key" : "GOOGLE API KEY HERE",
"client_id" : "GOOGLE CLIENT ID HERE",
"client_secret" : "GOOGLE CLIENT SECRET HERE",
"scopes" : "https://www.googleapis.com/auth/drive.metadata.readonly"
},
"directory" : {
"team_drive" : "TEAM DRIVE ID HERE",
"target_folder" : "PARENT FOLDER ID HERE"
},
"components" : {
"HeaderImage" : {
"homepage_url" : "http://MYDOMAIN.COM",
"logo_url" : "https://LINKTOLOGO.png",
"logo_alt" : "MY CUSTOM GOOGLE DRIVE DIRECTORY",
"logo_width" : "300px",
"logo_color" : "#5b777d"
}
}
}
- Go to the Google Developers Console at https://console.developers.google.com/
- Create a new project or select an existing one
- Go to the API Library, select Google Drive API and enable it for your project
- Go to the Credentials section, select "Create credentials" and choose "OAuth client ID"
- Choose "Web application" as the application type and fill out the required information.
- Note the Client ID and Client Secret values, you will need to replace
"GOOGLE CLIENT ID HERE"
and"GOOGLE CLIENT SECRET HERE"
in theconfig-example.json
file with your own Client ID and Client Secret. - Inside the Oauth Client ID edit area, inside the Credntials section of your Google Developer Console, You will need to add your
Authorized JavaScript origins
which for your local testing environment should behttp://localhost:3000
and for your production environmenthttp://MYDOMAIN.COM
(or the full base URL of your application) - Also, inside the Oauth Client ID edit area, setup your
Authorized redirect URIs
. These need to include full URLs to your apps login page that will look likehttp://localhost:3000/login
for your localhost environment andhttp://MYDOMAIN.COM/login
for your production environment. - In the
config-example.json
file, leave"https://www.googleapis.com/auth/drive.metadata.readonly"
as the scope. For more information about scopes, you can find the available scopes at https://developers.google.com/identity/protocols/googlescopes
The directory
section in the config-example.json
file requires two values to be set: the ID of the team drive and the ID of the starting folder location.
- If the directory will be located inside a team drive, then go to the Google Drive web interface and locate the team drive you want to use.
- Click on the three dots (...) in the top right corner of the drive and choose "Drive settings".
- Copy the Drive ID, you will need to replace
"TEAM DRIVE ID HERE"
in theconfig-example.json
file with your own team drive ID. If you are not using a team drive, then make sure this value is left empty. - Locate the folder you want to use as the starting folder location for your directory.
- Click on the three dots (...) next to the folder and choose "Get link".
- In the "Link to share" dialog, select "Copy link".
- Extract the folder ID from the copied link, you will need to replace
"PARENT FOLDER ID HERE"
in theconfig-example.json
file with your own folder ID.
The components
section in the config-example.json
file contains cosmetic details that can be customized as desired. Replace the values in this section with your desired values.
Once you have replaced all the placeholder values in the config-example.json
file with your own values, you can remove -example
from the filename to enable the configuration file.
Once you are done your config.json
file should look something like this:
{
"api" : {
"api_key" : "AIzaSyDEsyMKrmCJHb8v_NHyJv_wMDhfgUfgsu",
"client_id" : "590454986992-o6uaho5dtgtgyhdss7nqccrr6e.apps.googleusercontent.com",
"client_secret" : "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",
"scopes" : "https://www.googleapis.com/auth/drive.metadata.readonly"
},
"directory" : {
"team_drive" : "0AIDUUK1SmUbSPdU7EA",
"target_folder" : "1ePFd-ssH4ja1-7_x6tNgd-5CT9HbsAIb"
},
"components" : {
"HeaderImage" : {
"homepage_url" : "http://localhost:3000/",
"logo_url" : "https://logovtor.com/wp-content/uploads/2021/06/some-logo-vector.png",
"logo_alt" : "My Logo",
"logo_width" : "300px",
"logo_color" : "#5b777d"
}
}
}
If everything is setup correctly, you should be ready to launch the dev server.
npm run dev
Open http://localhost:3000 with your browser to see the result.
If all is well you should see your app in motion!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
- Introduction - NextJS Google Drive Directory
- Installation Tutorial - Localhost - NextJS Google Drive Directory
- Installation Tutorial - Deploying to Vercel
Support the GBTI network by becoming a member of our private community.