Heads up!
Welcome to the deployment guide! This guide will assist you in deploying the project to Vercel or similar services.
If you are new, you can follow along from the beginning. However, if you have previously deployed the project and wish to upgrade from v1 or v2.x, you can proceed directly to the Migration Guide section.
You can also utilize the next-gdrive-index configurator to generate configuration for your deployment!
This guide assumes that you have a fundamental understanding of how to deploy a Next.js application on Vercel or other platforms.
For new user, this guide will provide step-by-step instructions on deploying the project to Vercel or similar services.
Before you begin, you'll need to have the following:
- A Github account
- A Google Cloud Platform account
- A Vercel (or similar service) account
Basic understanding of Next.js and common sense
Fork and clone the repository
As a first step, you'll need to fork and clone the repository to your GitHub account.
Forking the repository
- Click the Fork button or click here
- Fill in the repository name, and description as you like
Cloning the repository
- Click the Code button, and copy the repository URL
- Open your terminal, and run the following command:
git clone <repository_url>
Note
You can also use GitHub Codespaces to edit the project if you prefer not to clone the repository.
Creating Google Cloud Platform project
Before accessing files from Google Drive, you'll need to create a project in Google Cloud Platform and enable the Google Drive API (covered in the next step).
You can use your Google account to login to Google Cloud Platform.
- Go to Google Cloud Platform (if it's your first time, you need to accept the terms and conditions before you can proceed)
- In the center of the page, click on Create or select project
- In the top right corner, click the New Project button
- Enter a desired name for your project, and click the Create button
- A notification confirming project creation will appear, click on the Select project button
Congratulations! You've successfully created a project in Google Cloud Platform.
Next we'll enable the Google Drive API to access your Google Drive files.
Enabling Google Drive API
To allow the project to access files stored in your Google Drive, you need to enable the Google Drive API within your Google Cloud Platform project.
You can access your Google Cloud Platform project by selecting the project on the top left corner of the page. Or clicking Select Project button on notification after creating the project.
To enable the Google Drive API, follow these steps:
- Go to APIs & Services product, and then select the Enabled APIs & services menu
- Click on the + Enable APIs and Services button at the top of the page
- Search for "Google Drive API" on the search bar, and select the first result (It should be named Google Drive API)
- Click the Enable button and wait for the process to complete
Now that the Google Drive API is enabled, we need to create a service account to obtain the necessary credentials for accessing the API.
Creating service account
Go to the Credentials page on the Google Cloud Platform to create a service account (tt can be found on the left sidebar), and follow these steps to create a service account:
- Click on Create Credentials button, and choose Service account.
- Fill the service account name and description as you like, and then click the Create and continue button.
- You can skip both the Grant this service account access to project and Grant users access to this service account by clicking the Done button.
- You should see the service account you just created on the Service Account table, click on the service account name to open the details.
- Go to the Keys tab, and then click the Add Key button, choose the Create new key, and then pick the key type as JSON.
- A download prompt will appear, save the JSON file on easy-to-find location, and keep it safe. We will use it later on the configuration.
Note
The JSON file contains sensitive information, don't share it with anyone.
Preparing root folder in Google Drive
Since the service account can't access your Root folder, you need to create a new folder as the root folder for the index.
You can either set the folder to public or share it with the service account.
- Open your Google Drive
- Click the New button, and choose Folder to create a new folder, you can name it anything you want
- Right-click the folder you just created, and choose Share
- Enter the email address of the service account you just created (you can find it on the JSON file, or on the service account details page)
- To allow download files larger than deployment limit, you need to enable Link sharing and set it to Anyone with the link (read note below)
- Copy the folder ID from the URL, it's the part after /folders/ in the URL (e.g:
https://drive.google.com/drive/u/0/folders/<folder_id>
)
Save the folder ID on notepad or somewhere safe, we will use it on the configuration.
Note
People can't download files larger than the download limit (more information on configuring section) if the folder is not set to public.
I'm still looking for a workaround for this.
Configuring the project
There are 2 ways to configure the project, you can either use configurator or manually edit the configuration file (/src/config/gIndex.config.ts
).
While the configurator is easier, you can only configure the basic settings, so I recommend you to manually edit the configuration file.
Using the configurator
- Open the configurator page here
- Fill the form with the required information
- Click the Generate Config button to download the configuration file
- Replace the existing configuration file (
/src/config/gIndex.config.ts
) with the downloaded file - Save the environment file (
.env.local
) to be used on the deployment
Important Note
Make sure you don't push / upload the environment file to the repository, or share it with anyone.
Since it contains sensitive information, it should be kept secret.
Manually editing the configuration file
First, we need create a environment file to store the sensitive information.
You can either store it temporarily on notepad, or create a new file named .env.local
on the root of the project.
The environment file should contain the following information:
GD_SERVICE_B64
- Base64 encoded service account JSON file, you can encode it using base64encode.orgENCRYPTION_KEY
- A secret key to encrypt sensitive information, make sure it's a long random stringSITE_PASSWORD
- Will be used as the index password if you set private index totrue
on the configuration fileNEXT_PUBLIC_DOMAIN
(optional) - Domain without protocol and trailing slash, e.g:example.com
, default to your Vercel deployment domain / url (If you're not using Vercel, you need to set this)
Important Note
Make sure to keep the environment file safe, and don't share it with anyone.
Since it contains sensitive information, it should be kept secret.
After creating the environment file, you can edit the configuration file (/src/config/gIndex.config.ts
) to configure the project.
Before changing the configuration, you need to replace the apiConfig.rootFolder
with the encrypted value of the folder ID you just copied.
To encrypt the value, you can use the following command:
- Copy this command to your terminal
curl "https://drive-demo.mbaharip.com/api/encrypt?key=<ENCRYPTION_KEY>&data=<FOLDER_ID>"
- Replace the
<ENCRYPTION_KEY>
with your encryption key from above, and the<FOLDER_ID>
with the folder ID you copied. - Run the command, if it's successful, you should get the
encryptedValue
and other information on the response. - Make sure
decryptedValue
is the same as the folder ID you copied, andkey
is the same as the encryption key you used. If it's not, you need to recheck the encryption key and folder ID. - Replace the
apiConfig.rootFolder
with theencryptedValue
you got from the response.
If you're using Shared Drive, please follow the Shared Drive Guide before deploying the project.
Now you can change the other configuration as you like, each configuration has a description to help you understand the purpose of the configuration.
Then save the configuration file, and you're ready to deploy the project.
Deploying the project
Before deploying the project, you need to make sure these things:
- No environment file is pushed to the repository
- Root folder ID and Shared Drive ID (if you're using Shared Drive) is encrypted
StreamMaxSize
is set to the maximum file size you want to stream (To avoid excessive bandwidth usage)maxFileSize
is set to your deployment limit (Especially if you're using other platforms than Vercel)
After making sure everything is set, you can follow these steps to deploy the project:
(Note: I'm using Vercel as the deployment platform, but other platforms should be similar)
- Go to your deployment platform dashboard (e.g: Vercel)
- Click on the Add button, then select your
next-gdrive-index
repository - Wait for the build process to finish
- Go to the project settings, and search for the Environment Variables section
- Add each environment variable from the environment file to the key fields, and the value to the value fields
- Redeploy the project, and wait for the deployment to finish
For other platforms, it's better to check their documentation on how to deploy Next.js project.
It should be similar to Vercel. (New Project > Select Repository > Wait for build > Add Environment Variables > Redeploy)
Done! 🎉
Congratulations! You've successfully deployed your own instance of next-gdrive-index
If you've deployed the project before and want to upgrade to the latest version, you can follow this guide to migrate the project.
For v1, you need to refork the repository to get the latest changes.
If you're using v2.3 or below, you can click on Sync fork to get the latest changes.
But don't forget to backup the configuration file before syncing the repository.
Migrating from v1
Here are the things you need to change to migrate from v1 to the latest version.
Environment file (v1.x)
NEXT_PUBLIC_ENCRYPTION_KEY
- Change toENCRYPTION_KEY
NEXT_PUBLIC_SITE_PASSWORD
- Change toSITE_PASSWORD
NEXT_PUBLIC_VERCEL_URL
- Change toNEXT_PUBLIC_DOMAIN
Configuration file (v1.x)
masterKey
- Deprecated, please remove this configurationapiConfig.rootFolder
- Need to be encrypted, you can read this section to encrypt the folder IDsiteConfig.navbarItems
- You need to change the Icon value, since now the icon using Lucide Icons
The other configuration are new, you might want to read each description to understand the purpose of the configuration before changing it.
Migrating from v2.3 or below
For faster migration, you can use the configurator to load your .env.local
and gIndex.config.ts
file, and generate the new configuration file.
It will automatically set the new configuration based on your old configuration.
But if you want to manually change the configuration, you can follow the steps below
Environment file (v2.3 or below)
There are no changes on the environment file, you can use the old environment file without any changes.
But if you want, you can change your ENCRYPTION_KEY
to the new one. There are no limitations like the old version.
Configuration file (v2.3 or below)
showGuideButton
- Previously named asshowDeployGuide
apiConfig.rootFolder
- Need to be encrypted, you can read this section to encrypt the folder IDapiConfig.sharedDrive
- Need to be encrypted, you can read this section to encrypt the shared drive IDsiteConfig.footer
- Format changed, it is now an array of object withvalue
instead of array of string. Also add{{ poweredBy }}
templatesiteConfig.experimental_pageLoadTime
- Currently WIP. you need to add this, but it's not used yetsiteConfig.previewSettings.manga
- Currently only manga preview is available, you can set the max item / size to load on the preview
That's it! You've successfully migrated the project to the latest version.
It's actually pretty simple to use Shared Drive, here are the steps:
- Open your Google Drive
- On the left sidebar, select Shared drives, and then pick the Shared Drive you want to use
- Copy the Shared Drive folder ID from the URL, it's the part after
/drive/u/0/folders/
in the URL (e.g:https://drive.google.com/drive/u/0/folders/<folder_id>
) and save it somewhere easy to access (e.g notepad) - Create a new folder inside the Shared Drive, and share it with the service account email address (you can find it on the JSON file, or on the service account details page)
- Share the folder with Anyone with the link to allow download files larger than deployment limit
- Copy the folder ID from the URL, it's the part after
/folders/
in the URL (e.g:https://drive.google.com/drive/u/0/folders/<folder_id>
), and save it somewhere easy to access (e.g notepad)
Now we need to encrypt both the Root folder ID and Shared Drive ID before we can use it on the configuration file.
To encrypt the value, you can use the following command:
- Copy this command to your terminal
curl "https://drive-demo.mbaharip.com/api/encrypt?key=<ENCRYPTION_KEY>&data=<ID>"
- Replace the
<ENCRYPTION_KEY>
with your encryption key from above, and the<ID>
with the ID you copied. - Run the command, if it's successful, you should get the
encryptedValue
and other information on the response. - Make sure
decryptedValue
is the same as the ID you copied, andkey
is the same as the encryption key you used. If it's not, you need to recheck the encryption key and ID.
Do this for both the Root folder ID and Shared Drive ID, and replace the configuration file with the new encrypted value.
And make sure to set apiConfig.isTeamDrive
to true
to use Shared Drive.