webpack-everything
webpack-everything copied to clipboard
Vue cli template with webpack, vuex, vue router, eslint, image compression, graphql, apollo, server side rendering, code splitting and progressive web app (PWA) capabilities
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