Behind-scene after "umi dev" - node.js

Just started learning React js and then I found this enterprise-level react application framework called Umi. Since I am just a beginner with Node js too, I am having a hard time understanding what really happened after I typed 'umi dev' in the command line.
I spent some time digging into the source code. My current guess is that somehow umi used another js library called 'webpack-dev-server' to actually run an express server locally. However, I am still confused on how the 'umi dev' command makes all these things happen. Is 'dev' a command? Or is it a class? What should people do if they want a new command like 'umi my-own-command'?

umi is installed by yarn global add umi
i think, you can take a look about ~/.config/yarn/global/node_modules/umi
There's an introduction to umi
there is a file package.json
directorys lib, bin, scripts. and so on
i hope this helps you

Related

Convert existing Angular project to Universal, encounter 'referenceerror: navigator is not defined'

I recently faced the task of converting a fairly mature angular project to SSR because I had overestimated the search power of SEO in angular projects. I'm not familiar with node, my angular project is on an apache server and uses php(slim) as the backend api, however, when I started trying to use "most of the tutorials", i.e., the first step, introducing nguniversal/express-engine into the project, it went well, npm did not report any errors.
Then I tried to run npm run build:ssr and it also worked fine. The problem is that when I run npm run serve:ssr, it ends up throwing a "ReferenceError: navigator is not defined" error...
Earlier, I built a completely clean angular project for testing, from build:ssr to run serve:ssr. Even I specified node xxxx/xxxx/main.js directly, no problem, which is obvious, because the angular project for testing is absolutely clean.
However, this does not work on my current "existing angular project". Yes, I fully understand that SSR doesn't allow for navigator or most so-called DOM manipulation, and although I'm not familiar with angular universal yet, I've previewed it and I know that's not possible, but here's the biggest problem :
In this existing angular project, there is no any navigator operations, not even a single line of code
In fact, main.js is also generated automatically, I can't stop it at all, I don't understand why there is "navigator" written in main.js?
I've checked many so-called solutions, including writing something in server.ts, but nothing helps, how can I continue? This is really quite desperate!
Big thank any help!

Node Space Dot Command Node JS

I am coming back to a Node JS script after some time. I am in my development directory/folder with many test JS scripts. I load the script that, by name, looks like the one I want to run. It has the most recent date which supports this point of view. I run the following command:
C:\testscripts>node .
It runs the script successfully. But I can't see how this has happened. My script is what's largely contained in GoogleDrive for Developers Node JS Quickstart I look at the requires, scopes, credentials etc but can't figure out how my dev environment 'knows' which script to run when I use the generic command above?
So I can also run the same script using it's name.
C:\testscripts>node gdocToTextDownload.js
But what is it that lets me leave the file name out and still get the same result? I would appreciate a suggestion here.
Node looks at the main field of package.json and runs the file listed there.
npmjs.com documentation for package.json main
Nodejs.dev documentation for package.json main

Is it possible to work on react using JSX, without a node server and using create-react-app

I'm in a big trouble, I'm a really a noob on React and in the company I work on I propose to code a project that was on pure Javascript to update it to ReactJS,
In this project I can't use a node server And I have been coding React without JSX as shown on this page:
https://facebook.github.io/react/docs/react-without-jsx.html
it's working... but as soon as the project gets more complicated, then gets more complicated to code...
I though I have found a solution to work on JSX without a Node server, that is to code with create-react-app:
https://github.com/facebookincubator/create-react-app
I can code on JSX and then run the command "npm run build" and it generates all the React code in the build folder, and then I tried to run build/index.html, but it doesn't load anything, any idea If what I'm trying to do is it possible?
Once you get things working the right way, I highly recommend you use .jsx. You can hook a frontend to any backend you want. Don't you have an existing index.html file that you can import your React entry file into?
create-react-app has its own way of doing things. If you're updating an existing codebase, you should probably be starting from scratch.
You need a server to host your dist/index.html site. This requires you to build a simple server with either node or some other back end programming language. I believe the reason it works whenever you use create-react-app it is because when you npm start create-react-app runs a simple server to host your application. Why can't you use a node server?

Angular 2: NodeJS vs XAMPP

I'm starting to learn Angular 2 and I am quite lost in some subjects... like the server.
Following the instructions for a Quick Setup I installed Node and npm... when I run the project in Node everything goes perfect. The label <label> gets recognized and it gets the template for that label (in this case an html form).
But when I run the same project in MAMP, that label doesn't get recognized and comes out a 'Failed to load resource' error in the console for the template associated to that label.
So I guess Angular 2 is dependent on Node and that's a problem because I want to upload later the project and I think my hosting plan doesn't allow me to run Node...
I don't know if I'm prejudging, maybe anybody can help me clear this... Thanks.
Angular2 has niether any Relation nor any Dependency on node.js.
You can write Angular2 app just using Angular2 packages without using node or mamp or xampp and host that app.
If you have written any thing in Angular2 and node.js combination then you can host it on free services like Heroku for testing purpose.
Final solution:
Ok, wrong again. I'm the worst detective ever.
it works with TypeScript as with JavaScript, just need the "npm start" to compile TypeScript into JavaScript. Then it automatically runs on a "localhost", but once compiled, you can run the index.html like any html, without the need of a server, like you were all saying, it's not like .php which makes all sense.
so the problem that led me to all of this misunderstandings was that the Node "localhost" worked and the Apache "localhost" didn't, and the mistake was that I was calling into #Component: templateUrl: "../template/file.html", and the path is written in "/app/whatever.js", but it's working from "index.html", so it would be just templateUrl: "template/file.html" and everything works as expected.
what I don't know is why it works, with the wrong path, when I run it from Node! an error would have saved me a lot of time... and yours...
Well, at least I have clarified a lot of concepts in this investigation. Thank you all!
Thanks, Zeeshan, in the links you gave me the clue. As I told on my original message, I started following the Quick Start, but I forgot to mention I chose TypeScript over JavaScript... and that was the "mistake", because TypeScript needs Node to compile to JavaScript, as I'm guessing for the results I get:
the TypeScript project only runs after executing it in Node via console ("npm start") and not in Apache, that doesn't get all the Angular part (it gets the tag <whatever></whatever> but doesn't translate it into the content <whatever><h1>Hey</h1></whatever>)
with JavaScript it works "as always", without need of a server, as you were telling me
So I'll have to choose between using TypeScript (and all the official documentation!) and host it in some platform like Heroku or work with JavaScript without needing an specific server so I can still work with Apache.

How can I see which script is being executed by sails lift?

I'm working on a project built by someone else using Sails.js (which is a pretty new technology for me).
The problem I'm having is that for every little change I make to the code I have to restart the server, which is obviously very time consuming. Some articles I read mention the use of forever, which I have installed. The problem I have is that the project I'm working on doesn't have an app.js file in it's root directory.
Following the documentation for Sails and the examples of how to build a test application, I figured there should be an app.js file in the root directory of the project, so I'm kind of confused.
When I run sails lift everything works fine, but I can't figure out how to start my server in a forever fashion.
Thanks.
according to this:
http://sailsjs.org/#/documentation/anatomy/myApp/app.js.html
there should be an app.js, otherwise you cant run it.
On your left hand side there is a filetree, and it shows where it should be located.
Sure it isn't there?
Maybe the app.js file is hidden in the OS? did you try to run it from CLI?
Or try to search the whole directory for sails.lift,i use linux so I would use searchmonkey or something like that

Resources