I want to list all the files in a specific directory on the server where my react is running. fs was removed from reactJS so I can't use that (I tried and it errors out). I'm not looking to do a file tree just get a list of files and maybe some basic info such as create/edit date. Everything I find via npm is a tree that needs that supplied but doesn't pull it.
Try this
import * as fs from 'fs';
See this ticket.
Related
First of all I know Laravel is a PHP framework and has nothing to do with the frontend(JavaScript) of my application. BUT laravel provides the possibility of using webpack which if I got things right is for node modules and other javascript stuff..
What I've done so far:
Installed ThreeJS with command:
npm install three
than executed
npm run dev
After that I included the Libary in my app.js file in the resources folder of Laravel like this:
var THREE = require('three');
(I tried including it whitout assinging it to a variable but that seemed not to work so I just did what some google research told me)
Again I ran npm run dev and the Libary was included inside my packed app.js in the public/js/ path of my project. Everything seems to be fine. I included the app.js file inside of my view and also set the script attribute type to module. But now when I try to import threejs via
import * as THREE from 'three';
inside my view it says that the module cannot be found. I know I could just copy the contents of ThreeJS inside the node_modules folder to my public path JS folder but I wanted to keep it as a node module. Any Advise?
I'm feeling like super stupid right now but adding a window.THREE instead of var three fixed the issue somehow.. Thanks for your help and time anyway!
Before you can instantiate Three.Js you have to import the library:
In your resources\js\app.js
import * as THREE from 'three';
const scene = new THREE.Scene();
However, it's recommended to create a instance in the component that actually requires it unless you need it globally.
Here is my folder structure
when i tried to run my react app it give me this error
Failed to compile.
./src/css/owl.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried google it and it says i need to create manual loader to load my html file. It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.
Short answer:
No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.
There is no need of webpack her, as it is already provided and packed by create-react-app, you can simple create a component of your page template provided.
Long Answer:
React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.
In the Owl.js write the following:
import React from 'react';
export default () => {
return (
<React.Fragment>enter code here
// paste the code from your owl.html file. (everything that is written under <body>)
</React.Fragment>
)
}
Use this newly created component in the App.js you have by importing it into.
Also use the css by importing it simply in the Owl.js file, like this:
import '~you-path~/owl.css';
And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.
I hope this clears the confusion here.
I've got a project which has an "old" javascript/php app. It contains dozen of json files for getting data from the database.
Besides that I'm going to migrate some modules to react but still want to use those json files for now. Is it possible to fetch the json files from the react app? Both apps are in the same repository.
Lets pretend you have this folder structure:
/
/LegacyApp
/LegacyApp/file.json
/NewApp/index.js
Then you can simply import the files from your new app via the require function:
// inside index.js
const data = require('../LegacyApp/file.json')
// Or newer ES6 Syntax
import data from '../LegacyApp/file.json'
That JSON-file will be imported as a JavaScript object.
I'm using renderToString function from react-dom (on my server side). The code looks like (+/-):
import Home from './app/containers/Home';
const app = express();
app.get('**', (req, res) => {
const html = renderToString(<Home />);
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
res.send(html);
});
Everything goes smooth, until I try to deploy it on the server.
Example error in the console:
Error: Error parsing triggers: Cannot find module 'store/Home/actions'
When it appears?
If I change my path to some other component, which does not use any other components (only modules from node, like react or react-redux) it works correctly.
But if I try to use some component which uses other components and imports them, e.g.:
var _CreateUser = require('components/Pages/CreateUser'); (it's in the rendered component)
Now it will fail with error:
Error: Error parsing triggers: Cannot find module 'components/Pages/CreateUser'
So currently Im stuck, because I have to use my whole app on server side, not just a single component which doesn't import anything :)
Why does it work this way? Why does it fail? Is it bad webpack config fail?
Looking forward for any help. Thank you.
Note, as I said above, if I render to string some component with any imports (that doesn't use any other component in it) - the server side rendering works fine and Im able to see the renderedToString content before page loads.
Everywhere you import local modules you need to include the directory in the path otherwise it will search node_modules for a named package and ultimately fail.
require('./store/Home/actions');
Or:
import HomeActions from './store/Home/actions';
...depending on which import style you're using. An accurate directory is always needed as a part of the import/require statement.
You're using a relative path, cd into and deploy from the functions directory so it's correct.
It looks like your Home component is inside functions/app/containers/Home and you need access to the file functions/app/store/Home/actions.
From your containers/Home file, you need to go up two directories to the app folder, then go down two directories to correct file. So
import HomeActions from '../../store/Home/actions'`.
Each ../ represents going up one directory to the parent folder. We went from
functions/app/containers/Home to
functions/app/containers/ to
functions/app and then we can specify which path to continue on from there with
store/Home/actions
I have a programm where I need to have long multi line strings. It's a pain to store them in the .js document, because js doesn't have multi line strings and I end up having a twice as long as the screen width line looking as ugly as "This is an example.\n"
Is there a way to have a txt file, from where I can import strings with new lines (or at least just import strings)?
There is a Meteor Assets object that allows you to read files in the private directory of your app, in the following way for example for text files.
Assets.getText("foo.txt", function (err, res) { ... });
See full documentation: http://docs.meteor.com/#assets
Previous answer works only for public files. If you want to access file data that is visible only on the server you should probably use 'fs' npm module. It's described in details here: http://www.eventedmind.com/posts/meteor-file-uploader-part-2-server-side-save
The meteor-yaml package makes this easy - it automatically loads any .yaml files in your project, parses them into JavaScript objects, and makes them available in YAML.data.
In my application I have some code outside of the meteor app that needs the same settings, so I prefer to have the config file outside of the meteor project directory. Then I load the file like this:
var fs = Npm.require('fs');
fs.readFile('<path to file>.yaml', 'utf8', function(err, data) {
if(err) {
//Throw exception if the file is missing
throw new Error("Missing config file")
}
else {
//Read the file into a JavaScript object
config = YAML.parse(data);
}
});
Unfortunately, the meteor-yaml package is a little out of date with how the meteor team wants node packages to be loaded now, so if you're using a recent version of meteor the package won't work out of the box.
I filed a bug about this, but in the meantime to get around it I installed it as a private package, as opposed to installing it from atmosphere, and fixed the bug. To do this:
Clone the repo under your projects packages/ directory
Comment out the Npm.require lines.
Add a call to depends:
Npm.depends({yamljs: "0.1.4"});
Run meteor. Meteor will detect the meteor-yaml private package and install the dependencies.