Develop Reference

Read in JSON at runtime in React Webpack app

I have a small React/Webpack app where I import a JSON file at the top of the file. At buildtime, the contents of the JSON are read into the resulting bundle.js. If I then make changes the the JSON file I need to re-build the app for the React app to change.
Is there a way to get it so the React app will read in the JSON file at runtime?
One idea I had was to manually edit the output HTML to read mydata.js (in addition to bundle.js) and then mydata.js would just assign window.mydata to the data. Then the React app would read in from the window global object. But I think that's a hacky solution curious to see if there are better paths. Thanks!

You can move the json file in the public folder of your react app (so it's served as a static asset) and then use a fetch call to access it. Attention: this will be much slower at execution time (as the browser needs to execute an additional HTTP request).

NextJS - rendering only on server or .. both

So I have a users.js JSX file with some exported component:
... return <MainContainer keywords="users"> export default Users
when using SSR/SSG, I get the users HTML (just a bunch of <li> tags) in the browser as expected
the browser also receives a .next/static/chunks/pages/users.js with digested/lower-level representation of that React component as client-side js. This gets imported via <script> in HTML.
AssumptionL that js file is for rendering, CSR-style, of the users dataset, into HTML.
Because it contains stuff like
_components_MainContainer__WEBPACK_IMPORTED_MODULE_3 ... react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("li", ....
So, clearly the js in <script> can create <li> elements as well as the server. I think it can create the whole page content, if executed.
Question: why the apparent duplication of effort? Does the browser, with SSR/G, get BOTH HTML and js and js ALSO runs producing HTML - surely not? I am using getStaticProps in my users.js
If the assumption why we have a compiled/digested React js (under .next/static) in the browser, is incorrect, then why does NextJS need this file pulled in via <script> ?

Next.js is used for server-side rendering of the react apps. React with another framework like angular and vue.js are client-side frameworks, they run in browsers but there are some technologies to run this framework on the server-side, and next.js is a solution for running react application server-side. It also makes react development very simple features of Next.js are:
Server rendering React Apps.
Automatic code splitting and lazy loading.
Built-in CSS support.
Hot Reloading support.

How do I add another page in an angular-cli project?

Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.

I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.

Will ng-include download all the included HTMLs or pre-compile into a single HTML

From a performance POV, does using ng-include Angular directive cause included HTMLs to be downloaded to the user's browsers as its own file?
I am not using node server to serve the HTML files, I'm using a CDN like AWS CloudFront.

AngularJS is an entirely client side framework so, yes, it will download each template and it won't pre-compile anything.
You may want to include something like gulp-ng-templates as part of your client-side build process. This will generate a single js file that will preload all your templates into the template cache, using their natural URL (so your other code doesn't need to change)

ng-include will download the template on request. So, if you use ng-include to include 3 templates, that means 3 ajax request.
However, you can include the template inside your index.html as a script using type equals text/ng-template
<script type="text/ng-template" id="my-tpl.html">
Content of the template.
</script>
Then:
<div ng-include="my-tpl.php"></div>
This way you will have all the templates inside one file.

Providing auth for static HTML/JS application with Sails.js

I have a client side application written in plain HTML/JS (Not with Angular.js or other front-end MVC framework). It contains multiple html file. each includes different js library.
I would like to provide basic user auth feature(using sails-generate-auth) to limit the access of this client-side application using Sails.js
But I'm having problem putting those html file into /views
Should I change all *.html in to *.ejs and edit /config/routes.js to route each file? How do I make use of the req.session.authenticated ? Please provide some direction. Thank you.

Your solution written in your question would work. Here is another option:
You can send the file straight from your controller or for universal usage you can create a custom response that will send the html file instead of attempting to render the ejs view. Call it sendHtml(), or modify the current ok.js to know and send your html files
http://sailsjs.org/#!/documentation/concepts/Custom-Responses
Use something like
res.sendfile('/views/' + rest.controller + '/' + res.action + '.html');