menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

infrastructure

Infrastructure-Components let you configure your React App Infrastructure easily

Channels
Team

NPM Audit issues on first install of single-page-app:

August 6, 2020 at 5:35am

NPM Audit issues on first install of single-page-app:

August 6, 2020 at 5:35am
A)
│ High │ Prototype Pollution
│ Package │ dot-prop
│ Patched in │ >=5.1.1
│ Dependency of │ infrastructure-scripts [dev]
B)
│ High │ Prototype Pollution
│ Package │ lodash
│ Patched in │ >=4.17.11
│ Dependency of │ infrastructure-scripts [dev]
C)
Moderate │ Cross-Site Scripting
│ Package │ serialize-javascript
│ Patched in │ >=2.1.1
│ Dependency of │ infrastructure-scripts [dev]

August 7, 2020 at 12:11am
Simplifying the startup instructions would be helpful.
a) in the readthedocs page this: "Please follow the general installation instructions: ../installation." but on Github this link goes nowhere.
b) "stackname" is a term not generally used in reactJS apps. It would be helpful to understand the relationship of the stackname to the name of the app. in ReactJS the app name in the file structure is, I guess, the stackname. But in the spa example, these names are different. Its easy to fix, but better to avoid having to do so.
c) This: "The SinglePageApp-component further requires the serverless-single-page-app-plugin as a devDependency:" (but this is already in package.json)
d) for newbies, it is not clear that { stackname } in the build / run commands means just "stackname" without the curly braces.
In your book you explain things very clearly - a pleasant surprise in this low-doc / no-doc opensource environment. However, in my experience, the critical stage is the initial setup - if this is not very clear, and written without any assumptions about the expertise/experience level of the user, the project may never get off the ground. Some minor changes to the installation instructions would make this less stressful...
Nevertheless, I do now have the spa app running. Now I just have to figure out how to integrate my navbar with your Medium article "how-to-create-a-navigation-bar-with-react-router-styled-components-and-infrastructure-components" handy.
I think the infrastructure-components idea is a significant and exciting step forward for reactJS. :-)
ADDING THE NAVBAR
I am following the navbar implementation in your Medium article. When I change the code for the two routes in index.tsx it does not then work properly. If I enter just this: http://localhost:3000/#/ I get nothing. If I enter this: http://localhost:3000/#/other it works as before. if I enter http://localhost:3000/#/right I get this:
NavBar Positioned at the right-hand side
And nothing on the right.
The navigation code at this time is as per the article
When I add the further code block: Automatically Populating the Navigation Bar - nothing works any more.
It would be helpful if there was a final example of the code in case I messed up the changes.
Also, I guess that the warning messages about the out of date dependencies might point to a factor here.
This in Hyper:
WARNING in ./node_modules/infrastructure-components/dist/libs/loader.js 20:37-60 Critical dependency: the request of a dependency is an expression @ ./node_modules/infrastructure-components/dist/assets/spa.js
The article finishes at this point, leaving me uncertain how to proceed... My environment has individual "pages" as components in src/components. The Navbar sits with some other objects in a src/component file Header.js. When a user clicks on a tile in the NavBar the app should export the navbar to Header.js with the page name of the requested page and then exports the Header & Page to another component called PageAssembly.js. However this is not working because the user click action (on-Click in the div) is handled in a child function in Navbar.js and, as a child function, it cannot return or export anything to anything else.
I was hoping that this article would provide a solution but I cannot see how to map my structure on this code even if it works when the dependency issues are resolved.
Perhaps I can call the navigation component with the pageName as a prop and import the Header component and render Header & Page? If the code was working I would play around with it - but right now I can't do anything...
Hello, first of all: Thank you for all your feedback! This is really helpful for me to further improve infrastructure-components.
To point 1: The audit issues. I am currently working on that. But some of the used libraries introduce breaking changes. Thus, it is quite some work to get these issues out of the way. But I aim to get them done
To point 2: The easy introduction. Of course it is my responsibility (as an author) to make things clear. I will try to get these things straight.
Good to hear from you. Are you in Frankfurt? I am in Sydney :-). Is it possible to add a link to the required page in the on-click function in the div? This seems to be a hole in reactJS for single page apps...
To point 3: The navigation bar. You can find the working example in this repository: https://github.com/infrastructure-components/navigation-bar
If localhost:3000/#/other and localhost:3000/#/rightwork but localhost:3000/# does not, then I'd assume there is no <Route path='/' .../> as a child of your <SinglePageApp/>
Having individual pages should be no problem. But you'll need a <Route /> component for each of them. The respective <Route component={YourComponent}/> then points to the actual page
I live in Berlin. Not far away from Frankfurt :-) Using links in the div should work like this:
import { useHistory } from "react-router-dom";
function ClickableDiv() {
const history = useHistory();
function handleClick() {
history.push("/your-path");
}
return (
<div type="button" onClick={handleClick}>
Go home
</div>
);
}
I have been many times to Berlin (one of my favourite cities) and also many times to Frankfurt and Köln (I have a good friend there, also in IT). My grandfather was language master in the UK and studied the German language in Berlin. My mother spoke German before she spoke English :-)
Thanks for the advice on the link. I think I can also pass a prop? I need to link to the PageAssembly component file and tell it which page to attach to the Header/Navbar before rendering it...
I am enjoying your book...
Let me know the next time you are here, if you like. I've been once in Sydney. beautiful city and great people. The ClickableDiv from above is a normal (functional) React component. You can pass properties as usual. If you like to provide arguments to the called page, you could either use path- or query-parameters. Or, since it is all within your app, you could add some state to a global redux store.

