I have EXTJS 6 app packed in web app (.war) deployed on jetty server behind apache proxy
Proxy is configured to proxy requests to my jetty node server
example:
https://my.domain/sencha << internet addess
is proxied to internal jetty server
http://jetty-node-1/my-sencha-webbapp << node address
Problem:
I don't know where to set /sencha uri in my extjs app as base path so that everything is loaded relatively from /sencha path instead of / path
Regards
Armando
I've solved it.
In app.json I added this setting
"base": "${app.dir}/sencha/"
Now it knows all about the relative path.
Snippet from app.json:
"production": {
"output": {
"appCache": {
"enable": true,
"path": "cache.appcache"
},
"base": "${app.dir}/sencha/"
},
}
please note that this creates sub folder ${app.dir}/sencha in which your production build will be.
Regards
Armando
Related
I'm building aws cloud with Terraform. There is a problem that is not solved, so I leave a question like this.
Currently, the front-end (react) and the back-end (fastapi) are ecs fargate, each creating a cluster on a private subnet separately.
Traffic coming from an Internet gateway is designed to enter the front-end through a load balancer and then, distribute the traffic back to the back-end through a load balancer in a private subnet.
So I applied the domain of the load balancer to the host at the front-end, and the domain of the load balancer was specified in the environment variable of the ecs task at the front end.
but The front-end fails to send a normal request to the back-end. It occurs 405 errors.
Below is the fron-end ecs task definition in terraform.
resource "aws_ecs_task_definition" "react" {
family = "react"
network_mode = "awsvpc"
requires_compatibilities = ["FARGATE"]
cpu = 1024
memory = 4096
execution_role_arn = "${aws_iam_role.ecsTaskExecutionRole.arn}"
task_role_arn = "${aws_iam_role.ecs_execution_role.arn}"
container_definitions = <<DEFINITION
[
{
"image": "<image pulled from ecs>",
"cpu": 1024,
"memory": 4096,
"name": "react",
"networkMode": "awsvpc",
"essential": true,
"portMappings": [
{
"containerPort": 80,
"hostPort": 80
}
],
"environment": [
{
"name": "REACT_APP_HOST",
"value": ${jsonencode(local.domain)}
}
]
}
]
DEFINITION
}
local.domain is specified like this.
locals {
domain = "${var.var_http}${aws_lb.fastapi.dns_name}"
}
and I tried..
When I connect the domain of the load balancer to the local front-end, I have confirmed that it works normally.
When setting up the domain of react, I thought react might not have read the domain of the load balancer, so I installed env-cmd as npm in the docker file I uploaded with react in ecr, and I installed scripts as "build": "env-cmd -f.I tried to modify to env react-scripts build", but an error occurred in the docker file.
thank you for reading!
React is a web browser javascript framework. React runs in the browser. Your front-end Fargate server isn't doing anything but serving up static files to web browsers. The code is running in each user's web browser. The API requests to the back end are not coming from the front-end Fargate server, they are coming from each user's laptop/desktop computer. In order for that code, running in people's web browsers, to access your back-end API, the API has to be available publicly on the Internet.
Step 1
sencha -sdk C:/Users/lperepol/Downloads/SenchaEnterpriseExtJS/Unzip_7.xx/ext-7.3.1/ext-7.3.1 generate app -ext CDW ./CDW
Step 2
sencha app build
Then move the production folder to Web Server. App displays fine.
Step 3
Add a chart.
sencha app watch -- Chart displays fine.
Step 4
sencha app build
Then move the production folder to Web Server. App does not display web server error.
How do I get charts to display on a production web server? In development, everything works but not when moved to a Web Server.
Thank you for the response that led me in the right direction! Adding items to the requires array in the chart view solved the issue. The charts are displaying now on a remote web server --> CDW
requires: [
'Ext.chart.CartesianChart',
'Ext.chart.axis.Category3D',
'Ext.chart.axis.Numeric3D',
'Ext.chart.grid.HorizontalGrid3D',
'Ext.chart.grid.VerticalGrid3D'
'Ext.chart.interactions.ItemHighlight',
'Ext.chart.interactions.PanZoom',
'Ext.chart.series.Bar3D',
'Ext.chart.series.Line',
'Ext.chart.theme.*',
'Ext.draw.modifier.Highlight',
],
make sure in your app.json you have:
Charts in the requires section.
"requires": [
"exporter#7.3.1",
"calendar#7.3.1",
"charts#7.3.1",
"font-awesome"
],
a manifest defined in the bootstrap property.
The bootstrap section should be there but you may have to add the manifest property.
"bootstrap": {
"base": "${app.dir}",
"manifest": {
"path": "bootstrap.json",
"exclude": ""
},
"microloader": "bootstrap.js",
"css": "bootstrap.css"
},
I have developed angular application in my local machine.
In my application I'm making the rest call to get the data.
So in my local machine I'm getting the CORS issue.
But when I deploy this angular application on the same server with same port
i.e. both rest api and my application are on same server with same port.
REST API:- http://domain:port/api
App URL:- http://domain:port/home
Then also I'm getting the CORS issue while making the call to rest api.
Please explain me how to resolve this.
Thanks,
Suresh
On your local machine you can create a proxy to redirect calls to the api to be on the same port as your angular app. Create a file called proxy.conf.json and put the following in it changing apiport to your apis port number.
{
"/api/*": {
"target": "http://localhost:apiport/api/",
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true,
"secure": false,
"logLevel": "debug"
}
}
and then start the app with
ng serve --proxy-config proxy.config.json
or add the following to the scripts section of your package.json file
"localstart": "ng serve --proxy-config proxy.config.json",
and start with
npm run localstart
I am developing app with react-redux. And I am using the quick development, which always build my client at localhost:3000
I have my api written in php, and its on localhost:80.
So its cross-origin, but on production its not. So I would like to develop it while being on the same domain+port. But I have no clue how to set it up.
I am using MAMP - Apache for the php and yarn (create-react-app) for react.
So it can't run at the same port.
Anyone any ideas how to solve this problem?
When I use "yarn start" I can edit my react code and its compiled upon save and I can see the edited code within seconds at the localhost:3000
Is it possible to "deploy" it in this "developer" mode into some folder, where I could possibly setup a server using actually MAMP ( apache ) ?
Thanks in advance
In case if for client side of your application you have use create-react-app, you can add a proxy configuration in package.json file.
"proxy": {
"/apiRoute": {
"target": "http://localhost:80"
},
},
So all your request will be redirected to port 80(PHP) from client side.
The /apiRoute is the name of the routes (GET, POST, PUT..) you had defined in PHP. So i would suggest to make a pattern in PHP for all routes like /api/**, so in package.json instead of adding all routes, you can something like below
"proxy": {
"/api/*": {
"target": "http://localhost:80"
},
},
We're using custom domains on firebase hosting: our app, served from index.html, runs nicely on app.example.com. We've also connected www.example.com, which serves the app as well.
The problem is: on www.example.com I want to be able to host a simple static page. Is there a way to configure this in the rewrites? We can easily output an extra html file in the deploy, next to index.html.
Any ideas?
Our firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Firebase Hosting does not support multiple sites in a single project at this time. However, you can create a second project for your static landing page and deploy it there, connecting it to the www domain while leaving the app domain connected to the other project.
As of August of 2018, Firebase Hosting supports multiple sites on a single project! See the docs for more info.