Generating a Frontend Demo

Cool, You now have infra and core services up and running! For front-end, CX Cloud CLI allows you to generate a front-end demo to test the concept with end-to-end functionality. Currently, we provide Angular 7 demo. React is coming soon.

Front-end generation

You start by creating a new package repository for the service in git monorepo, named for example package-frontend. Then navigate to this folder and start front-end demo generation by running the following commands:

$ cd package-frontend
$ cxcloud generate demo

You will go through a set of simple questions and receive an end-to-end working demo.

Configuration

By default, the generated demo uses our live test API including end points with pre-filled sets of data for Commerce, Content and Search services.

In order to enable the frontend demo to work with the APIs you have generated and deployed, configuration files need to be modified. Configuration files can be found in this project directory /src/environments/.

To connect with new APIs, change the value of apiUrl for each service (notice that environments files should be modified depending on the used environment). If frontend and APIs running on the same domain, it is enough to use only relative paths to the APIs:

export const environment = {
  production: false,
  siteName: "CXCloud DEV",
  commerce: {
    apiUrl: "/api/service-commerce/v1",
    indexName: "dev_COMMERCE"
  },
  content: {
    apiUrl: "/api/service-content/v1",
    indexName: "dev_CONTENT"
  },
  auth: {
    apiUrl: "/api/service-auth/v1"
  },
  search: {
    apiUrl: "/api/service-search/v1"
  }
};

Local test

In case of Angular demo, to explore it, from inside of the project folder you should run the following command:

$ npm run dev

By default, your demo will be available at http://localhost:4200/ but check the console logs.

Deployment

CI/CD pipeline handles the deployment of microservices within the monorepo. Therefore, CI/CD pipeline should be set up and configured prior deployment of the services. More information about CI/CD pipeline configuration and monorepo settings for deployment can be found here.

Routing

After deployment, you can make your service available to the world using a Routing Manifest.

Commit

As a final step, add git remote origin corresponding to your monorepo and commit changes to your Github repository by running the following commands:

$ git remote add origin https://github.com/user/my-monorepo.git
$ git add .
$ git commit -m "initial commit"
$ git push