I am currently following this tutorial:
https://scotch.io/tutorials/build-a-real-time-scheduling-app-using-angularjs-and-firebase#connecting-to-and-using-firebase, but it is not working as I have it in Google Apps Script.
I am trying to use AngularJS in Apps Scripts. However, the documented fixes to make AngularJS work is documented to use the following line of code:
var ui = HtmlService.createHtmlOutputFromFile('myPage')
.setTitle('My Title');
ui.setSandboxMode(HtmlService.SandboxMode.IFRAME);
Source: Angular JS in Google Apps Script
But I am not sure where to put this in my Code.gs file? I have a function.doGet, so does it go in there?
Right now, my Code.gs is as follows:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
Thanks for your help!
HtmlService.createOutputFromFile(...) returns an instance of the HtmlOutput class, which has the setSandboxMode(..) method. Assuming that you have a file "index.html" in your Apps Script project, your code is correct:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
doGet is the method called by the Apps Script runtime when user navigates to your app's URL, and it should return the fully formed HTML that you want to render (which can include references to externally hosted js, css, etc.)
Related
I have followed this great blog post: How to call a locally hosted server from Expo?
However I get stuck at the next step:
The above command will return a URL accessible across Internet of the form https://application-mock-server.localtunnel.me. This URL can be plugged inside the React Native code base and will be accessible from the application running inside Expo on the mobile.
I have tried to figure out how to "plug the localtunnel URL inside the React Native code base". I thought that it would be "homepage" in "package.json", but so far no luck. Can you please help?
Never mind. I haven't noticed this "tunnel" option until now, which does the trick.
You need to specify that URL where you are sending API request. If you have not created a separate file, you can create apiConfig.js file or any similar named file and export that URL from the file and reference where ever you need to call the backend API.
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 would like to be abel to run my angularjs app from the app directory from VS code without using VS2015 and without running iis express. This will make it possible to create new UI very fast specially combined with mocking the service layer.
It's a mvc5 + webapi2 application.
So I need to run /app/index.html from mvc. The index.html is a full html page not an angular template.
Create an action method that returns perticular HTML file. You can return File from controller action. have a look:
public ActionResult Index()
{
var result = new FilePathResult("~/Html/index.htm", "text/html");
return result;
}
Also check this Class: FileResult
Hope this helps!
You can simply call:
return Redirect("~/path/to/.html");
2 ways of doing so:
i. Simple replace the original index.html to your new index.html, all other libraries please place in side the corresponding folder.
ii. in web.config, you may change the maproute properties, you can map your view as default or add new map route.
Thank you.
Looking for the best way of storing(securely) a Google Places API key in a MEAN stack. I was going to use a .env file but I am not sure how to go about implementing this. My current solution is having express pull in the .env variable but then I am not sure what route to take from there to insert the key into the script tag. I can't find anything from angular on how to use a template for this, so I came to the conclusion I would have to use another template library like handlebars. I really do not like this approach, is there another 'best practices' way for solving this problem?
I recommend using module node-env-file. That's what I use for my projects and I'm pretty happy with it. It's very simple to setup (check out their docs) and works like a charm. It reads your variables from an .env file and embeds them into your Node project.
.env
# your environment variables
API_KEY1=abcd123
app.js
var env = require('node-env-file');
var API_KEY1 = process.env.API_KEY1;
I do the following in one of my projects - it works for me with my nodemon development environment. I store the same data via config vars in Heroku so as not to have to include the keys in my repository.
// loads confidential parameters to inject into process.env
var googlekey = fs.readFileSync("./ignored/privatekey.pem", "utf8");
var config = require("./server/config/local.env");
config.PRIVATE_KEY = googlekey;
//run server using nodemon
gulp.task('serve', function(){
return nodemon({
script: 'index.js',
watch: 'server/',
// ignore: ['app/**/*', 'dist/*', 'node_modules/*'],
env: config
})
.on('start', function () {
// done();
});
});
I'm going to assume you're using what Google refers to as a 'Browser key'. If, however, you're using a 'Server key', then you shouldn't be passing the key to your client-side code anyway.
If you're using Express response.render() to generate the HTML, you can pass the API key into res.render as a local, and reference it within your HTML or template.
The following is a snippet from a jade template I'm rendering with Express, that does something similar with the Stripe API:
extends layout
block head-content
script(src='https://js.stripe.com/v2/')
script.
// <![CDATA[
Stripe.setPublishableKey('#{stripePublicKey}');
// ]]>
It sounds like you're storing the key in an environment variable, so you could pass it into the Express rendering engine thus:
res.render('index', {stripePublicKey: process.env.STRIPE_PUBLIC_KEY});
It also sounds like you want to avoid using jade or some other template engine, so you can use EJS, which will allow you to use 'pure' HTML, but with variables. Here's a good tutorial for getting started:
http://robdodson.me/how-to-use-ejs-in-express/
If you have a large amount of content already, and you don't want to have to rename all of your existing .html files to .ejs just to get that one variable passed in, you can do this:
app.engine('html', require('ejs').renderFile);
as described in more detail here:
http://expressjs.com/api.html#app.engine
It sounds like you're already working on the other best practices list under 'Best practices for securely using API keys' at the link below, but be sure especially you're following the guidance regarding restricting access by referrer URL.
https://developers.google.com/console/help/new/
Best of luck!
Tim
I am just trying to connect MongoDB using Web api.
I followed steps present in
http://www.sunyingroup.com/web2012/mongapi.htm
I confused with step 3, Build Angular JS MVC Pattern .
My question is how/where to add Angularjs script present in the above mentioned website.
Looking into your link example, it uses MVC page but that page is not provided (they provided just the javascript code), but basically you can go with a pure html file where you define your grid to show the data, and add your button. you need to add ng-app directive to body tag of the html file with app named after their module name "CRUD", and include that code into a javascript tag, in the same file for example or separate file.
the following link gives you a starting point of how to use angularjs with API
http://www.codeproject.com/Articles/737030/A-basic-SPA-application-using-AngularJS-WebAPI-and
hope that helps.