Wheres the best place to add non npm extensions in Reacts folder structure - reactjs

I'm building a React webapplication but got multiple JS and CSS extensions (Not available in the node package manager), which I want to integrate into my project.
Since I don't find it pretty to add a vendor folder into the src directory, and also the public folder doesn't seem to be the correct place, what is the best directory or most common used place to add those (as example) Iconfonts, js gallery slider etc.?

There isn't one "right" way to structure your folders. If you don't like the sight of a vendor folder maybe consider creating a "commons" folder and store those packages there. I know it sounds like a cop-out but really just go with whatever makes most sense in your situation.

Related

What is the best way to add translation.json file to a React app running inside docke

I am working on a react web application, which may require multi language support. I am using i18n-next which internally loads the required configuration file from specific directory based on the language selected by user.
The word or scentences that needs to be translated may increase based the screens that user going to add and also if use adds new folder, we will loading those languages into our application.
What is the best way (I mean Scallable, Easy to configure, platform provided...) to satisfy the requirement?
( :( All I can think of is mounting an external locales folder to the folder inside container.. Is that the only way.. or something else is there..)
Note: kubernetes and rancher is there to manage. Plase provide solution/suggestion around that.
Nandri.
If you can add the files from the Storage bucket to Ci/CD & add files to the docker image and manage inside it that would be one way.
Following this way might be helpful during scaling up the application and need to manage the external locales folder and anything worried.
By external local folder mean you want to use the Host path of the node what if your node is changing by Kubernetes during maintenance how will you add the files to the node each time or manage it?
If you will use the PVC you might face the issue of readwriteonce if you are scaling the replicas you require the readwritemany. Make try to create stateless containers as much as possible.
If you can create and add the directory inside the docker image and directly use it that would be perfect or else you might could use the NFS like minio or glusterFS which support the readwritemany also.

How can I create an add folder functionality to my React CMS application?

Click here to see a picture of what I mean
I haven't tried anything yet because I'm not sure how to even approach this problem. I'm not even sure what to Google. I do, however, have a pretty good handle on React. Thanks!
Update: The folders will not be storing files, just hyperlinks.
You need to model the problem space first. i.e. models for folders, and files. Each having properties (name, etc.) and associations (folders can have many files and subfolders).
To store the physical files you can use a third-party service like Amazon S3.
This would get you started at least.

How to merge a template with a site?

Hugo works with themes one can download (or create from scratch). They live in their subfolder of the site root (namely themes).
When reading about customizing themes and playing along, I realized that a theme reproduces the structure of the root site (it has layout, static and similar folders, same as the root site).
Is it possible (and not discouraged) to copy a theme over the root of the site, and customize it from there?
I realize that I will lose the ability to update a theme, but it should not matter that much as i will heavily update it anyway. For completeness, I actually did the copy and my site did not change (it now now built without --theme=) but it may just be luck (or discouraged practices)
This is possible, yes. The main folders from the theme (layouts, static, archetypes, data, and i18n) can be copied over to the root site folder without any change in functionality. Other folders that you copy over will be ignored (e.g. exampleSite). Most files in the root directory (e.g. theme.toml) are also ignored. So you should be able to copy everything over and have it just work, unless the theme author decided to put a config.toml or a content directory in their repo.
However, probably the easiest way to modify a theme is to clone the git repository into the themes directory, create a new branch in git, and make your modifications there. That way you can use git to merge any changes from the main repository into your version. Without git, this takes a lot more work. It also makes it a lot easier to swap your custom theme for a different one - just add the new one to the themes directory and change your config.toml.

Meteor unwatch folder

I am trying to make a folder to be not watched. Is there a way to make one of the folders not watched in Meteor? I don't want my project to reload if I change a content in that folder.
Not exactly. Meteor assumes that if the folder content changes, it also needs to reload/restart the server, because the business logic of the application might have changed. Therefore it reloads these files and restarts the server
However, you might be able to "abuse" the tests/ directory or any of the directories/files mentioned below for that purpose. As explained in the Meteor guide on Application Structure, paragraph "Special directories":
Any directory named tests/ is not loaded anywhere. Use this for any test code you want to run using a test runner outside of Meteor’s built-in test tools.
The following directories are also not loaded as part of your app code:
Files/directories whose names start with a dot, like .meteor and .git
packages/: Used for local packages
cordova-build-override/: Used for advanced mobile build customizations
programs: For legacy reasons
So the reasonable choice would be to create a dot directory, e.g. .myStuff, and place anything that you might need to update but do not want to trigger a server restart there.
Just build your app in a package so you can decide which files you want to make available or not :)

Dart: Accessing a resource out side the project|web/ directory

I have a web-app(browser based) which needs to access a folder full of icons that resides outside the web folder.
This folder MUST be outside the web folder, and would ideally exist outside the project folder all together
however, when specifying the path to the folder neither "../" or making use of a symlink will work
when the page attempts to load the image I always get
"[web] GET /Project|web/icons/img.png => Could not find asset Project|web/icons/img.png."
however I set the image source to "../icons/img.png"
how can i get dart to access this file properly
PS: I attempted a symlink to another part of the filesystem (where the images would be kept ideally) however this did not work either.
The web server integrated into DartEditor or pub serve only serves directories that are added as folders to the files view. When you add the folder to DartEditor you should be able to access the files. This is just for development.
You have also to find a solution for when you deploy your server app. It would be a hazardous security issue when you could access files outside the project directory. Where should the server draw the line? If this would be possible your entire server would be accessible to the world.
Like #Robert asked, I also have a hard time imaging why the files must not be in the project folder.
If you want to reuse the icons/images between different projects you could create a resource package that contains only those images and add them as a dependency to your project.
If you want a better answer you need to provide more information about your requirements.
If you wrote your own server (by using the HttpServer class) it may be possible to use the VirtualDirectory to server your external files.
Looking at look the dartiverse_search example may give you some ideas.
You could put them in the lib directory and refer to them via /packages/Project/...
Or in another package, in which case they would be in a different place in the file system. But as other people have said, your requirement seems odd.

Resources