August 7, 2020 at 9:55pm
Yes, Sydney is very beautiful, though it is quite cold at the moment! Not as cold as Berlin though... haha. It was -3 degrees when I arrived last time and I had to go out and buy a thick padded jacket. I wear it here sometimes but its a bit too warm for Sydney...
With regard to the issues with Infrastructure Components and dependencies, is this happening because I-C is still in development? I would be concerned if I built and sold a website which then fell over because of changes to the dependencies. How will you manage this in a production environment?
I have a question about isomorphic websites and server-based rendering. My understanding was that the server provides html-only in response to user requests and that all the JS code resides on the server where it is less likely to be hacked. I also understood rhat this was better for SEO since all the crawlers can read HTML. But your description is somewhat different, with no HTML being on the front end and thereby requiring keywords in the index.tsx file.
Also, in an Isomorphic envoironment, is it possible to selectively render chunks of code on the server, with others rendering on the front end? I ask because I have an animated logo in the header using Three.js and rendering at 65cycles per second and I am wondering how that would work in an isomorphic environment...
I will look you up next time I am in Berlin :-)
Stephen

August 9, 2020 at 12:09am
Haha... Nothing is ever easy in this crazy react world...
function ClickableDiv() { const history = useHistory(); function handleClick() { history.push("/your-path"); } return ( <div type="button" onClick={handleClick}> Go home </div> ); }
I f I create this with handleClick as a nested child function of ClickableDiv, handleClick is no longer visible.
If I separate them as two child functions in the Navbar component I get an error about using history.
This is what the divs look like currently...
<div className= "flex-container-navbar">
<>
<div
id="Tile1" className="linkcontainer"
onClick={HandleClick}
onMouseEnter={e => HandleMouseEnter(e)}
onMouseLeave={e =>
HandleMouseLeave(e)}>Home
</div>
<div
id="Tile2"
className="linkcontainer"
onClick={HandleClick}
onMouseEnter={e => HandleMouseEnter(e)}
onMouseLeave={e => HandleMouseLeave(e)}
>About
</div>
...
I am exporting everything to App.JS which looks like this:
... import statements for all components
function App() { return ( <div className="App"> <HeaderLogoNavbar /> <BrowserRouter> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/technology" component={Technology}></Route> <Route path="/marketing" component={Marketing}></Route> <Route path="modules/" component={Modules}></Route> <Route path="/emgage" component={Engage}></Route> <Route path="/admin" component={Admin}></Route> <Route path="/blog" component={Blog}></Route> </BrowserRouter> </div> ); }
export default App;
If I move the useHistory to the start of NavBar that error goes away but now, even hardcoding a route, I get:
TypeError: Cannot read property 'push' of undefined HandleClick src/components/Navbar.js:250 247 | let pageToRender = "Home"; 248 | if (event.target.id === "Tile2") { pageToRender = "/About"; } 249 | console.log("handleClick: Rendering page [" + pageToRender + "]");
250 | history.push("/");
I get the same with .push(About) ,push("About") or .push("/About" or .push("./About"...
Oh, for a proper manual!!

August 11, 2020 at 6:04am
In React, you can only use hooks (including useHistory) in a Component. Thus, you can't move it out. Can't you move it into the component that renders:
And you provide the path as an argument
function TopComponent = props => {
const history = useHistory();
function handleClick(path) {
history.push(path);
}
return<div className= "flex-container-navbar">
<>
<div
id="Tile1" className="linkcontainer"
onClick={()=>HandleClick("somepath")}
onMouseEnter={e => HandleMouseEnter(e)}
onMouseLeave={e =>
HandleMouseLeave(e)}>Home
</div>
<div
id="Tile2"
className="linkcontainer"
onClick={()=>HandleClick("otherpath")}
onMouseEnter={e => HandleMouseEnter(e)}
onMouseLeave={e => HandleMouseLeave(e)}
>About
</div>
Edited

August 15, 2020 at 4:04am
Thanks so much for this. It's a possibility, though the navbar currently exports to Header.js where it is integrated with the other header elements... I would have to figure out how to make that work... But I am pretty sure I won't be able to add the navbar inside a container in the header once it is Index.js where the rendering occurs...
In the spa-example, the route is selected in Navigation.tsx and rendered in index.tsx - I was trying to follow this logic...
I moved the router code to index.js but I think I am still snookered - I can either export the route or the navbar, but not both... I think this is just a reactJS flaw - one of many! You can use the router, but only if you will accept a trivial navbar...

August 15, 2020 at 4:22pm
Why can't you export both? Besides the default export, you can export (as named export) as many components as you like.

August 15, 2020 at 11:35pm
Ha! Yes, but if I export the navbar to index.js where the routing code resides, I will get 2 navbars (one in the Header, and another one in index.js). Or I have to live with a navbar outside the header, which I don't want. But I might have a solution - the issue with the navbar currently is that the on_click updates state at a local level, and so the Navbar does not export itself along with the name of the page (as a named export).
But i found an article which seems to solve my problem - by shifting the local state (from HandleClick) to the parent (Navbar.js) and therefore, hopefully, forcing Navbar to export so that my required page can be added by the Header.js code... I am about to try that out. The article is specifically about this issue, which means that other people have the same issue with router... https://vegibit.com/create-a-navbar-component-in-react/

August 16, 2020 at 8:48am
It must be quite old - the language is all this.blah and "extends.component"... I never worked in the pre-hooks react environment so this is all double-dutch to me... There is so much out of date stuff on the net!
I can't make it work anyway. :-(

August 16, 2020 at 6:21pm
can you share the source code with me? If you get two navbars, it sounds to me as if you were rendering it at two points. Export/Imports shouldn't do that.
Show more messages