microservices-demo / front-end

Front-end application for ALL the microservices

DEPRECATED: Sock Shop : A Microservice Demo Application

The application is the user-facing part of an online shop that sells socks. It is intended to aid the demonstration and testing of microservice and cloud native technologies.

It is built using Spring Boot, Go kit and Node.js and is packaged in Docker containers.

You can read more about the application design.

Deployment Platforms

The deploy folder contains scripts and instructions to provision the application onto your favourite platform.

Please let us know if there is a platform that you would like to see supported.

Bugs, Feature Requests and Contributing

We'd love to see community contributions. We like to keep it simple and use Github issues to track bugs and feature requests and pull requests to manage contributions. See the contribution information for more information.

Screenshot

Visualizing the application

Use Weave Scope or Weave Cloud to visualize the application once it's running in the selected target platform.

front-end's Issues

Add multi-step checkout

See redesign of https://github.com/microservices-demo/orders

Suppress extra order for shipping when order placed

Currently, an extra order for $4.99 is placed whenever an order is placed. So, we end up with one order that includes all items and shipping, and a second order just with shipping. I will submit a pull request that fixes that.

Add Shippable CI config to enable CI/CD demo

Requirements:

• enable Shippable CI to run on front-end repo
• ensure scripts/build.sh and push.sh work interchangeably with Travis CI or Shippable CI
• ensure existing Travis CI config is unaffected by changes

Add code to raise javascript exceptions when e.g. XHR fails with 500

I'm working on adding end-to-end tests, which also run javascript code. The headless browser that I use will throw exceptions in the tests if an exception is thrown in the javascript. So instead of/in addition to alert(), I would like to have some throws in there as well, to make the e2e tests fail if something goes wrong in javascript land.

front-end index.html not showing images and login is not functional properly

We are using kubernetes to deploy sock shop applications, and expose all applications as services.

from front-end index.html, it didn't show the complete web page with missing all the images, and when trying to login with demo/demo credential, it also say not authorized.

We also tried to clone the front-end, deployed to local IIS, it shows the same with missing image, and exact same behavior that we could right click on empty image to "saveas" to physical machine.

could some help with this, and kindly provide ideas, solutions?

Should skip deploy if code is from a fork

If creating a PR from a fork, the deployment will fail in travis because it doesn't allow forks access to secret variables:

The command "openssl aes-256-cbc -K $encrypted_a10f349f39af_key -iv $encrypted_a10f349f39af_iv -in front-end_deploy_rsa.enc -out front-end_deploy_rsa -d" failed and exited with 1 during .

Skip deployment on forked PRs.

Add OpenTracing to the front-end service

microservices-demo/microservices-demo#479

Add prometheus monitoring

Fix integration specs

Check the build history in Travis, from the number 15 all the way to the number 35.
The checkout & user login integration specs keep failing even after playing around with timeout values, etc.

new release

I am not sure if the project is still maintained, but it would be nice to release a new version with fixes to the prometheus metric names and updated npm packages.

Test Dockerfile Broken

File test/Dockerfile does not compile anymore. Node version is out of date.

Replaced this with /front-end/Dockerfile which is labeled 'production' but produces output

[email protected] start /usr/src/app
node server.js

Using local session manager
App now running in development mode on port 8080

PR builds fail due to missing credentials

The before_install clause of .travis.yml has a command that uses env vars that are not available to all users.

 - openssl aes-256-cbc -K $encrypted_a10f349f39af_key -iv $encrypted_a10f349f39af_iv -in front-end_deploy_rsa.enc -out front-end_deploy_rsa -d

It should be moved to the before_deploy clause.

Release Docker image automatically

Once Travis is done with the tests, let's push the built image to the Docker Hub

Shippable pipeline broken

