I'm looking into bringing React into my codebase(pyramid, jinja2). It almost looks like a good fit. I'm just confused as to how to handle translations from python. I'm using the pyramid.i18n library and I would normally just have _() function in context that translates strings like {{_('Hello')}} to "Hola" and whatnot. If I moved to React my markup would now be in JS. And I don't want to have Jinja render my JS so it remains static. Is there a good way to handle this?
Ended up using https://github.com/webpack/i18n-webpack-plugin and serving up the specific bundle file based on a saved language setting.
So on the backend we store in the database which language a user wants to use. We have json files of translations for all the languages & words we support. When compiling the bundle files with this plugin we get a bundle for each language that uses those json files to swap out the translated words. So something like bundle.en.js for english and bundle.es.js for spanish. When a user requests a page we serve up the bundle file associated with their selected language stored in the DB.
Related
I have a directory full of text files that I need to read in my react web app
-resources
|-file1.txt
|-file2.txt
|-file3.txt
I would like to store this resources directory somewhere in the app such that the contents of resources can be listed, and individual files can be iterated over on a line-by-line basis.
currently, I'm stuck on listing the files. I'm storing them like this
-node_modules
-public
|-resources
||-file1.txt
||-...
-src
But I really don't care where the resources directory is located. I tried using list-react-files based on this, but got Module not found: Error: Can't resolve 'fs'.
for further context, I was thinking the code to scan for files would be in in App.js, such that the scanned files could be used to populate certain components.
import React from "react"
import './App.css';
...
function App() {
//searching for files
var files = [...];
return(
//create components which can list and work with the files
...
);
}
export default App;
So, to summarize the question, how can I list files in reactJS?
p.s.:
this project was made with create-react-app
part of the point is that it should be easy to add new files to this directory, but I see no reason this process has to be "dynamic"
When people are using your react page, it is "running" on their computer and the software does not have access to all the files and data you'd like to use.
You will need to do this at "build time" when your service is being packaged up, or "on the server".
When you are building your react app, you can hook into processes that can find files and perform operations on them. Gatsby might be your best bet. Look at how people add "markup" files to their projects, built a menu from them and then render them as blog articles. NextJS, Vite, and other frameworks and tools will work, you may just need to learn a bit more.
The other approach, to do this "on the server" means when you are running code on the server you can do almost anything you like. So, your react app would make a call (e.g. rest request) to the server (e.g. NodeJS), and the code running on the server can use fs and other APIs to accomplish what you'd like.
From what you describe, doing this as part of your build step is probably the best route. A much easier route is to move this data into a JSON file and/or a database and not crawl the file system.
Looks like its a client side rendering app and not server side (node app). Resources folder you trying to list is residing in server and react app (javascript) running on browser can't access it directly.
To whom it may concern, I spent more time than I should have working on this. I highly recommend converting everything to JSON files and importing them. If you want to be able to scan for JSON files, make a JSON file that includes the names of all your files, then import that and use that for scanning. Doing things dynamically is a bare.
If you don't reformat, you'll likely need to use Fetch, which is asynchronous, which opens up a whole can of worms if you're using a framework like React.
If you're just importing json files, it's super easy:
import files from './resources/index.json';
where index.json looks like
{
"files":[
"file1.json",
"file2.json"
]
}
if you need to import the files more dynamically (not at the very beginning) you can use this:
var data = require('./resources/'+filename)
this will allow you to scan through your files using the index.json file, and load them dynamically as needed.
I want to develop a multi-page React app, where you have multiple HTML files instead of a single HTML with routes. However, so far all the solutions I found require a Node.js server.
After much struggle I eventually wrote a webpack config file to generate multiple HTML files myself, which generates multiple HTML files according to a certain file name pattern that I defined. The config file, however, is not something easy to maintain.
Then I wonder: isn't there a standard solution for that?
It is not a part of the pure React library, but quite a few frameworks that are based off React have a routing and html-generating solution for you.
Have a look at Gatsby, which is what I use for your exact scenario.
Each .js file inside src/pages will generate its own page in your Gatsby site. The path for those pages matches the file structure it’s found in.
How is it possible to load external templates from the server during runtime with react-templates (or other reacte template system)?
I can't find any doc's about it but noticed that some people mentioned it as answer in SO questions.
Or should I just implement it my self and use the function "dangerouslysetinnerhtml" to inject the html?
What I want to do?:
Store html/css snippets in xml (or json), that is produced/managed by a CMS and load these in a react app. It makes it very easy to change the html, or support different languages without changing the code and making a new deployment.
I have an app running that is doing exactly that, that I have made with Google GWT, and I want to do the same in the react app.
I'm working with a SPA web app with Django backend and Angular frontend. Sharing constants like enums (eg. Django model field choices, error codes/messages) has always been a struggle. Is there an easy way to handle them?
I was thinking about generating a JSON that contains every constant in the project, which is created on the backend (maybe during collectstatic), what can be loaded in a <script>tag during page load as a JSONP object. The JSON resource name could look like const.XXXX.json where XXXX is the md5 sum of the file itself, so it can be cached and updated easily. The problem is that this would mean a lot of code change in Django.
Or maybe creating a repo which contains the shared constants, and bump it in both in the backend and frontend. But This would also mean a complete rewire. Maybe with this approach, I could make use of the IDE highlight both server and client side.
But both approaches take a relatively lot of effort and code change, so I thought I'll ask before jumping into it.
I've seen examples in php, Java, etc. But not for Django (and Angular).
I have a task where I need to export the html to pdf. Where the pdf should have the same design as it has in browser. Basically I need the css should also work in pdf file. Am using angularjs for front end. But I have not found any use full module or any js library which supports my requirement. I also need to update AngularJS scope variables values in pdf. I found one http://pdfmake.org/#/ but it only supports some predefined css attributes. Please provide some suggestion if there is some npm module or any js library which render the html to pdf with css.
Thank you
I am not sure if there is a fully featured JavaScript solution, which can convert HTML/CSS to PDF on client side. It makes sense to take a look to server-side solutions - there are many available.
In an "hybrid" scenario on client side you'd need to populate a HTML/CSS template with variable values, send the resulting HTML/CSS doc to the server side and to receive back a generated PDF.
In the case it is not important anymore, if the converter is written in JavaScript. You may use a standalone native applications, utilize print/PDF output subsystem of WebKit (i.e. PhantomJS) or it can be, for example, a Java module deployed to your application server (i.e. PD4ML).