I am trying to access an external file to use in my App.js file , called scrollv.js
which is in a folder called tutorials . But it returns
Can't resolve './tutorial/scrollv.js' in '/Users/bet/Desktop/PROJECT/mern/react-native/project/tutorial/learning'
Here's my file strucrture, my scrollv.js and my App.js
Every time react re-enders my page sometimes I get an error like the one above or the predicted output which only appears on the web.
Is there a solution for this?
Related
I have a small React/Webpack app where I import a JSON file at the top of the file. At buildtime, the contents of the JSON are read into the resulting bundle.js. If I then make changes the the JSON file I need to re-build the app for the React app to change.
Is there a way to get it so the React app will read in the JSON file at runtime?
One idea I had was to manually edit the output HTML to read mydata.js (in addition to bundle.js) and then mydata.js would just assign window.mydata to the data. Then the React app would read in from the window global object. But I think that's a hacky solution curious to see if there are better paths. Thanks!
You can move the json file in the public folder of your react app (so it's served as a static asset) and then use a fetch call to access it. Attention: this will be much slower at execution time (as the browser needs to execute an additional HTTP request).
Could someone explain to me what is the difference between index.js file and _app.js? In the Next tutorial it says to change the index.js but what is rendered for me is _app.js.
_app.js will contain your whole app, meaning this will be rendered in any page of the project. Eg. if you add a <div>hello world</div> in this file, you will see the Hello World on each and every page of your website. More reading here.
index.js will only be rendered if you access / path of your website. You will use index files whenever you create a new page, for example you want an about page, you will have an about folder containing an index.js, all of this contained in the pages folder. More reading here .
I recently posted Background image not showing with CSS and thought it has to be something with the url I included even though I was sure it was correct (they were in the same directory so it was straightforward). I wasn't able to resolve that issue and now, I face the same issue but for a .js file.
Picture of work space:
Picture of the Run prompt:
.
In app.js I do have require('./like_button');. I am new to using these technologies, I must be missing something general...
You have to serve the static file from a specific folder. In your case views.
Add this line where you've declared your app.
app.use(express.static('views'))
For more reference check out
http://expressjs.com/en/starter/static-files.html
Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?
A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.
I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.
I have a sample SproutCore app at https://github.com/ericgorr/myproject. The app is *sc_technique* inside of the project. This app is based upon the gist at https://gist.github.com/mauritslamers/5384031.
As best I understand the technique being described, the external data to be loaded is stored in the helper.js file. For example:
MyApp.statechart.sendEvent("loadData",[{ folder: "name": files: ["filename1.js"] }]);
It is then added to the document as a javascript script. The lines of the script are executed to generate events and the data is added to the app's SC.Store. After the script executes, it is removed.
When I attempt to implement this technique in my own app, I cannot get it to work. The error I am getting is:
Uncaught SyntaxError: Unexpected token : helper.js:1
It seems as if the app is trying to load the helper.js file before I tell it to do so. I get this error at the app first launches and before it executes the first line in main.js.
I know there are other problems in this app, but I cannot work on those until I can get past this problem.
as the browser is pointing out: there is a syntax error in the helper.js file:
the colon after "name" should be a comma.