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.
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.
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"
}
};
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.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.
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
Last modified 4yr ago