About this guide
If you can see this guide on your deployment. Please set the `showDeployGuide` to false on the config files. Since it will take up the `deploy` route.
Deployment Guide
Welcome to the deployment guide! This guide will help you to deploy the application to Vercel or similar services.
If you are new to this project, you can follow along from the beginning.
But if you've already deployed the app before and want to upgrade from v1, you can skip to the Migrating from v1 section.
You can also use this guide to configure the app and customize the theme.
Note: This guide assumes you have a basic understanding of how to deploy a Next.js app on Vercel or other platforms.
We recommend you to use this deployment guide on a desktop browser.
New User Guide
Prerequisites:
- A basic understanding of Vercel (or similar services)
- Google Cloud Platform account
Fork or Clone the repository
It's pretty obvious, but you need to fork the repository to your account.
You can click here to fork the repository.
You can choose any repository name, description, and visibility.
But if you want to run it locally, you can clone the repository instead.
Create a Google Cloud Platform project and enable Google Drive API
We need an access to Google Drive API to get the files from Google Drive.
So you need to create a project in Google Cloud Platform and enable Google Drive API to get your own credentials.
- Go to Google Cloud Platform
- Click the
New Project
button - Enter a project name, and click the
Create
button - After the project is created, click the
Enable APIs and Services
button - Search for Google Drive API, and click the
Enable
button
Create a Service Account and get the credentials
After enabling the Google Drive API, we need to create a service account to get the credentials.
The credentials will be used to authenticate the application to access the Google Drive API and get the files.
- On APIs & Services page, click the
Credentials
menu on the sidebar - Click the
Create Credentials
button, and chooseService account
- Enter your service account name and description, and then click the
Done
button - You will see the service account you just created on
Service Account
table, click the name of the service account to open the details - Go to
Keys
tab, then click theAdd Key
button and choose theCreate new key
- Pick
JSON
as the key type and click theCreate
button - The JSON file will be downloaded to your computer, 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
Create shared folder in Google Drive
Since the service account can't access your Root folder, you need to create a new folder, and share it with the service account.
This folder will be used as the root folder for the application.
If you're using or the folder you want to share inside Shared Drive, you can skip this step and go to the Shared Drive Guide
- Go to Google Drive
- Click the
New
button, and chooseFolder
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 toAnyone with the link
- 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>
)
Configuring the app and Customizing the theme
Now we need to configure the app to use the credentials and folder ID we just created.
You can follow the App Configuration and Customize Theme sections to configure the app and customize the theme.
Note: You can skip the theme customization, but you NEED to configure the app
Deploy the app
On this guide we will use Vercel to deploy the app, but you can use other platforms like Netlify, Heroku, etc.
But don't forget to adjust the fileSizeLimit
on the configuration if you use other platforms.
Before deploying, make sure you have pushed the changes to your repository
- Go to Vercel
- Click on the
Add new
button, and chooseProject
- Choose the repository you just forked
- On the
Environment Variables
section, copy the whole content from.env.local
you just downloaded from configuration section, and paste it on the key fields. It will automatically add all the environment variables needed - Click the
Deploy
button - Wait for the deployment to finish, and open project
- Go to
Settings
tab, and click theFunctions
menu, and select yourFunction Region
to the nearest region to your location for optimal speed - Go to
Deployment
tab, click the 3 dots on the right side of the latestProduction
deployment, and click theRedeploy
button to apply the changes
For other platforms, you can check their own documentation for Next.js deployment guide.
Done! 🎉
Congratulations! You have successfully deployed the app.
Heads up!
Loading configuration...