I am building a react app. I have used yeoman to generate the react app structure. I am using webpack to bundle all js files. My package.json
is -
{
"dependencies": {
"axios": "^0.15.0",
"classnames": "^2.2.5",
"es6-shim": "^0.35.0",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-mdl": "^1.7.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"redux": "^3.5.1",
"todomvc-app-css": "^2.0.4"
},
"devDependencies": {
"autoprefixer": "^6.2.2",
"babel-core": "^6.13.0",
"babel-eslint": "^6.0.2",
"babel-loader": "^6.2.0",
"babel-plugin-istanbul": "^2.0.1",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.2.0",
"babel-preset-react": "^6.1.18",
"browser-sync": "^2.9.11",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.23.1",
"del": "^2.0.2",
"es6-shim": "^0.35.0",
"eslint": "^3.2.2",
"eslint-config-xo-react": "^0.7.0",
"eslint-config-xo-space": "^0.12.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^5.0.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-filter": "^4.0.0",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-sass": "^2.1.1",
"gulp-util": "^3.0.7",
"html-webpack-plugin": "^2.9.0",
"jasmine": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-phantomjs-shim": "^1.1.2",
"karma-webpack": "^1.7.0",
"node-sass": "^3.4.2",
"phantomjs-prebuilt": "^2.1.6",
"postcss-loader": "^0.8.0",
"react-addons-test-utils": "^15.0.1",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "2.1.0-beta.20",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"
},
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"test:auto": "gulp test:auto"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"jasmine": true
},
"extends": [
"xo-react/space",
"xo-space/esnext"
]
}
}
I am using axios
to make http requests. Presently, I have not coded a server to return a json data. Hence, to test the app's functionality, I want to serve static json data from a json file.
How can I achieve this ?
Since this setup is running a web-server, I hope a json file can be served using something like - axios.get('http://localhost:3000/user.json')
.
webpack-dev-server serves bundled files from the directory defined in output. path , i.e., files will be available under http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]
devServer.client Allows to set log level in the browser, e.g. before reloading, before an error or when Hot Module Replacement is enabled. webpack.config.js module.
When you run webpack dev server what webpack dev server does is, instead of creating a bundled file ( e.g. bundle. js ) in dist folder, it creates a bundled file in memory. It then serves that information to express , and then express creates a web socket connection to render that on the browser on a certain port no.
If you're starting your app from the Facebook's 'create-react-app' instructions found here: https://facebook.github.io/react/docs/installation.html
Then I found an easy way to be able to access JSON files from the URL without having the React Router get in the way and intercept the request.
All you have to do is in your index.js of that 'create-react-app' scaffolding, add something like this as the very first line: import './myJsonFile.json';
And that's it, as afterwards going to: http://localhost:3000/myJsonFile.json would correctly fetch the file without React router interfering in the lookup.
(maybe it wasn't exactly your question as you've used a different way to generate the app, but this would be an answer for those who use the 'create-react-app' as a base).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With