chore: reorganize docs apps (#7228)

* reorganize docs apps * add README * fix directory * add condition for old docs
2024-05-03 17:36:38 +03:00
1 parent 224ebb2154
commit 4fe28f5a95
@@ -0,0 +1,45 @@
+export const metadata = {
+  title: `General Deployment Guide for the Next.js Starter`,
+}
+
+# {metadata.title}
+
+In this guide, you’ll learn the general steps to follow when deploying the Next.js Starter.
+
+<Note type="check">
+
+- Deployed Medusa application.
+- [GitHub repository with the Next.js Starter's code](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository).
+
+</Note>
+
+## Deploy to Hosting Provider
+
+The steps to deploy the Next.js Starter are different based on the hosting provider you use. The following points cover common configurations across hosting providers:
+
+- If your hosting provider supports choosing a framework preset, set it to Next.js. You can then skip setting the build command and output directory as they are default Next.js configurations. If not:
+    - Set the build command of your deployed project to the `build` command:
+
+    ```bash npm2yarn
+    npm run build
+    ```
+
+    - Set the output directory of your deployed project to `.next`.
+- Add the following environment variables:
+    - `NEXT_PUBLIC_MEDUSA_BACKEND_URL`: The URL of your deployed Medusa application.
+    - `NEXT_PUBLIC_BASE_URL`: The URL of the storefront. If you still don’t have the URL you can wait until later to add it. However, you may face errors when using the storefront.
+    - `REVALIDATE_SECRET`: A secret used for revalidating data. Learn more in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
+
+---
+
+## Configure CORS on the Deployed Medusa Application
+
+To send requests from the Next.js Starter storefront to the Medusa application, you must set the `STORE_CORS` environment variable on your Medusa application to the storefront’s URL:
+
+```bash
+STORE_CORS=<STORE_URL>
+```
+
+Where `<STORE_URL>` is the URL of your storefront.
+
+Then, restart your Medusa application. Once the Medusa application is running again, you can use your storefront.
@@ -0,0 +1,99 @@
+export const metadata = {
+  title: `Deploy Medusa Admin to Vercel`,
+}
+
+# {metadata.title}
+
+This guide explains how to deploy the Medusa Admin separately from the Medusa application to Vercel.
+
+<Note title="Important">
+
+Per Vercel’s [license and plans](https://vercel.com/pricing), their free plan can only be used for personal, non-commercial projects. So, you can deploy the Next.js Starter on the free plan for development purposes, but for commercial projects, you must update your Vercel plan.
+
+</Note>
+
+[Vercel](https://vercel.com/) is a cloud platform for static sites and serverless functions. It provides developers with a platform to deploy web projects quickly and easily.
+
+<Note type="check">
+
+- Deployed Medusa application.
+- [Vercel account](https://vercel.com/)
+- [GitHub repository with the Next.js Starter's code](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository).
+
+</Note>
+
+## Deploy to Vercel
+
+This section covers how to deploy the storefront, either using the Vercel website or using Vercel’s CLI tool.
+
+### Option 1: Using the Vercel Website
+
+This section explains how to deploy the storefront using the Vercel website:
+
+1. Open the [Vercel dashboard](https://vercel.com/dashboard) after logging in.
+2. Click on the “Add New…” button next to the search bar.
+3. Choose Project from the dropdown.
+4. In the new page that opens, find the Git repository that holds your Next.js Starter Template and click on the Import button. If you haven’t connected your Vercel account to any Git provider, you must do that first.
+5. In the Configure Project form:
+    1. Open the Environment Variables collapsible, and add the following environment variables:
+        - `NEXT_PUBLIC_MEDUSA_BACKEND_URL`: the URL to your deployed Medusa application.
+        - `NEXT_PUBLIC_BASE_URL`: The URL of your storefront. If you don't have a domain ready yet, you can add it later. However, you may face some errors in your storefront.
+        - `REVALIDATE_SECRET`: A secret used for revalidating data. Learn more in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
+    2. You can optionally edit the Project Name.
+6. Once you’re done, click on the “Deploy” button.
+
+This will start the deployment of the storefront. Once it’s done, you’ll be redirected to the main dashboard of your new project.
+
+<Note>
+
+At this point, when you visit the storefront, you'll face errors related to Cross-Origin Resource Sharing (CORS). Before you start using the storefront, follow along the [Configure CORS on the storefront](#configure-cors-on-the-medusa-application) section.
+
+</Note>
+
+### Option 2: Using Vercel’s CLI Tool
+
+This section explains how to deploy the storefront using the Vercel CLI tool. You should have the CLI tool installed first, as explained in [Vercel’s documentation](https://vercel.com/docs/cli).
+
+In the directory holding your storefront, run the following command to deploy your storefront:
+
+```bash
+vercel --build-env NEXT_PUBLIC_MEDUSA_BACKEND_URL=<YOUR_APP_URL>
+vercel --build-env NEXT_PUBLIC_BASE_URL=<YOUR_BASE_URL>
+vercel --build-env REVALIDATE_SECRET=<YOUR_REVALIDATION_SECRET>
+```
+
+Where:
+
+- `<YOUR_APP_URL>`: the URL of your deployed Medusa application.
+- `<YOUR_BASE_URL>`: The URL of your storefront. If you don't have a domain ready yet, you can add it later. However, you may face some errors in your storefront.
+- `<YOUR_REVALIDATION_SECRET>`: A secret used for revalidating data. Learn more in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
+
+You’ll then be asked to log in if you haven’t already, and to choose the scope to deploy your project to. You can also decide to link the storefront to an existing project, or change the project’s name.
+
+When asked `In which directory is your code located?`, keep the default `./` and just press Enter.
+
+The project setup will then start. When asked if you want to modify the settings, answer `N` to keep the default settings.
+
+It'll take a couple of minutes for the deployment to finish. The link to the storefront will be shown in the final output of the command.
+
+<Note>
+
+At this point, when you visit the storefront, you'll face errors related to Cross-Origin Resource Sharing (CORS). Before you start using the storefront, follow along the [Configure CORS on the storefront](#configure-cors-on-the-medusa-application) section.
+
+</Note>
+
+---
+
+## Configure CORS on the Medusa application
+
+To send requests to the Medusa application from the Next.js Starter, set the `STORE_CORS` environment variable on your Medusa application to the deployed storefront's URL.
+
+On your Medusa application, add the following environment variable:
+
+```bash
+STORE_CORS=<STOREFRONT_URL>
+```
+
+Where `<STOREFRONT_URL>` is the URL of your storefront.
+
+Then, restart your Medusa application. Once the application is running again, you can use your storefront.