Web

Local Environment variables

Kickstart is built on top of Next.js and Next.js read the environment variables via web/.env.local during local development.

Below is the sample template inside web/.env.local file.

NEXT_PUBLIC_API_URL=http://localhost:3333
NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_DATABASE_URL=YOUR_FIREBASE_DATABASE_URL
NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
NEXT_PUBLIC_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
NEXT_PUBLIC_SENTRY=YOUR_SENTRY_KEY
NEXT_PUBLIC_FATHOM_TRACKING_CODE=YOUR_FATHOM_TRACKING_CODE
NEXT_PUBLIC_SITE_URL=YOUR_SITE_URL
NEXT_PUBLIC_PRISMIC_API_TOKEN=YOUR_PRISMIC_API_TOKEN
NEXT_PUBLIC_PRISMIC_REPOSITORY_NAME=YOUR_PRISMIC_REPOSITORY_NAME
NEXT_PUBLIC_PRISMIC_REPOSITORY_LOCALE=YOUR_PRISMIC_REPOSITORY_LOCALE
NEXT_PUBLIC_CONVERTKIT_SCRIPT=YOUR_CONVERTKIT_SCRIPT_SOURCE
NEXT_PUBLIC_CONVERTKIT_UID=YOUR_CONVERTKIT_DATA_UID

Kickstart Config File

web/kickstart.config.ts is the main config file to set up your kickstart app.

  • name - Application name, can't contain space
  • publicUrl - Public domain url for this web application
  • seo - Default SEO setting
  • navMenu - Header navbar contains the menu, link setting
  • accountMenu - Login dropdown contains the menu, link setting
  • problems - Landing page component
  • features - Landing page component
  • pricing - Landing page component
  • pricingPlans - Landing page component
  • faqs - Landing page component
  • footer - Landing page component
  • sidebar - Dashboard sidebar contains the menu, link setting
  • auth - Setup redirect to url after login authentication

NPM Custom Scripts

Kickstart Web comes with several handly scripts for development or production.

npm run build - Builds the production application in the .next folder
npm run clean - Remove the compiled js files, node_modules, and package/
npm run dev - Running the Next app & server in development
npm run fix - Fix the code syntax and issues
npm run sort - Sort the package.json setting
npm run start - Running the Next app & server in production

Start Next app & server in local development

Install dependency packages first

npm install

Start Next app & server in local development

npm run dev

Setup Git Repo

Setup the local git repo

cd api
git init
git add .
git commit -m "First commit"

Setup Github Repo

Login to Github and create a new repo.

Go back to the terminal to add GitHub repo to the origin and push the code to Github repo.

git remote add origin https://github.com/timshingyu/kickstart-demo-web.git
git push -u origin master