We Keep Coding

Is there anyway to debug typescript using the ember cli with vscode?

I searched on stackoverflow and found this post:
How to debug Javascript-Code produced and served by ember-cli?
however, it was made in 2014 and I hope maybe some features were added or anything.
I am trying to place breakpoints in vscode in my typescript files. However, it doesn't seem to work at all, because the ember cli doesn't map ts to js files that it creates.

To enable sourcemaps for TypeScript files in Ember, you must configure Babel to use inline sourcemaps. See: Enabling Sourcemaps in the ember-cli-typescript docs.

Configuring Lerna for development environment: using shared package

I have monorepo built with Lerna. It has following structure:
packages
- create-react-app-example
- utils
create-react-app-example is like what create-react-app produces. I.e. it uses webpack for transpiling ES6/ES7 code, has hot-module-replacement on files changes etc;
utils package has just 1 file with some utility function. And this function is used from inside create-react-app-example package; It doesn't use Webpack, Babel or any other tool;
So, all pretty simple.
But I have hard times trying to configure comfortable development environment.
So there few things I want:
to be able to use es6/es7 code inside utils package (code of this package should be transpiled somehow);
automatic hot updates of main module when something changes in utils package;
The only thing came to my mind is to tweak webpack.config.js of create-react-app-example:
change setting of babel loader, so it will not exclude node_modules/utils folder and will transpile it;
and change parameters of webpack watch so it will detect changes in both packages
But I don't like solution above, it looks dirty for me.
May be there some more elegant solution?
Or may be I should also add webpack.config to utils package and somehow use it as library? If I remember correctly Webpack has such functionality.
Thanks

to be able to use es6/es7 code inside utils package (code of this
package should be transpiled somehow);
If you really want to keep utils as a separate package, just configure babel to transpile it separately from the CRA app. You can do this using the babel cli, here is an example of how to do it: https://github.com/babel/example-node-server
automatic hot updates of main module when something changes in utils
package;
Your idea to configure webpack watch sounds right. Docs here
You will likely end up with 2 watches: babel transpiling the utils package, and webpack for building and bundling the CRA app.

Converting React component to a single js file to integrate it with a blank html

A react component is developed using JSX. How to convert it to browser understandable JS code and minified to 1 js file so that it can be included as a single script tag in html ?Am very new to Js world and heard of babel and webpack.not sure how to use it and covert it to the same.
I got things generated after react-scripts build.but images are not serving if i deploy them in weblogic as static

For converting jsx into browser runnable js code, you would have to use babel. You can use babel-preset-react for this(via configuring .babelrc).
Babel Preset for React
Complete steps:
Run npm install babel babel-cli babel-preset-react
Define .babelrc at project root level, with following content
{
"presets": ["react"],
}
Run babel {jsxFile}.jsx --out {jsFile}.js

Am very new to Js world and heard of babel and webpack not sure how to use it
The statement above tells me that setting up npm build pipelines might best be avoided.
So assuming you have the component in jsx and you would like to use the javascript version, you will need to "convert" it. If it is a component that doesn't change quite a lot, you can take a look at the online babel.io repl (this is recommended by the official documentation site as well).
However, this approach can be tedious if your component changes frequently. I can highly recommend create-react-app for development. It is an opinionated toolkit which hides away webpack and babel configuration, but at the same time, their opinions are well documented and work for many general use cases.
Edit
From your comments, it seems you are already using react-scripts, then the most probably problem I see is that you perhaps forgot to specify the homepage property in your package.json (see relevant documentation) By default CRA assumes your static assets are hosted at server root, I assume you are not deploying your WAR in ROOT context, so you need to provide a static location.
I have a similar setup, where I need to package my site built with react inside a war file, I have the following setup:
in package.json
"homepage": "/<webapp_context>/build"
Then with gradle, I copy the build folder in its entirety to the WAR file (same level as WEB-INF).
This instructs react-scripts to put relative paths in all the static assets it publishes (such as CSS, js and images) and the imports then work.

TypeScript and Webpack. Loading file that don't have typescript definition

I was trying to use TypeScript with WebPack. Ts-Loader was working fine till I use Materializecss. It is not having TypeScript binding. Which I felt ok as there are very few JavaScript things and I can use it for UI purpose by doing type casting with any. Code works but Web-Pack is not adding Materializecss JavaScript files in compiled file. As, I am not importing it in TypeScript file.
I can't import it as it is not having definition file for TypeScript.
So, currently I have to fallback to Gulp + Bower approach. It is ok for now but I am missing npm approach that is better for bigger applications IMHO.
Let me know if any further details are required.

When it comes to using react with yeoman

There are a ton of packages out there that have this all bundled up but I dont like the way they set up the projects and such so I was reading the Reactjs docs on installing with npm and my confusion is:
After installing it using npm install react or adding react to
package.json
Do I add this to the "devDependencies": {} or ...
for the require statement to work, do I need to include requirejs?
Can I just do grunt serv to start everything and auto compile the jsx or do I need to do this? (it seems like that might be answered for me ..... but how can I get it to auto compile the jsx when I run grunt serv)
I ask these questions and state I don't like the existing yo ... commands for this because they don't play nicely with bacbone.js So I was going to set this up my self. if there are any repos out there for yeoman that do this for me please point me to them.

dependencies vs devDependencies: for npm package.json, devDependencies are mainly used for the tooling around working on the project itself: testing tool chain and project building modules, for example. Things you'd often see in there: Mocha, Grunt, etc. So mostly for repo contributors and alike. As a consumer of React, you'd put it in dependencies, which are for modules that your code actually needs in order to work.
require isn't for requirejs. The naming clash is unfortunate. require() is part of CommonJS. Node uses CommonJS. Browserify too. Here, it's assuming that you're using Browserify, or maybe doing server-side React with Node.
I'm not sure what you've set up to use with grunt serve. There's nothing magical that makes it work by default. You do need to do what the link said. The --watch option will look for changes to your files and auto compile the jsx to js.
Hope that helps!