How to separate i18n language folders into another repo? - reactjs

So, we have a React project with +50 languages. We are using i18n with i18n-backend plugin to load the translations. The JSON files with the translations are sitting in the public/locales folder. Inside we have +50 folders, each one named with the language code, and inside each one there's a translation.js file.
The goal is to decouple this from the main repo since making a small copy change inside a bugfix makes PRs with +60 files and it's annoying for code review. Also allows other teams to make changes to the copy easier without interfering with the UI part.
So my question is, how can I move this to another repo?

Related

Why are images inside my assets folder only displayed when the folder is outside the src-folder?

In two different ReactJS projects, I am working with images which are stored inside of an "assets"-folder. For some reason though, they are only found/displayed as long as the folder containing them is outside the source folder. Why is that?
Without knowing more details about both projects it's not possible to say which specific part of the project is causing this. However, if the issue is that moving the assets folder around does not break things until you move it into the source folder, this will most likely be due to whichever deployment system you use not making raw source files available as assets.
If the issue is just that moving or renaming the assets folder prevents you from being able to access it, then that will be down to the configuration of your deployment process.

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

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.

How to build an Alexa skill with multiple developers?

I'm struggling to handle the pipeline building an Alexa skill across several developers and existing docs just aren't cutting it.
We have four developers and when we check our code into our git repo, checkout new branches and so forth, we're continually overwriting our .ask/config and skill.json files.
How do we set this up to avoid overwriting? Ideally we're all building towards the same Alexa skill but we'd each like to test in our own instance -- separate skills and separate lambda functions.
As soon as I grab another developers branch, I lose my necessary config and skill files.
My gitignore has these files ignored, but since they're checked in they're continually being tracked.
How do I handle multiple developers?
I see several problems here.
First of all - clean up your repo: make sure that all developers have ./ask/* entry added to their .gitignore files and ./ask directory is removed from the origin.
To solve overriding problem - you can create a template-skill.json with placeholders for lambda's ARNs and all the other things different for each developer. Then, before ask deploy just create the valid skill.json file by running some script that replaces placeholders in the template JSON with your data (kept in another gitignored file).
Setup the same in your CI instance with configurations for different environments.

Write out SCSS code onto a page in Jekyll

I've created a web page that's for all intents and purposes, a style guide for other developers working on our application.
I have my .scss files within the _sass directory in my Jekyll project, and it's created all the CSS files beautifully. On my page however I want to display the code from these .scss files in the page within some <pre><code> tags.
Currently I have the code in here repeated in both places. When it was quite small it wasn't such a problem, but now it's got bigger it needs DRY-ing out.
I first went down the path of using Jekyll's {% include [path/to/file] %}, and then realised that only works for stuff in the _includes folder, and I couldn't use the include_relative option either as the _sass folder isn't a child of the location it's used.
Secondly I tried using the angular approach, as I'm already using it in my application. Threw in some <pre><code ng-include="'../_sass/components/_sflButton.scss'"> and expected it to work. Of course, it didn't because the _sass folder isn't generated into the actual site when you run it. And I can't seem to find a way of getting it to include it. Tried changing a few things in _config.yml to no avail.
So, TL;DR, I want to either be able to include the code from my _sass folder onto my page via Jekyll, or find a way of getting the _sass folder to be loaded into the generated site so I can load it in with Angular. Am I trying to do an impossible task here? Willing to listen to any suggestions that mean the code is only written in one place.
The theory behind getting this done is as follows:
_sass is a special directory for Jekyll (similar to _layouts, _includes) that is handled differently in comparison to other directories you create. Its contents are not output to the destination directory.
you can write simple ruby programs and add them to a directory called _plugins and Jekyll will run those custom programs during the build process. (Ignored by GitHub Pages).
Now write a ruby program to "read" the contents of _sass and have the resulting data be formatted as a hash and have this hash fed to existing site_payload
The hash can be additionally passed as a Drop instance to have the data available via the Liquid templates.
I concede this answer doesn't actually solve your problem esp., if you're not familiar with Ruby, and Jekyll codebase. but it'll serve as a starting point..

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 :)

Resources