I'm using Angular 9's built in npm run prerender --routesFile=routes.txt
Every time, I run this, it first runs complete Angular build for both server and browser.
Is there a better way to simply run the prerendering steps and avoid repeated builds which takes a lot of time?
I understand that Angular internally uses webpack, but I can't find any documentations on this.
Thanks!
Related
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!
I've built both Node.js servers, and React apps before, but I'm working on a project that requires some deployment scripting for the first time.
Specifically, I'd like to be able to have a script download a file locally and generate some json before my CRA React + Typescript build happens, in order to automate some functionality.
More generally though, I'm wondering what the best practice is for creating an arbitrary script (ideally in Typescript!) that can be run as a part of the build pipeline for a React app.
I assume this would be a node or node-ts script of some sort, but I can't figure out how to slot it into the project structure!
Bonus points if WebStorm will still be able to resolve any import/requires :)
Thanks!
I'm a building a web application with Next.js/React.js + Node.js.
I would like to deploy my application not separately but into one server(e.g. Heroku).
How could I do this and make it work?
Using package npm i -D concurrently you can run your both projects on same server.
Use this link fo reference
https://dev.to/numtostr/running-react-and-node-js-in-one-shot-with-concurrently-2oac
Never used next, but I had a similar problem last night and tried like 5 different things to no avail.
Found this today and walked thru his demo and got a better understanding of what's going on and was able to restructure my project to get it to work. This post walks thru how to have Express serve your React project using heroku-postbuild.
Other things that tripped me up: I needed two package.json files (one for Express and one for React) and I didn't have my express app directory set to find index.html
https://daveceddia.com/deploy-react-express-app-heroku/
For my understanding, node.js is a javascript-engine which is running javascript-code without using a browser(window-global). You can use javascript on a server. But I saw now a lot of tutorials(react, angular, vue etc.). In every tutorial, I have to install something with npm. I can follow there are several dev-tools which I can use on my local machine to minimize my javscript-files or compile sass to css. But in the end, when I put my files on a webserver, I just have normal javascript-files, css-files etc. No node.js code in it, right?
My question is: React, angular, vue.js etc. are written in just normal javascript without node.js right? The reason why I use npm ist just to install every dependencies with one command, right?
A question more: Is there an any recommended order to learn all these frontend-development stuff? There are so much words I have to google it: angular.js, react, vue.js, vanilla.js, typescript, backbone.js, bower, grunt, webpack, yarn etc... I dont know where I start, so I look into few tutorials, but everytime I go through these tutorials, there is a new word(technology) I have to research.
I think you're getting your terminology a little muddled.
Node.js is a JavaScript runtime, built on Google Chrome’s V8 JavaScript engine. However, that is not to say that Node programs are executed in a browser. They aren’t. Rather, the creator of Node (Ryan Dahl) took the V8 engine and enhanced it with various features (such as a file system API and an HTTP library) to create a program we can use to execute JavaScript on our computers.
Node comes bundled with a package manager called npm which you can use to install packages (such as React and Angular) from the npm registry. These packages are indeed written in normal JavaScript (or a language that compiles to JavaScript, such as TypeScript).
The reason why I use npm is just to install every dependencies with one command, right?
Kinda. You can certainly use npm to install dependencies. However, it does a lot more that that. For example you can use npm scripts to carry out various build tasks, or you can create a package yourself and use npm to publish it to the registry.
A question more: Is there an any recommended order to learn all these frontend-development stuff?
As with everything, it depends. What are you trying to build? It's relatively pointless to learn about Node, npm, React and Angular if you are attempting to build a simple static website. If I were you, I'd define a clear goal and set about learning the technologies you'll need to reach that goal. Saying that, if you are doing anything with front-end development, learning about npm will be a good use of your time.
Here's an article by way of further reading that explains things a little more: https://www.sitepoint.com/an-introduction-to-node-js/
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?