hydratim / sample-app

Sample frontend that creates and retrieves product inventory listings.

Home Page:https://docs.humanitec.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Demo product frontend

Overview

This is a simple frontend that displays a list of products and lets you add more. Together with product-be, its purpose is to demonstrate how to deploy a simple app on the Humanitec internal developer platform.

The frontend consists of a client package and a server package. The client package is a React app and is served from /. The server package handles API requests from the client on the /api endpoint.

Diagram: Architecture of the demo products inventory app

Configuration

You can configure the product frontend with the following environment variables:

Variable Description
PUBLIC_SERVER_URL The URL for accessing the product-be service.
PORT The port number where the server should be exposed. Default is 8080.

Running locally (React dev server)

You can run the product-fe package in development mode by executing the following two commands in separate terminal windows:

# Start the server
$ cd server
$ PUBLIC_SERVER_URL="http://localhost:8080" PORT=3001 node bin/www
# Start the React dev server
$ cd client
$ npm start

This assumes that the product-be is running on localhost on port 8080. The product-fe server will be running on port 3001, and the React dev server will be running on port 3000.

About

Sample frontend that creates and retrieves product inventory listings.

https://docs.humanitec.com


Languages

Language:JavaScript 71.7%Language:CSS 15.5%Language:HTML 7.8%Language:Dockerfile 4.9%