We Keep Coding

Importing a JS module in a Typescript file

I am developing a website in TS in which I have to call an unofficial API, that is https://www.npmjs.com/package/reverso-api.
The whole module is written in JS, and as described in the docs, the proper way to import the module in JS is
const Reverso = require('reverso-api');
const reverso = new Reverso();
Unluckily, I am developing in TypeScript. I have no idea how to import the module in my project in order to make it works. How can I do that?

If this package doesn't have a type definition, you can use a temporary shorthand declaration so TypeScript won't yell at you. This makes all imports from reverso-api have any type, which you might have guessed is not very safe, but it's all we have right now.
declare module 'reverso-api';
Reference: https://www.typescriptlang.org/docs/handbook/modules.html#shorthand-ambient-modules

How can I create environment variables and use them in a react library, without using webpack?

I have tried dotenv and cros-env. And also with mentioning it in this link
https://create-react-app.dev/docs/adding-custom-environment-variables/
However, it doesn't work for me
My .env file
MY_VAR=value
I have this in the file where I want to call it
console.log(process.env)
const { MY_VAR } = process.env
console.log(MY_VAR)
and i get this

As noted here, environment variables for your frontend must begin with REACT_APP. So try REACT_APP_MY_VAR and restart your React server afterwards.

aws-sdk use only needed package e.g. couldwatchlog and config (with credentials)

I want to use the cloudwatchlog client from AWS SDK (JS) and also set the credentials. So that I am not including the whole AWS SDK bundle inside my Application, because it is very large and slows down the page. Is there a way to configure the credentials and then only use the needed client from the AWS SDK?
so far I have tried this but it doesn't work with the config, typescript says the update method doesn't exist on Config:
import {Config} from 'aws-sdk/lib/core';
import {CloudWatchLogs} from 'aws-sdk';

Luckily I have just done this the other day to shrink down my bundle size as well.
First I would recommend getting the correct aws-sdk config library with:
let Config = require('aws-sdk/global');
To get just the individual CloudWatchLogs you would need to get it like so:
let CloudWatchLogs = require('aws-sdk/clients/cloudwatchlogs');
After this you can configure the credentials like you would before, and to get a new CloudWatchLog you can do: let cloudwatch = new CloudWatchLogs()
Hopefully this helps some.

Enviroment variables react

I have a react component which in development will redirect to a localhost url but in production to a different url. In my backend I have the same situation and there i solved it with a package called dotenv. I was wondering how someone would do this in a react front-end.
export default withRouter(function Login(props) {
useEffect(() => {
if(localStorage.getItem('jwt')){
props.history.push('/dashboard');
}
})
const handleLogin = () => {
window.location.href = "http://localhost:8000/auth/google";
}
return (
<LoginView handleLogin={handleLogin}/>
)
})

You can use dotenv to add environment variables to react as well. During app deployment(in the build process) the environment variables must be replaced with the corresponding URLs (as this is the most frequently encountered use case in front-end applications). This can be done while configuring the build process.
Here is an example using Webpack https://medium.com/#trekinbami/using-environment-variables-in-react-6b0a99d83cf5
The whole idea here is to create a file (called just .env) filled with
your environment variables. To prevent people from finding out your
local database password is the same one you use for every single one
of your accounts on the internet , I urge you to add the .env file to
your .gitignore. Your front-end code will refer to the same
environment variable (process.env.API_URL) on both environments
(development/production), but because you defined different values in
your .env files, the compiled values will be different.
I would suggest having a separate .env file for the react app as it should not be accidentally served with the website.
Create React App has a module(built around the node dotenv module) you can use for adding custom environment variables
https://create-react-app.dev/docs/adding-custom-environment-variables/
The environment variables are embedded during the build time. Since
Create React App produces a static HTML/CSS/JS bundle, it can’t
possibly read them at runtime. To read them at runtime, you would need
to load HTML into memory on the server and replace placeholders in
runtime, as described here. Alternatively you can rebuild the app on
the server anytime you change them.

Its depend on how you are using react.
If you are using react-script, you can go will above solution(https://create-react-app.dev/docs/adding-custom-environment-variables/).
But if you are using webpack, try to use DotenvPlugin in place of dotenv module (https://webpack.js.org/plugins/environment-plugin/).
In my opinion, pls don't follow method 1 use in medium link, as env should not be push on git but package.json need to be done.

Make UploadFS work with angular2-meteor

I happen to need a file storage database and UploadFS seems to be the best option. My project is in Angular2 typescript and Meteor.
meteor add jalik:ufs-gridfs
So far it fails when I try to import the library like this:
import {UploadFS} from 'meteor/jalik:ufs'
The error thrown sais it couldn't find the library (on the client side).
I thought it may be because the library is in javascript while the rest of the project in typescript so I tried to write a stub ufs.d.ts, first handcrafted, then with dstmake, and then by hand again when I found I had to export the module UploadFS so that meteor (barbatus:typescript?) could see it:
declare module 'meteor/jalik:ufs' {
export module UploadFS{
interface UploadFS {
...
}
}
}
So far I had my ufs.d.ts stub file at the typings/ folder and linked in the main.d.ts. No errors at compile time. Meteor sad the DB was correctly created ... but then when I tried to use it broke.
I found that UploadFS was undefined so I supposed it wasn't referencing the library even though Meteor compiled without any error.
So I suppose the only thing I've have left is to translate jalik:ufs and jalik:ufs-gridfs to typescript by hand. Is that correct? Is there an easier way of making ufs work wit angular2-meteor?
Would you use some other storage solution? any advice either fixing this library or choosing another one?

I'm successfully importing that library and just suppressing the warnings with this line:
import 'meteor/jalik:ufs'; declare let UploadFS:any;
Keep an eye on https://github.com/meteor-typings and https://github.com/Urigo/angular2-meteor/issues/102 for proper type definitions in the future.
You should never have to re-implement a JavaScript library in TypeScript in order to use it.

import { UploadFS } from 'meteor/jalik:ufs';
console.log('UploadFS', UploadFS);
This gives me the UploadFS object and I think it's totally independent of angular2-meteor so I suppose that jalik:ufs should be working fine, even with those warnings generated by ts compiler.
About typings, those warning are very annoying, I know :) but you can pretend for now you don't see them.
Here's an example implementation of jalik:ufs I made for Angular1, but it will look pretty much the same with Angular2.
http://www.angular-meteor.com/tutorials/socially/angular1/handling-files-with-collectionfs