The tag name change to "master-<8 char commit SHA>" introduced in Commit 55ae946 works fine and the image with the proper tag is pushed to the repository but the shippable pipeline doesn't pick it up properly. The deploy step (to test) fails when executing /home/shippable/micro/nod/stepExec/managed/deploy/run.sh and looking at the failed ECS tasks the error message is like this: "Status reason CannotPullContainerError: Error: image front-end:master.2 not found". With the new tagging "master.2" does not exist anymore and instead it should use "master-<8 char commit SHA>".

Add Travis to Slack notification

Checkout button not working

A user said to me on Slack:

I noticed a change in behavior though, if I manually log into the user as user, and try to place an order (using the Proceed to checkout button), I'm seeing I don't get an "order placed" screen. I also don't see orders in the accounts section. Is this intentional, or another bug?

I've also noticed it myself the other day.

May be we could fix it along with #24?

Having error "options.uri is a required argument" when checking out from cart

Hi,

I managed to get everything run, all functions is fine.

But when i clicked "Proceed to Checkout" from cart, it shows this error in the browser console

error: {"message":"options.uri is a required argument","error":{}} referencing client.js line 108.

When i ssh to the front-end container and check NPM and Node version,

NPM : v6.9.0
Node : v10.16.0

Thanks in advance

Split up between an actual front-end and application server

Currently the two concerns are conflated in one repository.

It's probably better to have a separate front-end that only has javascript assets that are executed by the client, and the application server that delegates requests the the end servers.

Browsing quickly through the endpoints offered in e.g. https://github.com/microservices-demo/front-end/blob/master/api/user/index.js, it might be more suitable to just handle this with a rewrite rule in the edge-router.

Consider implementing letsencrypt certificate

This project helps to obtain automatically certificates from letsencrypt
https://github.com/jetstack/kube-lego

Can't run e2e tests in docker

I realize a lot of the components of this project have not been updated recently. I was able to get everything running in K8S, but I wanted to try to run the front-end project all by itself. If I build and run locally it does work, but I am having trouble with the e2e tests using docker.

The Dockerfile references alpine linux which doesn't include bash (needed by test/e2e/runner.sh) or python (needed by some dependency in the tests I suppose like phantomjs or casper maybe).
https://github.com/microservices-demo/front-end/blob/master/test/Dockerfile

Is there another way to run the e2e tests? Thanks!

Would like customer-orders.html page modified to support fully qualified URLs

This is excerpted from microservices-demo/microservices-demo#686

I'm running the Socks Shop apps on the Apcera platform in which I currently need to use fully qualified DNS names having the form <host>.apcera.local rather than simple host names and ports different from 80 for some technical reasons which I would rather not go into here. This has caused me some problems. One of those is the following:

Line 180 of customer-orders.html page in the front-end app strips off the beginning of the full URL with selfRef.replace("http://orders", ""). But since I am using "orders.apcera.local:8080" or "169.254.0.4:10003", this leaves me with order=.apcera.local:8080/orders/<order_id> and no details appear on the customer-order.html page after clicking the View button for an order. I propose that that code be modified to selfRef.replace(/http:\/\/(.*)\/orders/, "/orders"). That would then better tolerate situations like mine where a full domain and port are used. Note that this modified code uses regex and escapes "/" where needed.

Roger Berlind
Apcera

Security - Open Redirection

The website allows open redirection. If you enter a URL of https://socks.weave.works///google.com the application redirects the user to google.com.

This can be used in a phishing attack.

I believe it is tied to how we have configured express.

npm update check failed

When using latest front-end build, the container is continually crashing:

> [email protected] start /usr/src/app
> node server.js
┌──────────────────────────────────────────────────────────┐
│                 npm update check failed                  │
│           Try running with sudo or get access            │
│           to the local update config store via           │
│ sudo chown -R $USER:$(id -gn $USER) /home/myuser/.config │
└──────────────────────────────────────────────────────────┘

Security issue: failed login exposes credentials

After a failed attempt at logging in, the application shows an alert informing that something went wrong with my login, but also it redirects me to the following URL: http://a6b0a65fc651111e69a2f0a688e86a8f-4906602.eu-west-1.elb.amazonaws.com/index.html?username=user&password=password

