dawudr / fnf-legal-app

Front end Next Js React app to render data returned from Strapi Api.

FNF Legal App

Front end app to render data returned from Strapi Api.

Home Page

Journeys

Steps

Quickstart

Make sure that the local Strapi server is still running at http://localhost:1337. Inside the Next.js app directory, run:

npm install
npm run dev

App will run on http://localhost:3000/

How to setup

Step 1. Set up Strapi locally

Follow the instructions on this page to create a Strapi project locally.

npx create-strapi-app my-project --quickstart
npm run develop

This will open http://localhost:1337/ and prompt you to create an admin user.

Step 2. Install GraphQL for Strapi

Inside the Strapi directory, stop the server, install GraphQL, and restart the server:

npm run strapi install graphql

npm run develop

Step 3. Set up environment variables

While the Strapi server is running, open a new terminal and cd into the Next.js app directory you created earlier.

cd fnf-legal-app

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on .env.local:

• STRAPI_PREVIEW_SECRET can be any random string (but avoid spaces), like MY_SECRET - this is used for Preview Mode.
• NEXT_PUBLIC_STRAPI_API_URL should be set as http://localhost:1337 (no trailing slash).

Step 4. Run Next.js in development mode

Make sure that the local Strapi server is still running at http://localhost:1337. Inside the Next.js app directory, run:

npm install
npm run dev

Step 5. Deploy on Vercel (Optional)

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.