Skip to content

Local Setup

Jump to bottom
Alexandra Swart edited this page Mar 5, 2019 · 1 revision

Server setup

Install dependencies

# ./server/
$ npm install

Create .env file

Create an .env file in the server directory which will be updated during setup. See also ./server/.env_example.

# ./server/.env
NODE_ENV=development
APP_SECRET=my-super-secret
HOST=http://localhost
PORT=4242
DEV_CLIENT_URL=http://localhost:7272
PROD_CLIENT_URL=
PROD_SERVER_URL=
CLOUDINARY_API_KEY=
CLOUDINARY_PRESET=nextstore
CLOUDINARY_SECRET=
PRISMA_DEV_ENDPOINT=
PRISMA_PROD_ENDPOINT=
PRISMA_SECRET=
STRIPE_SECRET=
MAILTRAP_HOST=
MAILTRAP_PORT=
MAILTRAP_USER=
MAILTRAP_PASS=
POSTMARK_HOST=
POSTMARK_PORT=
POSTMARK_USER=
POSTMARK_PASS=

Setup Cloudinary

  1. Create and access your Cloudinary account.
  2. Grab your API key (CLOUDINARY_API_KEY) and API secret (CLOUDINARY_SECRET) from the main console page.
  3. Create a folder where uploads will be stored.
  4. Add an upload preset to set the dimensions uploaded files will be transformed into. (CLOUDINARY_PRESET)

Setup MailTrap

  1. Create or access your MailTrap account.
  2. Create a demo inbox and check the SMTP Settings page for the Host, Port, Username, and Password credentials to be used in your env file.(MAILTRAP_HOST, MAILTRAP_PORT, MAILTRAP_USER, MAILTRAP_PASS)

(Postmark setup is unnecessary for local)

Setup Prisma

  1. Create or access your Prisma account.
  2. Globally install prisma then login to prisma in the terminal.
# ./server/
$ npm install -g prisma
$ prisma login
  1. Set up Prisma by using the prisma-cli in the terminal to generate your endpoint.
# ./server/
$ prisma init
# ? Set up a new Prisma server or deploy to an existing server?
> Demo server
# ? Choose the region of your demo server
# (for me it was 'answart/demo-us1')
> PRISMA-WORKSPACE/PRISMA-SERVER
# ? Choose a name for your service
> next-store-dev
# ? Choose a name for your stage (dev)
> dev
# ? Select the programming language for the generated Prisma client
> Don\'t generate

It will generate the files datamodel.graphql and prisma.yml.

  1. Place the endpoint url from the generated prisma.yml as the PRISMA_DEV_ENDPOINT in your .env file. Delete the generated files as the endpoint is now in the .env file and generated files are already configured in the prisma directory.

  2. Run the deploy script. Any changes from this point on can be deployed with the following script:

$ npm run deploy:dev

Setup Stripe

TODO

Client setup

Install dependencies

# ./client/
$ npm install

Update config file variables with the environment variables set in ./server/.env with the same name.

# ./client/config.js
# ...
export const PROD_SERVER_URL = 'PUTHERE';
export const CLOUDINARY_API_KEY = 'PUTHERE';
export const CLOUDINARY_PRESET = 'PUTHERE';
export const CLOUDINARY_SECRET = 'PUTHERE';
export const STRIPE_API_KEY = 'PUTHERE';
# ...

Start App

Start server app locally

# ./server/
$ npm run start:dev

Start client app locally (in separate tab)

# ./client/
$ npm run start:dev

View app at localhost:7272 when both client and server are running.

Clone this wiki locally