Webpack Everything
This is a vue-cli template that comes with webpack, ESLint, server side rendering (SSR), route level code splitting, apollo + graphql and progressive web app (PWA) capabilities. This template requires SSL in production in order to function properly.
Preprocessors
Choose from
- Stylus
- Scss
Geting Started
npm install -g vue-cli || yarn global add vue-cli
vue init narkoleptika/webpack-everything example-project
cd example-project
npm install || yarn
npm run dev
Dev server with SSR and HMR will run by default at http://localhost:3000
Production
npm run prod
SSL
You should use SSL. This template assumes the use of encryption by default. You will need to set the following environment variables to run production.
SSL
- SSL port -- default:3001
CERT
- Path to the ssl certificate -- default:./private/server.crt
KEY
- Path to the server key -- default:./private/server.key
Testing SSL
You can self sign some certificates for localhost (Which are handy to have for testing SSL in general)
mkdir private
cd private
openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
openssl rsa -passin pass:x -in server.pass.key -out server.key
rm server.pass.key
openssl req -new -key server.key -out server.csr
openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt
It is a good idea to test production in incognito mode to avoid troubles clearing the 301 redirect later.
No SSL
Use the following to test production without SSL
npm run prod--no-ssl
Please note: Service workers require ssl in order to work. If you don't use encryption, you will lose offline capabilities.
Apollo + GraphQL
Optionally, you can choose to include a GraphQL server with Apollo integration.
When Apollo + GraphQL is included, you will need to run an additional server with the following command
npm run api:dev
Production
npm run api
The api will use the same KEY
, CERT
, and CA
env vars in production
ESLint
Optionally, you can choose to include ESLint. This will include eslint-loader which will display errors on an overlay when there are lint errors
Bundle Analyzer
This template comes with webpack-bundle-analyzer
which will generate a report of the chunks that get output from webpack. It will run by default in development and can be enabled for production by setting the STATS
env var.
Environment Vars
Without Apollo
NODE_ENV
PORT
- default:3000
HOST
- default:0.0.0.0
SSL
- default:3001
KEY
- default:./private/server.key
CERT
- default:./private/server.crt
CA
NO_SSL
STATS
With Apollo
NODE_ENV
RENDERER_PORT
- default:3000
RENDERER_HOST
- default:0.0.0.0
RENDERER_SSL
- default:3001
API_PORT
- default:3002
API_HOST
- default:0.0.0.0
API_SSL
- default:3003
ORIGIN
- default:localhost
KEY
- default:./private/server.key
CERT
- default:./private/server.crt
CA
NO_SSL
STATS