80 lines
3.1 KiB
Markdown
80 lines
3.1 KiB
Markdown
# Integrating with Backend Framework
|
|
|
|
If you are building a purely-static app (one that is deployed separately from the backend API), then you probably don't even need to edit `config/index.js`. However, if you want to integrate this template with an existing backend framework, e.g. Rails/Django/Laravel, which comes with their own project structures, you can edit `config/index.js` to directly generate front-end assets into your backend project.
|
|
|
|
Let's take a look at the default `config/index.js`:
|
|
|
|
``` js
|
|
// config/index.js
|
|
'use strict'
|
|
const path = require('path')
|
|
|
|
module.exports = {
|
|
dev: {
|
|
/ Paths
|
|
assetsSubDirectory: 'static',
|
|
assetsPublicPath: '/',
|
|
proxyTable: {},
|
|
|
|
// Various Dev Server settings
|
|
host: 'localhost',
|
|
port: 8080,
|
|
|
|
// skipping other options as they are only convenience features
|
|
},
|
|
build: {
|
|
// Template for index.html
|
|
index: path.resolve(__dirname, '../dist/index.html'),
|
|
|
|
// Paths
|
|
assetsRoot: path.resolve(__dirname, '../dist'),
|
|
assetsSubDirectory: 'static',
|
|
assetsPublicPath: '/',
|
|
|
|
productionSourceMap: true,
|
|
|
|
// skipping the rest ...
|
|
},
|
|
}
|
|
```
|
|
|
|
Inside the `build` section, we have the following options:
|
|
|
|
### `build.index`
|
|
|
|
> Must be an absolute path on your local file system.
|
|
|
|
This is where the `index.html` (with injected asset URLs) will be generated.
|
|
|
|
If you are using this template with a backend-framework, you can edit `index.html` accordingly and point this path to a view file rendered by your backend app, e.g. `app/views/layouts/application.html.erb` for a Rails app, or `resources/views/index.blade.php` for a Laravel app.
|
|
|
|
### `build.assetsRoot`
|
|
|
|
> Must be an absolute path on your local file system.
|
|
|
|
This should point to the root directory that contains all the static assets for your app. For example, `public/` for both Rails/Laravel.
|
|
|
|
### `build.assetsSubDirectory`
|
|
|
|
Nest webpack-generated assets under this directory in `build.assetsRoot`, so that they are not mixed with other files you may have in `build.assetsRoot`. For example, if `build.assetsRoot` is `/path/to/dist`, and `build.assetsSubDirectory` is `static`, then all Webpack assets will be generated in `path/to/dist/static`.
|
|
|
|
This directory will be cleaned before each build, so it should only contain assets generated by the build.
|
|
|
|
Files inside `static/` will be copied into this directory as-is during build. This means if you change this prefix, all your absolute URLs referencing files in `static/` will also need to be changed. See [Handling Static Assets](static.md) for more details.
|
|
|
|
### `build.assetsPublicPath`
|
|
|
|
This should be the URL path where your `build.assetsRoot` will be served from over HTTP. In most cases, this will be root (`/`). Only change this if your backend framework serves static assets with a path prefix. Internally, this is passed to Webpack as `output.publicPath`.
|
|
|
|
### `build.productionSourceMap`
|
|
|
|
Whether to generate source maps for production build.
|
|
|
|
### `dev.port`
|
|
|
|
Specify the port for the dev server to listen to.
|
|
|
|
### `dev.proxyTable`
|
|
|
|
Define proxy rules for the dev server. See [API Proxying During Development](proxy.md) for more details.
|