CODEWITHSUNDEEP
reactjswebpackwebpack-dev-server
Anunaya Srivastava
Anunaya Srivastava

Reputation: 175

How to serve static assets like json file in webpack dev server?

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').

Upvotes: 12

Views: 14066

Answers (2)

fabio.sussetto
fabio.sussetto

Reputation: 7055

You can use the webpack file-loader to have webpack serving that file as if it was any other static files, e.g. an image. You can try with this in your "main" (entrypoint) file:

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

This require is just needed to tell webpack to "emit" that file in the output destination, otherwise it doesn't know anything about it.

You also need to install the file-loader:

npm install --save-dev file-loader

Then with webpack-dev-server you should be able to access that file from http://localhost:8080/api/user.json (replace localhost:8080 according to your webpack dev server config).

However, if you need to stub a json api, I'd rather use something like these:

that are more flexible and can handle more advanced thing like serving the response with the right content type, testing cross domain issues, JSONP, etc.

If you want something simpler, you can use this: https://www.npmjs.com/package/superstatic to simply serve static files, or even simpler, check out how these one-liners to start a simple http server to serve your static json files:

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

Upvotes: 2

Abc
Abc

Reputation: 1382

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).

Upvotes: 5

Related Questions