docs/code-samples/eventing/bookstore-sample-app/start/frontend
Leo Li 638cbfbd20
Sample App: Code Clean up (#5948)
* Fix the content in the bad word filter knative function code

* Remove the unused import

* Adding the action for the button in the front end, so that the new review comment can be delivered to the review service.

* enable cors

* Install cors

* fix: configure node.js so that it won't be restricted by CORS policy

* fix: add hardcoded the address for the review service

* feat: the yaml files to run the front end in the k8s cluster

* fix: fix the wrong command in the docker file

* fix: change the naming convention

* fix: update knative slack sink to use the value from secret

* fix: change the name for the front end application package

* fix: update the event type for the outputs of the ML workflows

* fix: create the sequence and trigger for the ML workflow

* fix: change the input key to reviewText

* fix: change the event type for the input cloudevent

* fix: set up the trigger that will filter out the bad comment and send them to the event display

* feat: add the loading state for the front end

* feat: expose the postgresql service as headless service, so we can use the statefulset's name as the host url

* fix: format fix, and also make sure the sentiment analysis result is all lower case

* feat: update to use websocket for the comment area

* feat: add Kuack to the bookstore as advised by UX WG

* feat: add kuack to the bookstore

* feat: add the new timing format and also set up the status badge

* feat: make sure all the ML output are lower case

* feat: styling change

* feat: add the database insertion logic

* fix: update to use kafka broker

* feat: add the quickstart setup script

* fix: use deployment instead of knative service

* fix: Send the reply as cloud event back to broker

* fix: Go back to use MT broker

* fix: Restructure the code

* fix: Restructure the code

* Save progress: TODO: will confirm whether use the pre-built images or build the images locally

* fix: change the naming of the files

* fix: cut the pulling rate of the websocket

* fix: front end clean up and change the error message

* fix: change the port to 8080

* fix: fix the setup script

* fix: update the front end port to use 80 as the nodeserver, as trigger default to use 80, instead of 8080.

* fix: trigger default to use 80, and cannot use customized port 8080.

* fix: renaming and use the pre-built image

* fix: update the naming and add comments to the yaml

* feat: move the code to solution folder

* feat: add the start folder

* fix: the deployment file is not in the /start folder

* fix: shorten the bad word filter name

* fix: shorten the bad word filter name

* fix: delete the deployment files for ML workflows

* fix: add the port 8080

* fix: use Service instead of deployment when setting up temp trigger

* fix: add the missing deployment yaml for /start

* fix: add the shortcut script in the /start folder

* fix: change the favicon to kuack to improve the reader's experience
2024-05-29 13:48:17 +00:00
..
app Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
client Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
config Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
public/images Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
.eslintrc.json Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
.gitignore Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
Dockerfile Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
README.md Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
next.config.mjs Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
package-lock.json Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
package.json Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
postcss.config.js Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
tailwind.config.ts Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00
tsconfig.json Sample App: Code Clean up (#5948) 2024-05-29 13:48:17 +00:00

README.md

Getting Started

This app use Next.js and TailwindCSS as main packages. Use this command to install all dependencies:

npm install

To run application, use:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Project Structures

  • app/: Contains the main layout, page, and global styling.
  • client/: Contains components and pages used in the application.
  • public/images/: Contains image files.
  • next-env.d.ts, next.config.mjs, package-lock.json, package.json, postcss.config.js, tailwind.config.js, tsconfig.json: Configuration files for Next.js, Tailwind CSS, and TypeScript.

Containerize Application

This repository contains a Next.js application that utilizes next-themes and Tailwind CSS. This README file provides instructions on how to containerize the application using Docker.

Prerequisites

  • Docker installed on your machine. You can download and install Docker from here.

Dockerization Steps

  1. Clone this repository to your local machine.
  2. Navigate to the root directory of the cloned repository.

Building the Docker Image

Run the following command to build the Docker image:

docker build -t frontend .

Running the Docker Container

Once the image is built, you can run a container using the following command:

docker run -d -p 3000:3000 frontend