I just started using Remix.run and I'm trying to add a ssl certificate to my site and it requires that I make this specific path available in my app that's similar to this
www.mypage.com/.well-known/pki-validation/blah.txt
Unfortunately, I find that when i create a route folder in Remix that starts with a dot, it returns a 404 response. Even when i try to escape it in the name like so [.]well-known
https://remix.run/docs/en/v1/guides/resource-routes#url-escaping
Example of what I've tried.
app/
├── routes/
│ ├── [.]well-known/
│ │ ├── pki-validation
│ │ ├────── blah[.]txt.tsx
│ └── about.tsx
│ └── index.tsx
└── root.tsx
Any ideas? Thanks.
I think you are supposed to wrap more between those brackets.
app/
├── routes/
│ ├── [.well-known]/
│ │ ├── pki-validation
│ │ ├────── [blah.txt].tsx
│ └── about.tsx
│ └── index.tsx
└── root.tsx
Think i got something working here: https://stackblitz.com/edit/node-wmuju8
Edit: seems like escaping the dot in the wellknown folder and file is enough, so not sure why it is not working for you.
Related
im newbie in react and im having a hard time trying to organise my project structure. Right now im puting everything into my components folder but since its large website that im creating, it can become very confusing to navigate. What is the best practice to organise components? Lets say i have 2 subpages homepage and about us. In each of them i have 2 containers (sections) with 2 components each. So it would look smth like that:
Homepage - > Section A [component A, component B] | Section B [component C, component A]
AboutUs -> Section New [component X, component Y] | Section Old [component Z, component A]
How would u create your folders for something like that?
Im putting everything into components folder so its look like long list:
-Hompage
-AboutUs
-Sections A
-Component A
... and so on.
It can be frustrating when you are just starting out trying to find a good folder structure and having everyone tell you to just do what works best for you. You may not have enough experience to know what works best for you!
There are 2 main ways I have organized my projects and it has always depended on what my team has preferred.
The first way is not my personal favorite:
Option1: Single Folder for Component + Test, notice we keep the very simple layout components in their own grouped folder. Sometimes there can also be a 'shared' folder for widely used components.
src/
├─ components/
│ ├─ layout/
│ │ ├─ header.jsx
│ │ ├─ footer.jsx
│ │ ├─ page.jsx/
| | |
│ ├─ hero-dispay/
│ │ ├─ HeroDisplay.jsx
│ │ ├─ HeroDisplay.test.jsx
│ ├─ login-form/
│ │ ├─ LoginForm.jsx
│ │ ├─ LoginForm.test.jsx
│ ├─ home-page/
│ │ ├─ HomePage.jsx
│ ├─ landing-page/
│ │ ├─ LandingPage.jsx
├─ App.jsx
Option 2: Separation of Concerns Here, we organize our components by where in the app they go. This works best for highly paginated apps. If I notice that I use something between two 'page' components, then I graduate it to its own folder in the 'components' folder. Again, I have a shared folder for very simple reusued components. Don't be afraid to use sub-folders under the parent folders.
src/
├─ components/
│ ├─ layout/
│ │ ├─ header.jsx
│ │ ├─ footer.jsx
│ │ ├─ page.jsx/
│ ├─ home-page/
│ │ ├─ HeroDisplay.tsx
│ │ ├─ HeroDisplay.test.tsx
│ │ ├─ HomePage.tsx
│ ├─ landing-page/
│ │ ├─ LoginForm.tsx
│ │ ├─ LoginForm.test.tx
│ │ ├─ LandingPage.jsx
│ ├─ shared/
│ │ ├─ Avatar.tsx
│ │ ├─ NotificationBar.tsx
├─ App.jsx
I will attach a picture of a recent small project I did that was a web-app for filtering job applications. Of course there will be people that disagree with my methods (and If I were to restart the app I may organize things differently). The important part is to not spend too long thinking about it. Just pick a pattern, and stick with it for the project. You will learn what you do and don't like as you go and can re try when you start a fresh project!
Best of Luck!
There are multiple ways of organizing your code, you can for example divide it by sections as you already described, and have a shared folder where component A can be located as it is being used on multiple sections.
At the end of the day, the best folder structure is the one that you can understand, feel comfortable with, and can easily explain.
Personal advice, create a brief readme that explains your approach. That way when you work with somebody else, they will get a glance at where things are.
we are creating a new react project using create-react-apps and we are trying to figure out a way to organise our page components. After some discussion, we basically have come up with 2 solutions
the first solution is to use hierarchical structure as shown below
src/
├── copmonents/
│ ├── sharedComponent1
│ ├── sharedComponent2
│ ├── sharedComponent3
| └── sharedComponent4
├── pages/
│ ├── page1/
│ | ├── component1/
│ | | ├── component11/
│ | | | ├── component111
│ | | | └── component112
│ | | └── component12
│ | └── component12
│ ├── page2 (same as above)
│ └── page3 (same as above)
└── utils/
We create pages and put components inside them. Once we find a component is used in multiple places, we hoist it into the component folder.
Idea behind is to use file hierarchy to reflect component structure. We fell developers might find it easier to locate files using this solution, but drawback would be it can easily go too deep?
the second solution is to use a 'flat' structure
src/
├── copmonents/
│ ├── component1
│ ├── component2
│ ├── component3
│ ├── component4
│ ├── component5
│ ├── component6
│ ├── component7
│ ├── component8
│ ├── component9
| └── component10
├── pages/
│ ├── page1.tsx
│ ├── page2.tsx
| └── page3.tsx
└── utils/
this way we have a very lean page folder and keep all components into a components folder. While this structure seems to be cleaner than the first one, I do agree that some people may feel this solution "less organised" as all components are dumped into a centralised place.
I do recognise this is a highly opinionated topic and I was thinking of using json normaliser as an analogy, but people even have different opinions in normalizing json.
thoughts?
Move files around until it feels right ref
Dan Abramov’s site
But, you can aboard it strategically with features (layout, Button, basket)
src/
├── copmonents/
│ ├── Layout
│ ├── Basket
│ ├── Button
| └── Feature specific
├── pages/
│ ├── page1/
│ | ├── index.ts/js/
│ | ├── logic.tsx
│ | └── ui-specific-to-page
│ ├── page2 (same as above)
│
└ hooks
one point that I missed in my initial post(I only discovered it yesterday), with the hierarchical code structure, we will end up with long referrence paths like ../../../../utils inside your components (imagine you are referring to a utils function inside component111 or it's sub components). While with the flat structure we don't have this type of issues.
there are ways to get around with it, like a custom resolve for webpack, but it may involve some effort to set it up (especially when your project is bootstrapped by cra)
src/
├── copmonents/
│ ├── sharedComponent1
│ ├── sharedComponent2
│ ├── sharedComponent3
| └── sharedComponent4
├── pages/
│ ├── page1/
│ | ├── component1/
│ | | ├── component11/
│ | | | ├── component111
│ | | | └── component112
│ | | └── component12
│ | └── component12
│ ├── page2 (same as above)
│ └── page3 (same as above)
└── utils/
Where is the ideal location to put image file (.jpg, .png) in react static boilerplate
How to use them inside component?
Usually static files, images etc are stored inside ./public/ folder. It would be better if you store the images inside that folder. You can use another separate folder inside ./public/ folder, like images.
It is pretty clear if you have gone through the documentation page. Here is the folder structure. Please see the portion that is in bold.
.
├── /components/ # Shared or generic UI components
│ ├── /Button/ # Button component
│ ├── /Layout/ # Website layout component
│ ├── /Link / # Link component to be used instead of <a>
│ └── /... # etc.
├── /core/ # Core framework
│ ├── /history.js # Handles client-side navigation
│ ├── /router.js # Handles routing and data fetching
│ └── /store.js # Application state manager (Redux)
├── /node_modules/ # 3rd-party libraries and utilities
├── /pages/ # React components for web pages
│ ├── /about/ # About page
│ ├── /error/ # Error page
│ ├── /home/ # Home page
│ └── /... # etc.
├── /public/ # Static files such as favicon.ico etc.*
│ ├── /dist/ # The folder for compiled output
│ ├── favicon.ico # Application icon to be displayed in bookmarks
│ ├── robots.txt # Instructions for search engine crawlers
│ └── /... # etc.
├── /test/ # Unit and integration tests
├── /utils/ # Utility and helper classes
│── main.js # React application entry point
│── package.json # The list of project dependencies and NPM scripts
│── routes.json # This list of application routes
│── run.js # Build automation script, e.g. `node run build`
└── webpack.config.js # Bundling and optimization settings for Webpack
i’ve juz started with angular, i saw this post on folder structuring http://www.johnpapa.net/angular-growth-structure/
This is what my folder looks like which i'm building for an eCommerce site frontend:
.
├── index.html
├── css
├── images
├── fonts
├── scripts
│ ├── app.js
│ ├── directives
│ │ ├── search
│ │ ├── image-slider
│ │ ├── faq
│ │ └── form
│ └── api
└── templates
├── nav.html
├── footer.html
└── page
├── full.html
└── sidebar-right.html
Is there any better way/practice that you would do for this?
My greatest worry would be moving on into integrations with a CMS(opencart/magento) folder structure.
Your dir structure looks fine, however you may run into issues while integrating with any CMS as they put their views on a different directory.
Workaround: Once you do integrate Magento or some random CMS, move your views to the CMS's view folder and make sure you serve index.html with your angular from the CMS.
Hope I could help.
I have an app that uses a custom application-specific library (sap.ui.foo) which contains custom controls, views and controllers.
My deployment strategy is serving my custom library from the same server/port that is serving the index.html file.
I would also like to use SAP's CDN to load the OpenUI5 libraries (sap.m, etc).
I am using the Grunt/node tools that come with OpenUI5's GitHub repository.
When I load my application all locally (no CDN) it works perfectly, but is very slow (such a huge download payload I suppose) so I'm trying to use the CDN in hopes of improving startup performance.
My index.html looks like this: (edited after #codeworrior's answer):
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.layout, sap.m, sap.ui.foo"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"ns":"./",
"sap.ui.foo": "./sap/ui/foo/"
}'
>
Here is my directory structure (which to my knowledge is "standard"):
src
├── foo
│ └── src
│ └── main
│ └── webapp
│ ├── index.html # start point
│ ├── resources
│ ├── test-resources
│ └── WEB-INF
├── sap.m
├── sap.ui.commons
...other sap libs...
└── sap.ui.foo
└── src
└── sap
└── ui
└── foo
└── # my controls...
and after a grunt build:production my "target" directory looks like this:
target
├── openui5-sap.m
├── openui5-sap.ui.commons
├── openui5-sap.ui.core
├── openui5-sap.ui.demokit
├── ...other sap libs...
├── openui5-sap.ui.foo
└── resources
└── sap
└── ui
└── foo
├── Bootstrap.js
├── controllers
├── controls
├── data
├── font
├── img
├── js
├── library.js
├── library-preload.json
├── models
├── tasks
├── themes
├── util.js
├── views
└── wrappers
But, after I do a grunt serve:target and hit the url http://localhost:8989/foo/, in Chrome's dev-tools I get:
failed to preload 'sap.ui.foo.library-preload': Not Found - sap.ui.ModuleSystem
Uncaught Error: failed to load 'sap/ui/foo/library.js' from ./sap/ui/foo/library.js: 404 - Not Found
The network tab shows me that the CDN files are being served just fine, but the files that I'm trying to serve locally (such as my custom lib's library.js and library-preload.json) are 404's.
Any advice on how to get my library to load?
If your library is stored in the usual way (reflecting the full qualified names in the folder structure), then it should be sufficient to define a corresponding entry in your data-sap-ui-resourceroots attribute:
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.layout, sap.m, my.uilib"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots="{
ns:'./',
'my.uilib': './my/uilib/'
}">
</script>
If the structure is different, just adapt the path in the configuration. resourceRoots are configured early, so you could even specify your lib in the data-sap-ui-libs attribute.
But maybe you tried that already and it didn't work. Then the problem might have been with the spelling of the option. It's 'resourceroots', not 'resource-roots'.