I am looking to use Google's cast SDK (for sending) in the Web app that I am working on; In google's documentation and codelabs (https://developers.google.com/cast/codelabs#:~:text=Codelabs%20are%20sample%20apps%20with,Also%20see%20Sample%20applications.) it seems that the only way to load the SDK is to use
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
This won't work for me because I am writing a React+JSX web app. I can't just load the script through a script tag as the other elements that need to get rendered, such as the
<google-cast-launcher id="castbutton"></google-cast-launcher>
Aren't recognized as valid JSX elements.
How can I make this library available to my code? Is there anything like
yarn add cast-sdk
that exists that I can use to get the sdk?
You can load the script directly on your index.html file. This way the script will load once together with your App.
Or you can dynamically load the script in the js like it is explained here, but this way the script will be loaded/unloaded every time the component is mounted/unmounted.
Related
I am looking at implementing my web application as a PWA using React. The main feature that I want to implement is to cache JSON data fetched from API such that it works in offline mode. However, I do not know how to code the service worker in React.
You can start reading the official doc here and you should figure out how you must configure your environment (webpack). If you could not understand it, you shoud read this medium article here or here.
You need to:
Create the file manifest.json or generate it.
Bind the manifest.json at the header section:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
Create a file registerServiceWorker.js, you can find help here
Write your React App.
Choose an offline strategy to store data (for example, you can use redux offline or redux persist).
I am working on React project that uses TinyMCE as a rich-text editor. I wanted to opt out of their cloud services so as to remove the following message.
This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support.
I tried out this link (Loading TinyMCE by yourself) from the TinyMCE website by adding the following code to my index.html file hoping that it would be accessible globally.
<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
This did not work nevertheless. Am I missing something here?
The URL in your script tag is using our Cloud service to try to load the editor so if you don't want to use our Cloud platform, then that URL seems not to be what you want.
If you want to locally host TinyMCE in a React app. You can do so via a module loader as outlined here:
https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/
If you want to use the script tag referenced in your question you need to register on our Cloud platform (it's free) to get an API key. Once you have that, you need to include that API key in your script tag as outlined here:
https://www.tiny.cloud/docs/cloud-deployment-guide/editor-and-features/
...so the script tag would look like this:
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
...but with the string your_API_key replaced with your actual API key.
I'v got a new way to get rid of the cloud when using official tinymce react package.
Go to https://github.com/tinymce/tinymce-react, and clone the whole project.
Open the file src/main/ts/components/Editor.tsx, and go to line 122, where you can find the function named 'getScriptSrc'.
Remove all codes inside the function, and just return the url of your self hosted tinymce.min.js. In this way you can get official tinymce react but won't get bothered by the message.
Import Editor in src/main/ts/index.ts.
I have a web site with angularjs framework for front-end using index.html and .net REST API services.
I need to achieve something one of followings:
1. I can create a dummy MVC view and write #Scripts.Render(...) to render all the bundled script and whatever I can see chrome developers tool e.g.
/bundles/angular?v=asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1
I can take this to index.html and put in a way
<script src="/bundles/angular?v=asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1"></script>
2. This is possible on my local, however I am not sure, if I publish to another server, there random key asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1 will remain as is.
So questions here are:
Is there any setting to keep this key unchanged?
OR simply handling bundle & minification feature of angularjs-index.html page? note- I do not want to use any of npm packages
I'm trying to serve an AngularJS application using the Play 2 Framework for Scala and I think I understand, in general, how the routes and the templates work.
In order to serve the angularJS files (which should NOT be available for users publicly), I'm currently placing them under /public and then creating routes for them.
I would like to have a little more flexibility over where my angular js files are. I'm aware of the assets.at() method that creates an action for this purpose but I cannot serve files that live anywhere other than /public, no matter what I do. I will need to intercept the call and only serve the javascript file if the user has the correct permissions.
So I think my question is whether this is the right approach for what I have in mind (selective serving of angular JS files - depending upon permissions and so on ) and whether I'm stuck with having to place my angularJS app under /public - is it not possible to serve files from anywhere else?
You can wrap the built-in Assets controller. Instead of using the router to invoke it directly, as is the default, invoke your own Action, and use Action composition to wrap it with your authorization logic.
I'd like to see what is not working for you. You should be allowed to have assets served from multiple paths
routes.conf
GET /assets/*file controllers.Assets.at(path="/public", file)
GET /secure/*file controllers.Assets.at(path="/secure", file)
Then in your templates.
<script src="#routes.Assets.at("/public", "test.js")"></script>
<script src="#routes.Assets.at("/secure", "test.js")"></script>
I'm trying to host my first website. I've made it using angularjs, bootstrap and yeoman as a generator. However when I tried to upload it, I realized that the full size of everything in my folder (including the generated stuff by yeoman) was nearly 100mb.
What files do I actually need to host? Node is nearly 60mb and grunt isn't much smaller. Any advice would be greatly appreciated.
Assuming you have a web server like nginx or apache already on that server, you just need to upload the dist folder that is created when you run grunt build.
You don't need all that generator and node stuff just to host a simple test project.
What you actually need is a single HTML file, called index.html. Include Angular and bootstrap (you can omit this, too, if you can go without fancy styles) and create a file app.js which will hold your application logic.
http://angularjs.org shows this in a neat way on their landing page, just scroll down to 'The basics'
As static angularjs application will contain mainly HTML, CSS and JS files you can host your project on simple apache webserver. (Apache - http://httpd.apache.org/)
If you are making a dynamic angularjs application you will have webservices returning you JSON data. If you implement the restful webservices in Java (using Jersey) you can deploy you entire angularjs application with java webserivce implementation to tomcat web server. (Tomcat - http://tomcat.apache.org/)
Hope this helps!
Decided to answer this old question because its one of the few that show on google when searched.
You do not need to use Grunt anymore, I do not know if this was needed at the time of this question.
instead just do
ng build my-app
this would have saved me some hours.
link to current doc