c8y-angular-polymer-boilerplate application without a proxy.config.json

[babupca]

Hi dwiyatci,

I have used your sample c8y-angular-polymer-boilerplate application & deployed it in the cumulocity. It is working fine. But when i upload without a proxy it does not work.

What i wanted to understand here is, can we able to upload an angular application without a proxy.config.json will it work or not. I tried c8y-angular-polymer-boilerplate project, but it was saying 404 error.

Please let me know whether it is possible to deploy a normal angular application with out proxy.config.json rewrite json file.

{ "/apps/c8yangularpolymer/": { "target": "http://localhost:4200/", "pathRewrite": { "^/apps/c8yangularpolymer": "" } }, "/!(apps)/*/": { "target": "https://glenn.cumulocity.com/", "changeOrigin": true, "secure": true, "ws": false } }

Thanks Babu Arumugam

[janhommes]

Hi Babu,

the proxy configuration is normally only used for local development and has nothing to do with deployment. Can you give us some more details?

• How do you try to deploy this repository?
• You want to run it in Cumulocity, right?
• Did you do an ng build --prod before?

Thanks Jan

[babupca]

Hi Janhommes,

- How do you try to deploy this repository? I did an ng build and zipped the content inside the dist folder which matches the bashref path for example /apps/c8yangularpolymer - You want to run it in Cumulocity, right? Yes i wanted to run inside the cumulocity. - Did you do an ng build --prod before? Yes i did the ng build --prod

Few question i wanted to ask you.

• Consider that, we have simple html angular 6 application, can we deploy in cumulocity, will it work?
• What are the basic setup required to deploy & run an simple angular 6 application with a cumulocity services ?
• After i deployed the application in cumulocity. For example consider that, /login is the main route and we land in that page. http://demo.cumulocity.com/apps/demoApp/login Begin in this location, if you refresh i get 404 error, if i'm correct, at this senario, the control is looking for index.html under login, which does not exists. how to resolve this error ?
• Since i'm new, If you have any steps for deploying and running angular 6 application, please let us know

Thanks Babu Arumugam

[janhommes]

Okay, let me first answer your last question:

Since i'm new, If you have any steps for deploying and running angular 6 application, please let us know

The angular 6+ Web SDK is still under development and we will later allow deploying angular applications via c8y deploy. Right now that does not work, but you should be able to deploy the application the following way:

1. run ng build --prod
2. open the dist folder and change the base href to empty href=""
3. create a zip where the index.html is placed as root of that zip. Name that zip like you want your route to look like (e.g. my-app)
4. upload the zip via UI own application -> new web application -> After that your application should be available under the route of the zip name: e.g. apps/my-app/index.html

What are the basic setup required to deploy & run a simple angular 6 application with a cumulocity services ?

That is smth that is still under development but already possible. This repository gives an example, how to get the authentication. Because that is basically it, you need to authenticate the user against the API and then can use the services. Also the @c8y/client on npm should give you some examples on how to use them. But as said, the full integration into angular6 is not done yet (we plan to release a stable version on npm under the name @c8y/data soon).

And you first question:

Consider that, we have simple html angular 6 application, can we deploy in cumulocity, will it work?

Yes sure, you can deploy any html+js to cumulocity with the approach above!

Regards Jan

[babupca]

Thanks @janhommes, for the Detail explanation. It is really helpful for development process.

I would like to ask one more question.

After i deployed the application in cumulocity. For example consider that, /login is the main route and we land in that page. http://demo.cumulocity.com/apps/demoApp/login Being in this location, if you refresh i get 404 error, if i'm correct, at this senario, the control is looking for index.html under login, which does not exists. how to resolve this error ?

[janhommes]

You simply need to change the push stat of the application. Our server otherwise tries to resolve the route. More informations you can find here: https://angular.io/guide/router#browser-url-styles

You can do that by importing the module in the following way:

RouterModule.forRoot(routes, { useHash: true })

@dwiyatci we might need to change that here as well.

[babupca]

@janhommes @dwiyatci ,

As per my knowledge, hosting in cumulocity means, its basically a web-server right, so when we refresh every time, the request goes to the server.

So until & unless the web server finds the index.html (where all routes are handled), we should always get the 404 error.

Please correct me, if i'm saying wrong. So basically if we place .htaccess file then with index.html as the rewrite, then every time when we refresh, the server finds the index.html and from there it can find us the exact route, where we are currently present.

So my doubt here is that is, if i place a .htacess file inside the folder which i'm zipping and uploading to the cumulocity, whether it will work or not ?

or if not could you please tell me some other solution if you have any ?

RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]

There are more examples for other server-types in below link. Reference: https://tylermcginnis.com/react-router-cannot-get-url-refresh/

[janhommes]

@babupca sadly we are not using apache web server and therefore .htaccess is not an option for us. But thanks for pointing us to that, maybe we can implement smth like that someday. Have you tried the suggested useHash: true flag on the RouterModule? I guess with that the issue is gone.

[dwiyatci]

@janhommes I've just applied the fix you suggested for the location (routing) strategy.

@babupca Please update your local repo using the latest changes. Also, for the sake of improving the production build: were you really able to do the build by executing ng build --prod without any errors thrown in your console? Because it is not the case for me at the moment.

[babupca]

@dwiyatci , Now the routing strategy is working without any issue. Regarding the ng build --prod, i have not tried yet.

I will try it and update you. Thank you both (@janhommes & @dwiyatci ) for you help.