Skip to main content

Initial setup

What you'll learn​

In this tutorial series, we'll learn how to do the following tasks:

  • Create an Extension UI using nitrozen-react.
  • Build the API layer of your app.
  • Integrate MongoDB database.

Prerequisites​

Before you create an extension, ensure that you have the following:

tip

Before starting with the this tutorial series, make sure to complete created boilerplate tutorial.

Make sure to select Java + React.js as a development language.

Step 1: initial development setup​

Login in to FDK-CLI using command below:

note

If logging in the previous step has been completed, there is no need to log in again. This step can be skipped.

fdk login

Verify if you are logged in or not by running the following command:

fdk user

We'll require some products in our development account for testing. Run the following command to create a few test products.

fdk populate

Step 2: update configs​

Add port and add MongoDB local URL in /src/main/resources/application.yml file

config:
    mongodb-uri: "mongodb://localhost:27017/product-highlight"
    proxy-attach-path: "product-highlights"

Step 3: Start your development server​

Run following fdk command to get the extension preview url

fdk extension preview-url
info

fdk extension preview-url command internally create a tunnel between your localhost server and public URL. This allows you to access your extension from any device for testing and development purposes.

note

Don't close terminal window in which the above command is run. Run commands mentioned in this tutorial series in the new terminal window and keep extension preview-url command running in terminal.

Build extension front end from /app directory

cd app
npm run build

Start extension backend server

mvn clean
mvn package
mvn spring-boot:run
note

Don't forget to repeat the above steps every time changes are made to the Extension code.

Step 4: Copy Preview URL and paste it into the browser to Install/Launch Extension​

extension_launch


Was this section helpful?