Remove path cardinality

There are unique IDs in prom metric labels:

We should remove those per prom best practices

Stop using javascript alert windows

Throughout the front-end, we use javascript alerts to signify error or success.

Improve by implementing a cleaner response, preferably using techniques that are idiomatic to Bootstrap.

For example, error boxes and messages within the login popup. Full screen banner confirmations for orders, etc.

Add more information to payment denied message

So that new users know that we simulate payment failure when over $100 dollars.

Error message should probably come from the payment service and we can display it in the UI.

Require Linux/ARM64 Docker Image for front-end

Hi Team,
I have been working on building Linux/ARM64 docker image for front-end.
Buildx is a utility to build and push docker images for both amd64 and arm64 in a same tag, I have used it and successfully built and pushed the image to docker hub. Please have a look at the changes here.
For using buildx we must merge both build.sh and push.sh scripts into one script and I have used below command to build and push.

$DOCKER_CMD buildx build -t ajv21/$REPO:$TAG --platform linux/arm64,linux/amd64 --push .

Do you have any plans for releasing arm64 image?
If interested, I will raise a PR.

Fix test docker-compose file

Script is missing to bring up catalogue db microservice.

Remove hard-coded keys from yaml files

We use the travis.yml file for a tutorial and tell people to update this file. Noticed that the file has hard-coded slack credentials in there, which probably shouldn't be.

Push to Amazon ECR fails in Shippable CI/build

When completing the ECS-Weave-Shippable demo located here:
https://microservices-demo.github.io/microservices-demo/deployment/ecs-weave-shippable.html

...pushes to Amazon ECR fail when the Registry is in any region other than us-east-1.

Add config setting to shippable.yml for specifying ECR region.

Produce new screenshots.

And replace all the existing ones.

docker container nodejs SyntaxError

I am running make up every container starts except the front-end.

root@myuser-ThinkPad-T480s:/home/myuser/eclipse-workspace/front-end# docker logs front-end 

> [email protected] start /usr/src/app
> node server.js

/usr/src/app/node_modules/connect-redis/node_modules/debug/src/node.js:132
	let val = process.env[key];
	^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/usr/src/app/node_modules/connect-redis/node_modules/debug/src/index.js:9:19)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

npm ERR! Linux 4.18.0-24-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.9.1
npm ERR! npm  v2.15.11
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node server.js'.
npm ERR! This is most likely a problem with the microservices-demo-front-end package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs microservices-demo-front-end
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls microservices-demo-front-end
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /usr/src/app/npm-debug.log

Removing items from cart won't work

Steps to reproduce:

1. Go to the Catalogue
2. Add any item to the cart
3. Go to the Shopping Cart
4. Click on the trash icon to remove the element from the list. Nothing happens.

Find attached log below

2016-08-23T09:06:43.144384455Z Delete item from cart: /cart/03fef6ac-1896-4ce8-bd69-b798f85c6e0b
2016-08-23T09:06:43.145806978Z ReferenceError: env is not defined
2016-08-23T09:06:43.145823425Z     at /usr/src/app/api/cart/index.js:49:45
2016-08-23T09:06:43.145830108Z     at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)
2016-08-23T09:06:43.145835840Z     at next (/usr/src/app/node_modules/express/lib/router/route.js:131:13)
2016-08-23T09:06:43.145842249Z     at Route.dispatch (/usr/src/app/node_modules/express/lib/router/route.js:112:3)
2016-08-23T09:06:43.145847973Z     at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)
2016-08-23T09:06:43.145853334Z     at /usr/src/app/node_modules/express/lib/router/index.js:277:22
2016-08-23T09:06:43.145858687Z     at param (/usr/src/app/node_modules/express/lib/router/index.js:349:14)
2016-08-23T09:06:43.145863838Z     at param (/usr/src/app/node_modules/express/lib/router/index.js:365:14)
2016-08-23T09:06:43.145869294Z     at Function.process_params (/usr/src/app/node_modules/express/lib/router/index.js:410:3)
2016-08-23T09:06:43.145874755Z     at next (/usr/src/app/node_modules/express/lib/router/index.js:271:10)

