Openfront

Shopify alternative built on Next.js and Keystone.js

Running locally

To get Openfront running on your local machine:

Clone the repo

git clone https://github.com/openshiporg/openfront

Rename example.env to .env

//.env
FRONTEND_URL=http://localhost:3000
DATABASE_URL=postgresql://postgres:example@url:3000/postgres
SESSION_SECRET=please_change_me

Be sure to replace DATABASE_URL with a postgres connection string.

You can run postgres locally or get a database online.

Railway offers a free, temporary postgres database.

Start the application

Run the following commands start up Openfront:

$ cd openfront
$ yarn install
$ yarn dev

Storefront: http://localhost:3000

Once the application is running, go to localhost:3000. The storefront will appear here when ready. For now, use it to navigate to the GraphQL Playground and Admin UI.

GraphQL Playground: http://localhost:3000/api/graphql

Use the playground to build and run queries/mutations against the API.

Keystone CMS: http://localhost:3000/dashboard

Openfront uses Keystone.js. Openfront mounts the Keystone Admin UI to /dashboard. It's a great way to see and interact with your database.

Deployment

Openfront uses Next.js, so naturally, it can be hosted anywhere that supports Node.js. Openfront also requires a postgres database.

1-Click Deployment

These deployment services offer Node.js and postgres databases so Openfront can be deployed in 1-click.

Railway

Render

Next.js Deployment

To deploy on platforms that don't support databases like Netlify and Vercel, you'll need to pass a postgres connection string as the DATABASE_URL variable.

Vercel

Netlify

Go to site settings > build & deploy > environment and add these variables:

  FRONTEND_URL=http://localhost:3000
  DATABASE_URL=postgresql://postgres:example@url:3000/postgres
  SESSION_SECRET=OH_PLEASE_PLEASE_CHANGE_ME

Replace DATABASE_URL with a postgres database connection string and FRONTEND_URL with the url ending in netlify.app. Redeploy the site.

Credits

Openfront wouldn't be here without these great projects

• Next.js
• Keystone.js
• Prisma