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.
Related
I have created a new next.js project. Is it possible to have an accessible static html page "outside" the project?
For example the structure would look like this:
.next
components
node_modules
pages
public
styles
aboutus
Now looking at the folder /aboutus/, it will have a structure like this:
css (folder)
js (folder)
images (folder)
index.html
Where the index.html references the css, js and the images.
But when i call http://localhost:3000/aboutus it gives me a 404 error.
Already tried this setup locally, but didn't work.
It turned out a 404 error.
I expect that to work.
Is it possible to have an accessible static html page "outside" the project?
No. Only files that are in the pages folder are generated as pages. pages in NextJS
The closest you can get to accomplish that is by running npm run export and manually insert your "aboutus" folder in the "out" folder. But the project wont have the benefits of These features.
In case the .js is not Next related, have you tried to put the aboutus folder in public/aboutus ?
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.
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.
Image that I have so many JavaScript models, libs or some other modules, I don't add any module name for these modules.
However, if I have merged these files into one, is there any methods to add the module name to every module depending on the location of the JavaScript file, so I can require it by its name.
---edit
if my app directory looks like below:
js
lib
jquery.js
backbone.js
...
core
models
m1.js
...
pages
template
header.js
footer.js
page.js
...
I want to merge all files(including JS Modules, client-side jade template, models, etc.) into one files, how can I do that?
thanks,
kz