The interactive console accessible at localhost:8080/_ah/admin is very useful for debugging your App Engine app.
I always find myself importing the same modules over and over again, particularly models.
I've looked into monkey patching the interactive console to automatically import these models, and I'm stumped. Ideally, I could do it from my app so I wouldn't need to reapply the patch every time I update the SDK.
I'll investigate and hopefully find an answer, please let me know if you have any ideas about how to accomplish this.
Good question! The relevant code for the interactive console is in InteractiveExecuteHandler at google/appengine/ext/admin/init.py:188. Specifically, it executes the code like this:
try:
compiled_code = compile(code, '<string>', 'exec')
exec(compiled_code, globals())
except Exception, e:
traceback.print_exc(file=results_io)
Note that for the globals, it simply uses the globals of the module it's in. So in order to provide your own imports, all you need to do is this:
Create your own module, where you import and subclass InteractivePageHandler and InteractiveExecuteHandler
Import any additional modules and classes you want in your new module - they'll automatically be imported for any code that's executed by them.
Override the generate() function from BaseRequestHandler in those classes so they look for the templates on google/appengine/ext/admin/templates instead of in the 'templates' subdir under your own module.
I ended up using the App Engine Console project which comes with an autoexec.py that provides the functionality I asked about.
I'm not sure if this is at all what you're going for, but you can just edit the html template for the interactive console page to have different default text entered. It's located at:
./google_appengine/google/appengine/ext/admin/templates/interactive.html
This would apply to all your apps, and as you mentioned you'd have to goof with it every time the SDK updated.
Related
I have created a React package that I've uploaded to an NPM repo for being consumed for React Apps. What I want to achieve is to be able to set up certain parameters when consuming my component. Let's suppose that my package calls an API. This package is being used for 2 apps, App A and App B. App A needs that the component calls an url whilst App B is going to call another url. Is there any particular way to achieve this (like Axios does ie).
The main thing, I think, is that my package has a lot of components and this configuration can be used in any of them, so what I want to do is not to pass it to the root component, just having it available all the time. I have read about Context API but I am not sure if this is the correct approach or if there is even an easier way since these values are not going to be updated once the application started, these values will remain static.
Please let me know if my question is unclear.
Thanks.
what you can do is to follow the rule "build oncedeploy everywhere"...you can put a app-config.json that contain your app config file in your public folder... in your main component you fetch that file ...
a second approach is to use .env file and use it everywhere in your app like this :process.env.REACT_APP_API_URL...check this out https://create-react-app.dev/docs/adding-custom-environment-variables/
Now there is an alternative to dotenv in React for configuration: wj-config. Currently in beta, the v2 will provide a very robust set of configurations. The ReadMe for this package is very extensive and explains how to use it in React in detail.
I am unsure if all you need is a configuration method or not. In any case, I would still recommend that you give it a shot. You may also read this blog post that explains this new configuration package.
I have a directory full of text files that I need to read in my react web app
-resources
|-file1.txt
|-file2.txt
|-file3.txt
I would like to store this resources directory somewhere in the app such that the contents of resources can be listed, and individual files can be iterated over on a line-by-line basis.
currently, I'm stuck on listing the files. I'm storing them like this
-node_modules
-public
|-resources
||-file1.txt
||-...
-src
But I really don't care where the resources directory is located. I tried using list-react-files based on this, but got Module not found: Error: Can't resolve 'fs'.
for further context, I was thinking the code to scan for files would be in in App.js, such that the scanned files could be used to populate certain components.
import React from "react"
import './App.css';
...
function App() {
//searching for files
var files = [...];
return(
//create components which can list and work with the files
...
);
}
export default App;
So, to summarize the question, how can I list files in reactJS?
p.s.:
this project was made with create-react-app
part of the point is that it should be easy to add new files to this directory, but I see no reason this process has to be "dynamic"
When people are using your react page, it is "running" on their computer and the software does not have access to all the files and data you'd like to use.
You will need to do this at "build time" when your service is being packaged up, or "on the server".
When you are building your react app, you can hook into processes that can find files and perform operations on them. Gatsby might be your best bet. Look at how people add "markup" files to their projects, built a menu from them and then render them as blog articles. NextJS, Vite, and other frameworks and tools will work, you may just need to learn a bit more.
The other approach, to do this "on the server" means when you are running code on the server you can do almost anything you like. So, your react app would make a call (e.g. rest request) to the server (e.g. NodeJS), and the code running on the server can use fs and other APIs to accomplish what you'd like.
From what you describe, doing this as part of your build step is probably the best route. A much easier route is to move this data into a JSON file and/or a database and not crawl the file system.
Looks like its a client side rendering app and not server side (node app). Resources folder you trying to list is residing in server and react app (javascript) running on browser can't access it directly.
To whom it may concern, I spent more time than I should have working on this. I highly recommend converting everything to JSON files and importing them. If you want to be able to scan for JSON files, make a JSON file that includes the names of all your files, then import that and use that for scanning. Doing things dynamically is a bare.
If you don't reformat, you'll likely need to use Fetch, which is asynchronous, which opens up a whole can of worms if you're using a framework like React.
If you're just importing json files, it's super easy:
import files from './resources/index.json';
where index.json looks like
{
"files":[
"file1.json",
"file2.json"
]
}
if you need to import the files more dynamically (not at the very beginning) you can use this:
var data = require('./resources/'+filename)
this will allow you to scan through your files using the index.json file, and load them dynamically as needed.
Edit: I've added a repo to reproduce the issue:
https://github.com/bengfarrell/tf-issue-tester
I have a single page application that uses both Posenet and FaceAPI (https://github.com/justadudewhohacks/face-api.js) in 2 different views.
Separately (when in diff demo applications), those two views work perfectly, however just importing the models in those 2 different view components while in the same application, it breaks.
My first indication that something is wrong is the warning:
engine.ts:224 webgl backend was already registered. Reusing existing backend factory.
t.registerBackend # engine.ts:224
(anonymous) # backend_webgl.ts:2801
engine.ts:224 cpu backend was already registered. Reusing existing backend factory.
But the real problem is that when running FaceAPI, I get the error:
engine.ts:583 Uncaught (in promise) TypeError: t is not a function
at engine.ts:583
at engine.ts:423
at t.scopedRun (engine.ts:434)
at t.tidy (engine.ts:421)
at l (engine.ts:583)
I'm running under the assumption that the Posenet environment is not compatible with the FaceAPI environment somehow. Ideally I'd like to clean up TFJS and start fresh with each of the 2 component views.
I've looked at the docs and tried to run engine.dispose() and engine.disposeVariables() prior to running the FaceAPI implementation, but I'm not having luck.
Does anyone have any pointers on how to properly clean up between TFJS usages? I should also probably ask for strategies on ES6 imports. Perhaps there are ways to import that don't actually create the underlying factories that the warnings are referencing. If not, I can certainly get creative with other loading strategies such as dynamic imports or appending non-module based scripts on demand to the DOM.
For reference, my imports are:
import {load, getAdjacentKeyPoints} from '#tensorflow-models/posenet';
and
import {nets, loadFaceLandmarkModel, TinyFaceDetectorOptions, detectSingleFace} from 'face-api.js';
Thanks!
We have a ExtJS7 app, that for special requests like reset password, that always opens a new tab via email reset link, get loaded in full. We would like to load only few pages that are needed to load for these kind of request
Is there a way in ExtJS that would only load a particular page and its dependencies
I have not seen tutorials on this subject in official documentation. Myself did the following - just created another app (or bundle) for logging. The backend is responsible for the logic of what to display (loginapp or mainapp) - in the absence of a session, the user receives the app login
Absolutely. You can make another app - each app is a page, and will have its own packaged dependencies.
That's the easiest approach. A more complicated approach is to break your application into several ExtJS packages. You can then configure the app.json to exclude all of the packages from the micro loader. You then need to load these packages dynamically, presumably after logging in.
Doing this, though, is extremely complicated, and almost certainly not worth doing.
I am using Google app engine and python to build an application. I am incredibly new to python as well as GAE. I have a index.html file with the basic template for my site. However I would like to replace the contents of a few tags depending on the URL. For example update the title tag for each individual pages. From what I can tell the recommended way to do this is using the lxml library.
And so... Tonight is my first time I have ever worked with lxml and I am having a really hard time wrapping my head around it. I have been fooling around with several permutations of the basic syntax and have not had much success understanding how it works. I have looked for different tutorials and the documentation is few and far between.
When I try the following code I get a 'lxml.etree._ElementTree' object has no attribute 'find_class' error, however the documentation here: http://lxml.de/lxmlhtml.html#parsing-html it sure looks like it should have that class
Am I on the right path? Is this the most efficient/best way to replace the content of html tags?
import os
import webapp2
import lxml.html
doc = lxml.html.parse('index.html')
doc.find_class("title") == 'About Page'
self.response.write(lxml.html.tostring(doc))
This is definitely not the way to that on Google App Engine. You should use some kind of template framework like Jinja2 or Django to achieve your goal.
But before all that you will have to make sure that you completed the Getting Started Tutorial, where you can see these things in action.