View demo Buy theme now

7, Deploying the Ncmaz-faust

Because Ncmaz-faust is actually a Nextjs project, there are many ways to implement this project. It's best to follow Nextjs' documentation on how to deploy - https://nextjs.org/docs/pages/building-your-application/deploying

  1. If you are a Nextjs developer, then I probably won't elaborate. Where to store it is your choice and you will probably have your own thoughts and insights.

  2. If you are new to Nextjs then I think you are better off hosting on Vercel. If you are ready, you can immediately deploy the Ncmaz-faust project to Vercel here - https://vercel.com/solutions/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website

  3. An important note: When you deploy to host the project, you need to set the environment variable as described in step 5. 

    # Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com

# Plugin secret found in WordPress Settings->Faust
FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

  4. When deploying your Next.js application to Vercel, Environment Variables can be configured in the Project Settings. (Read more Nextjs's docs )

I, __Steps to deploy Ncmaz Faust to Vercel CLI

To deploy a Next.js project to Vercel hosting, you can follow these steps:

  1. Create a Vercel Account:

    • First, you need to have a Vercel account. If you don't have one, you can sign up at Vercel's website.

  2. Install the Vercel CLI (Command Line Interface):

    • Open your terminal or command prompt and run the following command to install the Vercel CLI:

    npm install -g vercel

  3. Log in to the Vercel CLI:

    • Run the following command to log in to your Vercel account:

    vercel login

    You will be directed to a web page to log in to your Vercel account.

  4. Navigate to your Next.js Project Directory:

    • Open your terminal and navigate to the root directory of your Next.js project using the cd command.

  5. Deploy the Project:

    • Once you are in your project directory, run the following command to deploy your project to Vercel:

    vercel

    When you run this command for the first time, the Vercel CLI will ask you to name your project. You can use the default name or choose your own.

  6. Configure Deployment:

    • During the deployment process, Vercel CLI will ask you to configure some options such as the deployment environment (Development, Preview, or Production). You can choose the environment that fits your project.

  7. If you got this error "Routes Manifest Could Not Be Found", please: In the Vercel dashboard, open your "Project Settings" > "Environment Variables" > Add 2 environment variables "NEXT_PUBLIC_WORDPRESS_URL" and "FAUST_SECRET_KEY" to the project and then redeploy by running the "vercel" command again.

    # Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com

# Plugin secret found in WordPress Settings->Faust
FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

  8. Wait for Deployment to Complete:

    • Vercel will automatically deploy your project. After the deployment process is complete, Vercel will provide a public URL to access your website.

Keep in mind that Vercel integrates seamlessly with Next.js projects and offers many convenient features such as automatic deployments from Git, preview environments, and performance-related features. You can also customize many deployment settings through the project management interface on the Vercel website.

II, __Steps to upload Ncmaz Faust to Vercel via a repo Github:

#Video deploy Ncmaz Faust to Vercel

  1. To deploy the project to Vercel or any nodejs hosting, you need to have your WordPress site hosted on public hosting (not hosted on localhost).

  2. Install the necessary plugins to your WordPress site as shown in this guide.

  3. You can try connecting your WordPress site and Ncmaz-Faust project locally and test it working at localhost first (copy the necessary environment variables and test the "npm run dev" command locally)

  4. The prerequisite is that you need a GitHub account - https://github.com/

  5. Let's take a closer look at GitHub and how to configure Github with your computer so you can upload sources from your computer to your GitHub Repo - https://docs.github.com/en - https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github - etc.

  6. Please create a new project on your GitHub account.

  7. As per Github's instructions, connect your this new project to the ncmaz-faust folder, then use the GitHub cli commands to push all the files to the repo. Note, create a .gitignore file and add node_modules to the .gitignore file to not push the node_modules folder.

  8. Go to the Vercel site and connect to your GitHub. Then click the "Create a new project" button.

  9. In the "Import Git Repository" section, select the repo you just created, then click the import button.

  10. Next, go to the "Configure Project" section, click on the "Environment Variables" tab, then enter the 2 necessary environment variables of the project as mentioned in step 5.

    # Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com

# Plugin secret found in WordPress Settings->Faust
FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

  11. Then click the "Deploy" button and wait for the successful result.

Previous6.1, Error when run startNext7.1, Error when deploy to Vercel using Github repo.

Last updated