I'm working on React+Redux application and i stuck with some app initialization problems, so i wanna ask:
How to make initial setup for application, e.g. where to set default request headers for communication with api?
Lets assume i have some requestManager module which is not react component.
And it's king of proxy, it adds proper headers for every request.
But in case of user log out and log in i need to set proper token in header.
How to accomplish that?
Can not-react component listen for store events?
What are best practices for that?
Are there some good examples?
It you are using webpack. It has Define plugin which you can declare once and use in every .js file anytime
if you have not experience with webpack
https://github.com/petehunt/webpack-howto#6-feature-flags
In webpack configuration.
var definePlugin = new webpack.DefinePlugin({
'process.env': {
"NODE_ENV": JSON.stringify("development"),
"API_HOST": "localhost:3001",
"API_TOKEN": "my-token"
}
})
In js file
if (process.env.NODE_ENV) { // Yep, just call like that
//Whatever
console.log(process.env.API_TOKEN) // print out "my-token"
}
Related
I'm trying to build an app that does something when it is first installed onto a workspace, eg: Ping every team member.
I couldn't find an event type that gets triggered upon app install:
https://api.slack.com/events
Is there a way to make this happen?
I think there might be a misunderstanding of the events concepts here. Events are always directly linked to one specific Slack app and needs to be processed by that very app. There is no such thing as "general" events for things happening on a workplace, like a new app being installed. Ergo there is no event for app installation.
Nevertheless you can implement the functionality you mentioned with Slack, e.g. pinging all team members once an app is first installed. All you need to do is include this function in the installation process of your Slack app and e.g. start pinging after the installation process is complete and the app verified that it was the first installation to this workspace. You do not need an event for that.
This is a partial answer because I was wondering the same thing and wanted to share what I found. On this oauth tutorial, it has the following code snippet:
app.get('/auth', function(req, res){
if (!req.query.code) { // access denied
return;
}
var data = {form: {
client_id: process.env.SLACK_CLIENT_ID,
client_secret: process.env.SLACK_CLIENT_SECRET,
code: req.query.code
}};
request.post('https://slack.com/api/oauth.access', data, function (error, response, body) {
if (!error && response.statusCode == 200) {
// Get an auth token
let oauthToken = JSON.parse(body).access_token;
// OAuth done- redirect the user to wherever
res.redirect(__dirname + "/public/success.html");
}
})
});
I believe instead of the line res.redirect(__dirname + "/public/success.html"); at that point you can make a request to ping everyone or even call a function to do so directly there, and it will trigger immediately once the app has been installed.
When i set proxy settings in the system my Electron application gets it automatically for common requests (axios package), but not for websockets (socket.io-client package). If i provide proxy settings manually then websockets starts to work too, but i want to try to avoid manual configuration, because it may be tricky to the real app's users. So i'm looking any way to get proxy settings from electron and transfer them to the websockets.
I have tried to use login event for my browserWindow in the both main and renderer process, but it doesn't trigger at all. Is there any way to get proxy settings that electron uses?
I've found the solution. It's possible to take proxy-settings inside the main process.
mainWindow = new BrowserWindow({})
const ses = mainWindow.webContents.session;
ses.resolveProxy('url_you_need_to_achieve', (proxy) => {
// do whatever you want with proxy string, that contains proxy-setting
});
I'm using Ember 2.7.0 of course with ember-cli.
I come from Rails, I used to put in "assets/application.js" all my javascript like, for example:
var ready = function () {
myFunction('test');
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
}
document.addEventListener("turbolinks:load", function () {
ready()
})
Now with Ember where I have to put this code in my application?
I read on the web the use of:
Ember.Application.create({
ready: function () {
});
but I don't know how to put this code: in app.js maybe, but I already have:
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
and if I create another file in the root, like for example "mycode.js" like this:
import {Ember} from 'ember';
let myCode;
myCode = Ember.Application.create({
ready: function () {
console.log('Test!');
}
});
export default myCode;
and import it in application using ember-cli-build.js here:
...
app.import('mycode.js');
it compile the big js with my code, but it doesn't work at all my ready function.
How to do?
I have to use Components? Maybe an application component?
Which is the best Ember way for top performances?
To start working with Ember is a must to know Ember's structure and the way Ember works, Simply you need to use Ember guideline to get the best performance. I will explain you some steps and example and I hope it will help you to understand more.
First of all check this image
1. Review Ember Guides and API Docs
In addition, it's a good to review this repository on Github as well. https://github.com/emberjs/guides/ which will help developers to get used to Ember.
2. Install Ember-CLI
Ember-CLI is a command line interface which has been designed for creating Ember apps that strongly favor convention over configuration.
3. Install the Ember Inspector Extension
The Ember Inspector Extension is super-useful for debugging your Ember app.You may also find Chrome app on Google play.
4. Read “From Rails To Ember”
Since you know Ruby on Rails and you are a developer of that, it is essential that you read the tips compiled in From Rails To Ember.
5. Get to Know Ember.Component
A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:
You should pass in the state you need to the component.
Components should communicate with their parent scope (e.g, controller
or another component) by sending actions.
Parent scope (e.g., controller or another component) communicates with
the component by changing the data state that it has passed to the
component.
As an example I am going to explain some part of your code.
You have this
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
and probably this is your HTML code
<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>
However, in Ember what would be the best practice to use Actions in your Route or Controller to define your action function for example your code in Ember will be something like this :
myPage: null,
actions: {
clickOnbtnFliud() {
this.set('myPage', 'container');
}
}
and HTML in the same template for the controller would be like
<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>
In Summary,
You may use Components as you need which is the best practice for your Ember Application but you need to understand where you have to create that.
You rarely need to edit Ember-Cli-Build.js unless you want to insert extra plugins library or ... but I don't recommend you to insert your internal JS files as you can simply convert it to Ember Native codes. For instance you don't need to do this app.import('mycode.js'); but you can simply create your Route and add your custom code like I said as an example before to your Route or Controller or Components.
What I can assure you is if you user Ember in the way that you can find in Guidelines in Ember website, You don't need to worry about performance.Just try to user Ember Native way to implement your code.
Last word, As much as possible keep yourself motivated to use EmberAddons rather than thirdparty plugins and always choose the best updated addons not all of them. Search for best Addons and popular ones and use it.
Hope this guide help you.
I need to load the YouTube JavaScript API which requires you to include a script tag with an onload query string which points towards a global callback function. Once the Google client is loaded the callback gets called:
<script>
function init() {
gapi.client.setApiKey('465723722VeAji1ZVqYiJxB7oyMTVLI');
gapi.client.load('youtube', 'v3', function() {
YouTubeClientLoaded = true;
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
This all works fine in principle but I'm having a hard time working out how to integrate this global callback in to my ReactJS application. How can I tell react that the client is loaded and ready to use?
I've had a few thoughts but all seem hacky. I thought about starting the React app up and setting a timer that periodically checks for the existence of the YouTubeClientLoaded global variable (or the gapi object) or perhaps a pubsub mechanism so my global init function can emit when it's ready. Problem with the pubsub route is that the pubsub itself would also need to be global so then how do I get that communicating with React...
Is there a more correct way of achieving this?
I'm looking for a way through AJAX (not via a JS framework!) to real time monitor a file for changes. If changes where made to that file, I need it to give an alert message. I'm a total AJAX noob, so please be gentle. ;-)
Edit: let me explain the purpose a bit more in detail. I'm using a chat script I've written in PHP for a webhop, and what I want is from an admin module monitor the chat requests. The chats are stored in text files, and if someone starts a chat session a new file is created. If that's the case, in the admin module I want to see that in real time.
Makes sense?
To monitor a file for changes with AJAX you could do something like this.
var previous = "";
setInterval(function() {
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.responseText != previous) {
alert("file changed!");
previous = ajax.responseText;
}
}
};
ajax.open("POST", "foo.txt", true); //Use POST to avoid caching
ajax.send();
}, 1000);
I just tested it, and it works pretty well, but I still maintain that AJAX is not the way to go here. Comparing file contents will be slow for big files. Also, you mentionned no framework, but you should use one for AJAX, just to handle the cross-browser inconsistencies.
AJAX is just a javascript, so from its definition you do not have any tool to get access to file unless other service calls an js/AJAX to notify about the change.
I've done that from scratch recently.
I don't know how much of a noob you are with PHP (it's the only server script language I know), but I'll try to be as brief as possible, feel free to ask any doubt.
I'm using long polling, which consists in this (
Create a PHP script that checks the content of the file periodically and only responds when it sees any change (it could include a description of the change in the response)
Create your XHR object
Include your notification code as a callback function (it can use the description)
Make the request
The PHP script will start checking the file, but won't reply until there is a change
When it responds, the callback will be called and your notification code will launch
If you don't care about the content of the file, only that it has been changed, you can check the last-modified time instead of the content in the PHP script.
EDIT: from some comment I see there's something to monitor file changes called FAM, that seems to be the way to go for the PHP script