I want to use socket.io in my sencha touch application
I added socket.io in my app.json js array :
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "lib/socket.io.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
here is where I want to create var socket :
var socket = io.connect('http://localhost:3000');
when I open index.html in browser I get this error :
ReferenceError: Can't find variable: io
how can I fix my application?
Related
I've been reading a bit about it but I don't know how to configure correctly to convert my reactjs website to PWA
I've created a workbox-config.js file at the root of my project, and a manifest.json file at the top of my App.js, but I don't know what else to do
The content of the workbox-config.js file is:
module.exports = {
"globDirectory": "dist/",
"globPatterns": [
"**/*.{html,js,css,svg,png,jpg,jpeg,gif,webp}"
],
"swDest": "dist/sw.js",
"clientsClaim": true,
"skipWaiting": true,
"navigateFallback": "/index.html",
"navigateFallbackWhitelist": [/^\/(about|contact)$/],
"runtimeCaching": [
{
"urlPattern": /^https:\/\/fonts\.googleapis\.com/,
"handler": "StaleWhileRevalidate"
},
{
"urlPattern": /^https:\/\/my-api\.com/,
"handler": "NetworkFirst",
"options": {
"cacheName": "api-cache",
"networkTimeoutSeconds": 10
}
}
]
};
I am using react with loopback. I wanted to integrate react code in loopback.
if i do these 3 steps
1)middleware.json - put this
"files": {
"loopback#static": {
"params":"$!../client"
}
},`
2)root.js
router.get('/');
3)front end code
"build": "react-scripts build && cp -r build/* ../client/",
That didopen my react site on localhost:3000 .Now issue is when i do this
i cant access my loopback on :3000/explorer
So my first question is in this scenario, how to access explorer.
But then i rolled it back , because i wanted to use loopback explorer again.
So, i deleted all these added code and explorer came back
but when i added it again
Now, i dont see my react code
I can still see explorer at http://localhost:3000/explorer/
if i go to http://localhost:3000/apphome
i see 404 error
Right now, my middleware.json file for loopback is
{
"initial:before": {
"loopback#favicon": {}
},
"initial": {
"compression": {},
"cors": {
"params": {
"origin": true,
"credentials": true,
"maxAge": 86400
}
},
"helmet#xssFilter": {},
"helmet#frameguard": {
"params": [
"deny"
]
},
"helmet#hsts": {
"params": {
"maxAge": 0,
"includeSubdomains": true
}
},
"helmet#hidePoweredBy": {},
"helmet#ieNoOpen": {},
"helmet#noSniff": {},
"helmet#noCache": {
"enabled": false
}
},
"session": {},
"auth": {},
"parse": {
"body-parser#json": {},
"body-parser#urlencoded": {
"params": {
"extended": true
}
}
},
"routes": {
"loopback#rest": {
"paths": [
"${restApiRoot}"
]
}
},
"files": {
"loopback#static": {
"params":"$!../client"
}
},
"final": {
"loopback#urlNotFound": {},
"./LoopbackUrlNotFoundCatch.js": {}
},
"final:after": {
"strong-error-handler": {}
}
}
root.js file
'use strict';
//router.get('/', server.loopback.status());
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
router.get('/');
server.use(router);
};
-edit
I made some changes. Now, i have react components showing, I can also see data when i use api routes. But, explorer is still missing.
middleware.json
"files": {
"loopback#static": [
{
"name": "publicPath",
"paths": ["/"],
"params": "$!../client"
},
{
"name": "reactRouter",
"paths": ["*"],
"params": "$!../client/index.html",
"optional":true
}
]
},
I have also changed named of root.js to root_something.js . In documentation, its written, no need of root.js
First of all you Should be create react app in an other director like
Root ->
|-- client // emply
|-- clint_src // react app
and getting build react app and copy build files to client
now you should be remove server.loopback.status() in "server/boot/root.js" file
Example:
router.get('/', server.loopback.status());
To :
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
router.get('/');
server.use(router);
};
after that you need say to loopback middleware which file should be load in your path
go to middlware /server/middleware.json and replace blow code to "files": {}
"files": {
"loopback#static": [
{
"paths": ["/"],
"params": "$!../client"
},
{
"paths": ["*"],
"params": "$!../client"
}
]
},
on "paths": ["*"], all route will be open react file exeption the "/api" and "explorer" so you should be handle page notfound inside react app
Hope This was help full
Good Luck
I suspect React's default service worker intercepts and tries to cache /explorer. It skips urls prefixed with __ so this might fix the need to clear browser:
In component-config.json:
{ "loopback-component-explorer": {
"mountPath": "/__explorer" }}
Then access explorer at /__explorer.
As the instructions for adding a GUI to a loopback application state, you need to remove the root.js '/' route completely, by either renaming the root.js file to something without a .js extension, or deleting the file altogether.
$ rm root.js
### or, you can do this
$ mv root.js root.js.old
In the loopback 3 server configuration, the client folder has to be setup as a middleware route in middleware.json, like so:
"files": {
"loopback#static": {
"params": "$!../client"
}
},
Now, your client application is served from the /client folder, and by default the static files are served with Express -- so, it will look for index.html when you hit localhost:3000/
We are using Extjs 6 and we are using sencha cmd to build our application.
We are facing one issue. Every time we release production version of our application like 6.3 to 6.4, bundled app.js does not get updated and browser take that file from (from disk cache). So every time we have to tell our users that please clear your browser's cache after you got new release. That's annoying.
This is my app.json file.
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/.js",
"appCache": {
"enable": false,
"update": "full"
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
"production": {
"output": {
"appCache": {
"enable": false,
"path": "cache.appcache"
}
},
......
"cache": {
"enable": false
}
...
Here are two options to solve your issue:
Customize app.js filename
{
"production": {
"output": {
"js": "${build.id}/app_${build.timestamp}.js"
},
"cache": {
"enable": true
},
"js": [
{
"path": "${build.id}/app.js",
"bundle": true,
"includeInBundle": false
}
],
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app_${app.version}.js",
"appCache": {
"enable": false,
"update": "full"
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
}
}
With this, you get every time you build your app an new file name for app.js.
Add static cache parameter
{
"production": {
"loader": {
"cache": "${build.timestamp}"
},
"cache": {
"enable": true
}
}
}
With this solution ExtJs will append a ?_dc=12345678 parameter to the app.js request. This parameter stays the same until your next build.
I have found solution:
"js": [
{
"path": "app.js",
"bundle": true,
"includeInBundle": false
}
],
.....
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app_${app.version}.js",
"appCache": {
"enable": false,
"update": "full"
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
....
This will not include app.js file in production build and create new app.js file with version appended at last to it like: app_6.4.js.
Structure of my Application:
In my app.json file I did following configuration for pointing to index.jsp file
"indexHtmlPath": "../../iris_app.war/WEB-INF/views/jsp/app/index.jsp",
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": {
"path": "index.jsp",
"enable": true
},
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
When I refresh my app using sencha app refresh it updates classic.json file
With following paths
{"paths":
{
"Dimension":"../../../../../iris_s.war/regshoapp/app/view/components/popups/SelectDimensionsWindow.js",
"Ext":"../../../../../iris_s.war/ext/classic/classic/src",
"Ext.AbstractManager":"../../../../../iris_s.war/ext/packages/core/src/AbstractManager.js",
"Ext.Ajax":"../../../../../iris_s.war/ext/packages/core/src/Ajax.js"
….etc.
When I deployed this application on server and run on browser then I use this
url
localhost:7001/iris_ops_app/
When I run application on browser it throws file not found error on console for each Ext File which is mentioned in “classic.json” file but these files exist under “http://localhost:7001/iris_ops_app/regshoapp” path.
Please let me know how can I resolve this path issue on browser. Actually “iris_s.war” should be replaced by “iris_ops_s/regshoapp” in “classic.json” file only then it will resolve all paths.
I'm having issues requiring a custom theme package in my extjs 6 application. I created a custom theme package that extends the Triton theme, built the package and added the .pkg to the local repository. I then added the package to the requires block in my app's app.json file and ran sencha app refresh -packages. I am then presented with the following error:
rook$ sencha app refresh -packages
Sencha Cmd v6.0.2.14
[INF] Processing Build Descriptor : classic
[INF] Refreshing packages for build : classic
[ERR] Cannot satisfy requirements for "theme-neptune"!
[ERR] The following versions cannot be satisfied:
[ERR] new-test-theme: theme-neptune (No matches!)
[ERR] Cannot resolve package requirements
Here is my package.json file for my custom theme package:
{
"name": "new-test-theme",
"namespace": "New.test.theme",
"type": "theme",
"extend": "theme-triton",
"toolkit": "classic",
"creator": "pr-repo",
"summary": "Short summary",
"detailedDescription": "Long description of package",
"version": "1.0.1",
"compatVersion": "1.0.0",
"format": "1",
"slicer": {
"js": [
{
"path": "${package.dir}/sass/example/custom.js",
"isWidgetManifest": true
}
]
},
"output": "${package.dir}/build",
"local": true,
"sass" : {
"namespace": "New.test.theme",
"etc": "${package.dir}/sass/etc/all.scss,${package.dir}/${toolkit.name}/sass/etc/all.scss",
"var": "${package.dir}/sass/var,${package.dir}/${toolkit.name}/sass/var",
"src": "${package.dir}/sass/src,${package.dir}/${toolkit.name}/sass/src"
},
"classpath": "${package.dir}/src,${package.dir}/${toolkit.name}/src",
"overrides": "${package.dir}/overrides,${package.dir}/${toolkit.name}/overrides",
"example": {
"path": [
"${package.dir}/examples"
]
},
"framework": "ext",
"requires": [
]
}
And then in my applications app.json file I am requiring the package:
"requires": [
"font-awesome",
"new-test-theme"
],
I am running:
Sencha Cmd v6.0.2.14
and
ext-6.0.1
Can anyone see whats causing this error?
I think you need to set the theme property instead of adding it to your requires property.
Should look like:
"builds": {
"classic": {
"toolkit": "classic",
"theme": "new-test-theme"
},
"modern": {
"toolkit": "modern",
"theme": "new-test-theme"
}
}