Up until now I have been building my application using the following structure.
/src
/components
/shared
/messagebox
/alertbox
/Home
/About
So as you can see I have shared components which are components being used on other components / pages. and I have the concept of Home, About which are also components (which translate to viewable pages) as everything in Angular is now supposed to be a component - right?
Does anyone have a better implementation of the structure of a NG 1.5 app?
I now need to create some filters and as far as I am aware I cannot hang these off of a component, so where is the based place for putting this type of file?
Also other things that come to mind are constants, services etc.
There is no recommendation on Angular docs site as far as I can see.
The one which i used to follow for my project is :
project
/www
/assets
/components // directives
/accordion
/accordion.html
/accordion-directive.js
/accordion-controller.js
/accordion-controller-test.js
/core // shared services
/route
/router-service.js
/sections // pages we build by adding components
/registration-page
/registration.html
/registration-controller.js
/registration-controller-test.js
app.js
index.html
index-controller.js
app-configuration.json // for keeping constants
this might help you.Please check.
Related
Can we keep containers-folder outside of the components-folder ?.
And common-folder & helpers-folder inside component-folder ?
How can we arrange the below folders in components-folder ?
containers
pageContainers
common
utils
helpers
To my opinion the "modular" approach is a pretty good for react app. The purpose is to "scope" your files.
For example :
/src
/Components
/Button
index.js
style.css
/Containers
/Dashboard
/Components
...somes components used only in dashboard
index.js
style.css
/UserProfile
/Components
...somes components used only in UserProfile
/Service
fetcher.js
reducer.js
index.js
style.css
/Services
reducer.js
/auth
...
App.js
As you can see we have a "Container" folder Each "module" has his own style, component, services, utils etc...
The benefits of "scoping" your application are:
More easly maintenable
The structure is more clear for the user, you don't have ton search your "Button component" in the only Component folder were you store 100 other components
Evolutive. For exemple you have the "Auth module" wich allow the user to authenticate with your site. If you scope well your component it will be more easy to add some new ffeature for this service/component.
Of Course the general tree of folder will be bigger. You can adapt the structure with your needs but don't forget to think "scope".
This is probably not the "best way". but it has some very good advantages
if you want to go futher i recomand you the excellent article :https://medium.com/#alexmngn/why-react-developers-should-modularize-their-applications-d26d381854c1
and
https://medium.com/#alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1
You can use fractal file structure, a comprehensive hackernoon post summarizes it all here.
It makes you reason about the location of files and folders, easier management of components, and paves way for infinite scaling.
I have a simple project working nicely using JSX / React / Gatsby.
I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.
I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.
I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX?
Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure?
Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?
Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?
As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static folder.
According to the docs, the /public folder is meant to be generated automatically when building the site and should be added to .gitignore.
Files added to the /static folder will be copied to /public when building the site so it should have the same effect. More info here.
We have a common widget in each of our pages across multiple services, and we want to write a common client-side rendition code in ReactJS for this widget as an external hosted js, such that each of the pages can include this externally hosted JS in their pages to render the widget. But many of these pages are written in different JS frameworks (angular/inferno/typescript/etc) or even in plain vanilla JS. Now pardon me if this is an ignorant question, but I think that ReactJS code can be compiled into javascript using babel, and the bundled js file can then be directly included in any page using any framework(angular/typescript/etc). Is my assumption correct, or will such an approach lead to problems. Any other inputs?
PS: I am very new to any of these JS frameworks, and have only worked on small projects involving plain vanilla JS.
You can mount your react root node (typically <App/> ) in any html DOM node. This is what react-dom does by
render( <App />, document.getElementById("root"));
which would be a familiar line for you.
Now, coming to how to actually do this. I assume you are using create-react-app.
Run npm run build inside your project folder.
When it finishes, you will find a bunch of files inside your-project-folder/build, including
build/index.html
build/static/js, build/static/css, etc
Open the build/index.html file in a text editor and study it. I think you will be able to figure out the rest.
We're attempting to create a PHP Laravel application using ReactJS as the view for each page. Laravel handles the routing and the presenting of each view. Each view loads a react js bundle.js file. Each bundle.js file is custom to that view and inside contains the react components needed for that view (screen). What were finding out is that each bundle.js file is about 4MB because each contain its dependencies as well as the components. Also were still trying to figure out how to share a component such as a TableComponent.js file across multiple views but have been so far unsuccessful.
Are we architecting this totally wrong? Should there always be only one bundle.js file for the application as a whole?
Or are there good fixes to remove the dependencies from each bundle.js file in a single dependency js file that gets loaded for all views?
Is there a good way to reuse ReactJS components accross multiple bundle.js files ?
Sounds like a perfect case to use Webpack which is an amazing bundling tool, here is an example on how to build multiple entries(pages):
https://webpack.github.io/docs/multiple-entry-points.html
You just write your entry point code, and webpack will figure out the details on how to build shared dependencies of different entries(pages) into a common bundle.
What is the best angular file structure for me? My project is going to be a SPA with a video feed on the main page, and pages to view specific posts. I want my users to be able to login, vote on the content and an admin section to add content.
You can see my file structure here - https://github.com/bliitzkrieg/TrailerFeed or below
/app
/assets
/css
main.css
main.min.css
/sass
main.scss
_variables.scss
/components
_header.scss
/components
/dashboard
/feed
_feed.html
feed.js
feedController.js
/header
_header.html
header.js
headerController.js
headerDirective.js
/spec
app.spec.js
app.js
index.html
routes.js
Your file structure looks fine. You have your files organized by component rather than type. I would suggest removing the underscore prefix from your templates as this is redundant. Every template in angular is a partial so they don't need to be indicated as such.
You may want to keep your unit tests in the components directory as well. headerDirective.spec.js can live with in your header component folder.
Controllers are classes and instantiated as individual instances (as apposed to services which are classes that are injected as a singleton). So controllers should be named in PascalCase rather than camelCase.
It would seem that your component SCSS should live with the rest of its component files as well. But there are very valid reasons not to do this.