All geek questions in one place

How to serve static resources like json file in dev server web package?

I am creating a responsive application. I used yeoman to create a responsive application framework. I use webpack to link 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 use axios to create http requests. I have not currently encoded a server to return json data. Therefore, to test the functionality of the application, I want to use static json data from a json file.

How can i achieve this?

Since the web server is running in this installation, I hope the json file can be used using something like axios.get('http://localhost:3000/user.json') .

+5
source share
2 answers

If you launch your application from the create-react-app instructions on Facebook, which can be found here: https://facebook.imtqy.com/react/docs/installation.html

Then I found an easy way to access JSON files from a URL without having a React Router in the way and intercept the request.

All you have to do is in your index.js of this create-react-app forest, add something like this as the very first line: import './myJsonFile.json';

And what is it like then it goes: http: // localhost: 3000 / myJsonFile.json correctly retrieves the file without using the React router in the search.

(maybe this wasn’t exactly your question, since you used a different way to create the application, but this will be the answer for those who use “create-react-app” as the base).

+2
source

You can use the webpack downloader to make the web package serve this file as if it were any other static files, for example. picture. You can try this in your entrypoint file:

 require("file?name=api/[name].[ext]!./user.json");

To do this, you just need to tell webpack to "emit" this file in the output destination, otherwise it knows nothing about it.

You also need to install the file loader:

npm install --save-dev file-loader

Then, with the webpack-dev server, you can access this file from http: // localhost: 8080 / api / user.json (replace localhost: 8080 according to your dev server config web package.)

However, if you need to stub the json api, I would prefer to use something like this:

which are more flexible and can handle more advanced things like serving a response with the right type of content, testing cross domain issues, JSONP, etc.

If you need something simpler, you can use this: https://www.npmjs.com/package/superstatic to just serve static files, or even simpler, see how these single-line devices start a simple HTTP server for serving your json static files:

https://gist.github.com/willurd/5720255

0
source

Source: https://habr.com/ru/post/1258023/

More articles:


All Articles