Use a remotely rendered page instead of /public/index.html - reactjs

I wonder if its possible to insteady relying on the source code of the file stored in /public/index.html one can use a remotely generated page to be used as the template for the dev server of create-react-app.
The point is that I'd like to take a page that contains data that is generated by the server and have my react app running in there for development purpose.
As far as I understand, the webpack dev server loads the file from the HDD upon request, modifies the content and delivers it to the browser. So technically it shouldnt be a problem to retrieve the source from a remote URL instead of the local hard drive, right?

Related

Microsoft Teams Action messaging extension with task module and URL not working

I am trying to build an action messaging extension with a task module implementation which uses a URL attribute to load the page. Attached is the screenshot of the task module code which was generated by Yeoman Teams generator.
The popup comes up blank. So it means it's not loading the HTML file path, but if I open Chrome and try to load the URL, it works fine.
Also instead of using URL if I use an adaptive card it works fine. Only the URL part doesn't load on the popup. Attached is another screenshot of the popup inside teams:
What could be wrong with the code?
The other answer is correct in that your url needs to be reflected 100% correctly in your manifest. However, there are a few things that you need to be clear on:
It's not per se the address of the BOT that's important, but rather the address of the web page itself that needs to be listed in your safe domains list in your manifest. In your case, they're hosted in the same endpoint, but they might not be in your final solution, depending on how you end up hosting this.
While you're developing locally, rather use App Studio. That way, you don't need to fiddle with the zip file every time - you can just change it in App Studio and immediately redeploy with the updated URL
Every time when you compile and run the project, a new hostname is generated since ngrok free license is used in the yo teams scaffolding, which makes the app to reference to the old URL.
You need to uninstall the app from the Teams app store under your organization and upload the new app from the package folder .zip (Only after gulp ngrok-serve)
If it still does not work, check the below
Unzip the package file and verify the manifest whether it's pointing to the right hostname of the action html page
Go to http://localhost:4040 to inspect the ngrok tunnel traffic that should give more info on the routed requests.

How can I dynamically use images outside of my reactjs project?

I am developing a client-only ReactJS application (only for local usage) where I need to save and load images by filepaths (URL and local file system).
The paths are stored in the local storage and images from URLs can be used. Anyway, local images cannot since ReactJS is using the project directory and I cannot escape it.
Is there the possibility to open files with absolute path from the local file system or can I/do I have to upload it in the project directory?
Are you running this through a browser? If so Javascript on browsers does not yet have the ability to access local file systems. I haven't tried this but you could run Node locally and use ExpressJs for client-server communication.
As stated here:
you'll need two pieces:
A browser piece, which does the UI with the user.
A Node piece, which runs on the user's machine (and thus can access the file system) and which the browser piece uses to do the actual file operations.
Probably the easiest way for the pieces to interact would be HTTP, which you can trivially support using ExpressJS.
So for instance, if the user wants to delete a file:
User clicks something to say "delete this file"
Browser JavaScript sends the command to the Node process over HTTP via ajax
Node process does the deletion and reports success/failure
Browser JavaScript displays the result

HTML5 Database Use without Server

Is it possible to use a local database file with html5 without using a server. I would like to create a small application that depends on information from a small database. I do not want to host a server just to pull information. Is it possible to create a database file and pull information from the local files ?
Depends on the following:
The type of application you want to build:
Normal website with some data being pulled from a local storage;
Special purpose hosted website / application with data generated by the user;
Special purpose local application with a dedicated platform (a particular browser) and with access to the browser's non-web API -- in order to access the browser's own persistent storage methods (file storage, SQLite etc.);
Special purpose local application with a dedicated environment -- in order to deploy the application with a local web server and database;
Available options:
Indexed DB
Web Storage
XML files used for storing data and XSLT stylesheets for translating the data into HTML;
Indexed DB and Web Storage ar available in some browsers but you need to make sure the targeted browsers have it. Their features aren't quite as complete and flexible as SQL RDBMSs but they may fit the bill if your application doesn't need all that flexibility.
XML files can contain the data you want to be shown to the user and they can be updated manually (not by the user) or dynamically (by a server script).
For dynamic updating the content of the XML is kept in JavaScript and manipulated / altered (using the XML DOM) and when the session is over the XML content is sent to the server to entirely replace the previous XML file. This works OK if the individual users have a file each and they never write to each other's files.
Reading local files:
Normal file access is prohibited (for security reasons) to all local (JavaScript) code, which means that "having" a file locally implies either downloading it from a known source (a server) or asking the user to offer access to a local file.
Asking the user to offer access to a local file which implies offering the user a "file input" -- like for uploads but without actually uploading the file.
After a file has been selected using FileAPI to read that file should be fairly simple.
This workflow would involve the user "giving" you the database on every page refresh -- but since it's a one page thing it would mean giving you the data on every session as long as your script does not refresh the page.
You can use localstorage but you can run a server from your own computer. You can use Wamp or Xampp. Which use Apache and mysql.
What i'm looking for is a little more robust than a cookie. I am making a web application for a friend that will be 1 page, and have a list of names on the page. The person wants to be able to add names to the list, however they do not want to use a web server. Just want the files locally on a computer so a folder called test-app , with index.html, and possibly a database file that can be stored in the web browser or a way to save information to the web browser for repeated use.

Resarting AppEngine after a file is modified

Whenever I make a change to my html file, I have to resart appengine server to see the change reflected. Why is this so? In Flask for example the server automatically reloads whenever it detects a file change. Can this be done in AppEngine?
That's not the normal behavior for local development. You should be able to update your html files, as your code, without the need to restart the server.
Can you tell us more about your setup? Might there be a caching mechanism in your code that doesn't check the filesystem to refresh appropriately?

Prevent Silverlight xap from being cached by proxy server

The company I work for has proxies/WAN accelerators between our international sites to cache Intranet web content. I have a Silverlight application being hosted on a server at one location, but being accessed by clients in another location. When the users access the web page hosting the Silverlight app, they get the stale xap file being cached by the proxy and not the latest version from the server. Local users always get the latest xap as their requests are not going through a proxy.
I've tried the various header/metadata techniques mentioned elsewhere to prevent caching, and the containing web page itself is being served up fresh, but I still get the old .xap file. Short of getting our IT admin to disable proxy caching for my site, is there anything I can do make sure the latest xap file get retrieved from the server instead of the proxy? The containing page is ASP.NET.
What I do is just add a querystring at the end of the path to the xap file. Then when you change the querystring variable, the proxies etc. should see it as a request to a new file. So far this has worked fine for me.
So basically, when embedding an .xap in a straight-up HTML file, you would do this:
<param name="source" value="ClientBin/SilverlightApplication1.xap?cachepreventer=whatevervalue"/>
And then when you deploy a new version, just change "whatevervalue" to something else.
EDIT
If you need to use this technique in many places in your app I would read the querystring value from config and just write it to the page using asp.net. That way you only need to update it in one place when you deploy.
If you want to make sure every time the xap file is retrieved and you don't want to worry about it - just use
<param name="source" value="ClientBin/YourSilverlightapp.xap?<%=Guid.NewGuid().ToString() %>"/>
of course - this lends itself to a heavier cache load. I do like the helper method above though if you only want changes to be propagated to the client.

Resources