Port to React JS

Warning: this is a massive amount of work.

Use Docker version provided by Travis

It would be nice to be aligned with the rest of the projects in the microservices-demo repo and currently there is a snippet in the .travis.yml file that upgrades Docker to the latest version:

sudo apt-get install -o Dpkg::Options::="--force-confnew" -y docker-engine

But the rest of the services just use the version provided by Travis.

Hide Change buttons for shipping address and payment when customer already has them

Since the front-end code only ever pulls back the first shipping address and the first credit card (payment), it does not really make sense to let a customer who already has one of them populated to create a new one. And in fact, after examining the user-db database, it was clear to me that the Change buttons are actually adding new addresses and cards, not changing the existing ones.

It was beyond my knowledge of go and MongoDB to fix the code in the user service to actually replace the original address or card with the new ones, so I decided to change the Change buttons to Add buttons and add some simple logic to the front-end app which hides them when the user already has an address or card populated. I will submit this change in a pull request.

Error handling for (partial) backend failures

The jQuery scripts don't do proper error handling. If some backend service (like the catalogue) is offline, no error page is shown to the user, but just an empty page with clickable links that link to pages that do not work. We should allow every backend service to fail independently, without preventing the other parts to work.

Sock-shop front end - Detected task failure when scaling in Docker Swarm.

Hello all, this is my first post and I'm afraid maybe this is not the right way to post my problem so apologies if I did it on the wrong way.

I'm using a sock shop as a test bed for my scientific research. The cluster is made of 1 master and 2 workers in the Docker Swam Mode. I am monitoring the application to make changes in your behavior. If this happens, I scale the application. For clarity, I realized that when the numbers of microservices change: "occurs detected task failure in the Docker Swarm".

So, I took the front end log and you can see it here:

sockshop_front-end.4.vn6ci38c3pqk@node-09    | /usr/src/app/api/orders/index.js:67
sockshop_front-end.4.vn6ci38c3pqk@node-09    |             var customerlink = jsonBody._links.customer.href;
sockshop_front-end.4.vn6ci38c3pqk@node-09    |                                                ^
sockshop_front-end.4.vn6ci38c3pqk@node-09    | 
sockshop_front-end.4.vn6ci38c3pqk@node-09    | TypeError: Cannot read property 'customer' of undefined
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at Request._callback (/usr/src/app/api/orders/index.js:67:48)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at Request.self.callback (/usr/src/app/node_modules/request/request.js:186:22)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at Request.emit (events.js:198:13)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at Request.<anonymous> (/usr/src/app/node_modules/request/request.js:1081:10)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at Request.emit (events.js:198:13)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at IncomingMessage.<anonymous> (/usr/src/app/node_modules/request/request.js:1001:12)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at Object.onceWrapper (events.js:286:20)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at IncomingMessage.emit (events.js:203:15)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at endReadableNT (_stream_readable.js:1145:12)
sockshop_front-end.4.vn6ci38c3pqk@node-09    |     at process._tickCallback (internal/process/next_tick.js:63:19)
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! code ELIFECYCLE
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! errno 1
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! [email protected] start: `node server.js`
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! Exit status 1
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! 
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! Failed at the [email protected] start script.
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
sockshop_front-end.4.vn6ci38c3pqk@node-09    | 
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR! A complete log of this run can be found in:
sockshop_front-end.4.vn6ci38c3pqk@node-09    | npm ERR!     /home/myuser/.npm/_logs/2019-09-03T11_57_54_133Z-debug.log

This usually occurs after the scale increases or decreases. The time between the problem and the normal sockshop is 10 minutes. However, during this time the application becomes unavailable for use. All front end microservices often fail when this problem occurs.

I don't know if the information is sufficient to understand the issue, but I can investigate and submit more.

Any help is highly appreciated. Thanks all. Wellison Santos.