vue-app | vue-app | State Container library

Actually I didn't post entire code as I thought it wasn't necessary.

But service was also calling back the class where service was imported.

That is because VueJS uses virtual DOM and it updates the actual DOM in batches: what you're providing your app is an inline template, which VueJS will parse, interpolate, and rewrite it to the DOM. Therefore if you initialise ChartJS first, it will lose the reference to the DOM element (it is either gone because of a race condition with VueJS, or it is quickly overwritten by Vue once it computes virtual DOM and outputs it to the actual DOM).

The reason why changing your markup worked is because now the element that ChartJS uses to mount and render the chart is no longer erased or manipulated by VueJS, as it is no longer part of the Vue app but resides outside of it in regular DOM.

In fact, the most parsimonious solution is to simply instantiate ChartJS in the mounted hook of your VueJS app, and after waiting for the DOM to be ready, i.e.:

How do you render the component and pass the prop to the component on first render?

Whether you use PHP templates or plain HTML, you still have to initialize the Vue app somehow because otherwise how would the browser know how to load a Vue component?

You either did:

You can also set a unique value for option equal to the array index. Example below:

You need to wait for response, try:

As I said here and here, the common approach in an enterprise architecture is to have one app by repository and server.

Imagine that your microservice (json) process needs to have more ram because handle heavy operations and since your web is an spa, does not need anything because it is just static files after npm run build. In this case, depending of the infrastructure, you could scale vertically/horizontally every artifact (api and web) easily. If you have several process in the same server, you would be backing up a little to the monolithic architecture. This is just one of the several advantages like:

• https://michaelwashburnjr.com/blog/4-reasons-web-app-separated-frontend-backend
• https://softwareengineering.stackexchange.com/a/299550/204271

In heroku and any platform, applications has its own port. Also you will have noticed that in your developer laptop:

• vue app runs at : http://localhost:8080
• api mock at http://localhost:3000/posts/1

As you can see , you have two apps here, each one with its own port. In the future, each one will have its own domain : acme.com and acme-api.com

The usage of json-server to publish a single file (db.json) as a microservice or rest api is just for testing or poc purposes. It would be crazy to use concurrently in a real application for real users.

I used this on early development stage, when the api/microservice does not exist yet.

When api is ready to use and has its own http domain (http://acme-api.com) served on its own server, I set this new url on my web.

If you don't want to complicate and be prepared for a real enterprise deployment, you should create two different app on your heroku account

• acme-web with your vue code. This usually needs to have the npm run dev, npm run build and npm run start. Your start script should be something like this: "start": "vue-cli-service serve --mode production"
• acme-api with your real api/microservice source code(database connection and other features). Also in early stage (api does not exist yet) you could put here your db.json and you start script should look like this: "start": "json-server --watch db.json"

Anyway, if you want or need to have all (web+api) in one server or container, you should use another provider like aws, gcp, azure, etc. On that provider your concurrently command will work.

On heroku, you can't run two diferent web process on the same dyno.

As some framework does like MEAN, MERN & MEVN and other modern monolithics, you could use an express server to serve your api and your web.

This app should look like this:

Please advise nginx docker image docs in the Using environment variables in nginx configuration section of the page.

The way the nginx docker image deals with environment variables is injecting them in runtime using the configs in the linked page

if you are getting error related to array_merge

check pusher/pusher-php-server version

using cmd composer show

if it is not 4.1 run cmd composer require pusher/pusher-php-server ^4.1

1. Main problem is you are passing array into addRoute
2. Second problem is missing / at the beginning of the path (without it, you will get a "Non-nested routes must include a leading slash character" error)
3. Finally use $router.push to go to the new route