I have this config.json file located in my public folder, in which I need to put some params different in development and in production modes. I fetch it when my app loads (fetch('config.json').then()).
Is there a way that my config.json file looks like that :
{
"url": "%REACT_APP_URL%"
}
Of course, the code above doesn't work : is there another solution ?
If you are using create-react-app, you don't need to use a config file. Simple create a .env file in the root directory and add your environment variables:
URL=REACT_APP_URL
In your app, simple do something like
const url = process.env.REACT_APP_URL
Check out my post https://medium.com/#selom/nice-article-a446406f4447
Related
Hi I am developing web application in Angular 5. I am trying to read json file using http call as below. I am getting 404 error. Below is my service.ts file. Json file also remains in same folder so path may be correct.
public GetNodes() {
return this.http.get('./json1.json');
}
Below is my component code.
ngOnInit() {
this.nodeservice.GetNodes().subscribe(data =>
console.log(data)
);
I have done one work around and found my static files supposed to be in assets folder. I moved my json1.json to assets folder and I tried to access. Still I am getting same 404 error. Below is the full path where my json file kept
Projectname\ClientApp\app\components\Utilities
I am using ./json1.json because my service and json files are in the same folder utilities.
Can someone help me to figure it out the issue? Any help would be appreciated. Thank you.
To access any asset data like image or file, you need to put them in assets folder and access it from there as angular loads all the public data from assets folder so any asset will not be accessible from component's folder.
For file './json1.json' the URL will be HOST_Name/json1.json and it won't be there so better to put all files in assets folder and provide path for assets folder.
You can also change assets configuration in "angular.json" to point to your component's folder to access that json file.
I don't think this is an uncommon problem, but it seems like the keywords turn up many false positives. I've tried searching for "webpack dynamic configuration file", "webpack runtime load JSON file", and more. I see many results for configuring Webpack dynamically, but not many for configuring a bundled app dynamically.
I want to have a configuration file that sits in my deployment as raw JSON, i.e. no Webpack runtime or module boilerplate. Just a valid JSON file.
I want to "import" that JSON configuration in my code as I would as if it were a module, i.e. like this:
import config from './config.json'
I want Webpack to omit the JSON file from the bundle, but insert any necessary code to asynchronously request and inject the config.json waiting on the server.
I want Webpack to ignore whether ./config.json exists at build time, and to just optimistically assume it will be in the right place at runtime.
I'd love if I could specify that './config.json' is a module alias, and for Webpack to copy the aliased file to the correct location (with name config.json) in the build directory.
This will give me a raw JSON file in my deployment that my site administrator can edit without running Webpack. It lets me as a developer code as if config.json is a regular module. How can I do this? I've seen suggestions to use
externals: {
'./config.json': "require('./config.prod.json')",
},
but that won't work in the browser, where require does not exist.
I've tried this configuration with no luck. The JSON is still inlined into the bundle:
resolve: {
alias: {
'./config.json': path.resolve(__dirname, 'src/config.prod.json')
}
},
optimization: {
splitChunks: {
cacheGroups: {
config: {
test: './config.json',
chunks: 'all',
name: 'config',
priority: 100
}
}
}
}
I am using Webpack 4.
In short, you can't use
import config from './config.json'
At least not if this should run in the browser.
webpack externals would make this possible for a nodejs application.
What you really want is a normal http call.
Just get the config.json file with something like fetch.
fetch('url/config.json')
You can use copy-webpack-plugin to put the config in the correct place when webpack compiles (but do you want that if there are changes directly to this file on the server)
I want to acccess data.json file in myservice.service.ts .
Can anyone suggest me how to achieve it?
Directory structure
myserivce.service.ts file
Getting error like this
Use URL like data.json and Put the data.json file in your src/ directory. It will work fine.
OR
Use URL like assets/data.json and Put the data.json file in your src/assets/ directory.
Two things.
The data.json file has to exist on the server hosting the web application.
The URL you provide $http is not relative to the service or component that is executing the request (or request chain). You have to specify the absolute url which would be
private _url = '/src/app/data.json';
I created a mobile html5 web with the playframework 2.x. Users are able to upload images via the app, which then are stored on the server the app is running on.
Images are stored in public/imagesand acessed like this: #routes.Assets.at(images/images1.jpg)
My problem is that whenever a user is uploading an image to my server and then is trying to view the uploaded image afterwards, the image can`t be displayed.
I found out that whenever I restart the play process on the server, then the newly uploaded image will be displayed correctly. I normally start my production server like this:
activator dist
and afterwards unzip the created zip directory and run the generated script.
I figured that the problem is that when the app is packed it will only pack the assets available at the time in the assets.jar and therefore not be able to show new images which are added after the server is started.
So my question is, what do I need to change so that images, which are changed or added while the server is running are displayed correctly, without having to repack and restart the app.
My routes file
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Home page
GET / controllers.Application.index
# Used in Javascript to push new User into Database via Ajax
PUT /users/:i controllers.Userdata.addUser(i: Int)
... similiar PUT Requests ...
PUT /deactUser/:i controllers.Userdata.deactUser(i: Int)
GET /reloadUsers controllers.Userdata.reloadUsers(minA: Int, maxA: Int, gend: String, orient: String, verf: String)
GET /ads controllers.Application.getAds()
# Javascript Router
GET /assets/javascripts/routes controllers.Application.javascriptRoutes()
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.at(path="/public", file)
After creating dist package the public folder is accessed from created *.jar file, therefore you need to re-dist your app to make uploaded files available in it.
Instead you should create some directory in filesystem and define its path (preferably via configuration file), so you will upload files and serve them into/from independent location. Of course you'll need to write custom action to serve them as well, but that's just several lines of code.
Here's what to implement in practise:
In your routes file, add something like this:
GET /customImage/:name controllers.Application.imageAt(name:String)
Then implement imageAt like this:
public Result imageAt(String imageName) throws FileNotFoundException {
File imageFile = new File("/path/to/image"+imageName);
if (imageFile.exists()) {
String resourceType = "image+"+imageName.substring(imageName.length()-3);
return ok(new FileInputStream(imageFile)).as(resourceType);
} else {
return notFound(imageFile.getAbsoluteFile());
}
}
And that's it. Anything you put to "/path/to/image" will be accessible via url /customerImage/
They can also be accessible via revert routes like #routes.Application.imageAt(imageName)
I'm creating a generator with yeoman and I have a small issue.
Basically my generator will be abble to create a module structure like that :
nameofmodule
classes
controllers
nameofmodule.php
When I execute my generator I'm in the parent folder of nameofmodule (nameofmodule folder is created by the generator).
Now I would like to save a yo-rc.json file to save some configurations (as the module name).
The issue is that I would like the yo-rc.json file to be in the nameofmodule folder and not in the folder where I've initiated the yeoman generator.
Do you know how I could change the yo-rc.json file path ? Or maybe create a new one in nameofmodule ?
Thanks a lot
I managed to change .yo-rc.json path by changing destination root path:
this.destinationRoot(path.join(this.destinationRoot(), '/' + this.appDir));
So after I created my app structure I called:
this.on('end', function () {
this.destinationRoot(path.join(this.destinationRoot(), '/' + this.appDir));
this.config.set('appName', this.appName);
this.config.set('appDir', this.appDir);
this.config.set('modules', []);
});
Right now it works for me only with Base generator. I have no idea how to apply destination root across NamedBase generators.
I hope this is helpful.