Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 43 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,58 +1,65 @@
# Build a Fynd Extension using Node.js + Vue.js(vue3)
![Java](https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=openjdk&logoColor=white)
![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)

# Build a Fynd Extension using Java + VueJS
[![Coverage Status][coveralls-badge]]([coveralls-url])

## Getting Started
### Built With
![Vue.js](https://img.shields.io/badge/Vue-6DA55F?style=for-the-badge&logo=react&logoColor=white)
![Spring](https://img.shields.io/badge/spring-%236DB33F.svg?style=for-the-badge&logo=spring&logoColor=white)
![Redis](https://img.shields.io/badge/redis-%23DD0031.svg?style=for-the-badge&logo=redis&logoColor=white)
![Java](https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=openjdk&logoColor=white)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vivek-gofynd Should we add node/npm here?

This project outlines the development process for a Fynd extension that displays product listings for a company and its associated applications. By following this guide, you'll be able to set up the development environment, build the extension locally, and understand the testing procedures.
[coveralls-badge]: https://coveralls.io/repos/github/gofynd/example-extension-java-vue/badge.svg?branch=main&&kill_cache=1
[coveralls-url]: https://coveralls.io/github/gofynd/example-extension-java-vue?branch=main

## Quick start
### Prerequisites
* You have fdk-cli installed globally [install](https://github.com/gofynd/fdk-cli)
* You have created a [partner account](https://partners.fynd.com).
* You have created a [development account](https://partners.fynd.com/help/docs/partners/testing-extension/development-acc#create-development-account) and [populated test data](https://partners.fynd.com/help/docs/partners/testing-extension/development-acc#populate-test-data) in it.

* List of mandatory Services to be downloaded on your System
Before you start, make sure you have the following tools and accounts:

1. [Java 14](https://www.java.com/en/) or higher
2. [Maven](https://maven.apache.org/download.cgi)
3. [Redis](https://redis.io)
4. [NodeJS 16](https://docs.npmjs.com/) or higher


## Install Template Locally
To initialize your extension template locally, run the following command:
1. [FDK CLI](https://github.com/gofynd/fdk-cli): A command-line interface for Fynd extensions.
2. [Java 14 or higher](https://www.java.com/en/): Required to run and build the Java backend.
3. [Maven](https://maven.apache.org/download.cgi): A build tool for managing project dependencies and building the Java application.
4. [Redis](https://redis.io): An in-memory data structure store used as a database, cache, and message broker.

## Getting Started
* Initialize the template
```shell
fdk extension init --template java-vue
$ fdk extension init --template java-vue
```
Enter your preferred extension name and type, and you are all set.

## Local Development
To start local development, execute the following command:
* Start a preview in platform to open a tunnel to FCP (Fynd Commerce Platform)
```shell
fdk extension preview
$ fdk extension preview
```
This command will provide a partner’s panel URL where you can interact with your extension. For more information, please read this [guide](https://github.com/gofynd/fdk-cli?tab=readme-ov-file#extension-commands).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@girishbharambe Any reason for removing cli readme ref?
FYI: @vivek-gofynd



## Build for production
Build frontend.

Using yarn:
* Build front-end files
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@girishbharambe build section could be below "Run the application" section.
Why we have added everything in in getting started? Should we have separate section for init & preview, Build Instructions and then Docker Instructions.
FYI: @vivek-gofynd

```shell
cd frontend && yarn run build
# Using yarn
$ cd frontend && yarn run build
# Using npm
$ cd frontend && npm run build
```
Using npm:
```shell
cd frontend && npm run build

* Run the application
```bash
$ mvn clean install
$ mvn spring-boot:run
```

You can visit the URL from `preview` command or [http://localhost:8080/](http://localhost:8080/) to check your extension.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@girishbharambe Here, we have new functionality of preview command. Preview command internally install and start server. It will also update base URL. Please check new functionality and update the instructions.
FYI: @vivek-gofynd


### Docker Instructions

To run the application using Docker, follow these steps:

```shell
# Build the Docker image
$ docker build -t my-java-react-app .
# Run the Docker container
$ docker run -p 8080:8080 my-java-react-app
```

### Tests
Use the Below Controller to Test the Application :

* HealthController : Uses the Actuator Health points to check if all the resources are stable and active
* [HealthController](/src/main/java/com/fynd/example/java/controller/HealthController.java) : Uses the Actuator Health points to check if all the resources are stable and active

http://localhost:8080/_heathz
http://localhost:8080/_healthz