Skip to content

Commit

Permalink
thanks Vite team, we are almost there!
Browse files Browse the repository at this point in the history
  • Loading branch information
andrefelipe committed Oct 26, 2020
1 parent 596f82a commit 763f924
Show file tree
Hide file tree
Showing 7 changed files with 548 additions and 289 deletions.
11 changes: 2 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,17 @@ A bare-minimum setup to serve as example to adapt to other scenarios (WordPress,

- Handle the cleanest way possible;

In the moment we look forward for Vite to offer these:

- The loading of Vite's HMR client (right now we add the code with PHP, would be great if Vite served index.html from custom host, so it could inject the Vite client itself) https://github.com/vitejs/vite/issues/341
- The handling of the JS entry file (Vite's index.html still have to exist right now, to find the JS file);

### Status

Works on dev server, but still have to handle production build (SOON) https://github.com/vitejs/vite/issues/341.

TODO: Handle multiple entries, for example, one js/css for the backend and another js/css for frontend
Works gracefully!

### Notes about our example code

- This "public" folder is the web server's public root, "public/index.php" is the front controller or bootstrap file;
- The "vite" folder is outside of public root intentionaly, where it would actually be within a PHP app;
- For the sake of this example, we are not setting up a SPA, instead we have multiple Vue components sprinkled throughout your page, simulating the mix of regular HTML with interactive elements (using in-DOM HTML as the template);

### Known Issue (during Dev only)
### Known issue (during Dev only)

A limitation is Vite's port during development, PHP helpers must match the one that was created during "npm run dev" (default 3000). For example, if the port 3000 is in use, Vite will try the next one (3001 and so on), so our helper PHP doesn't know about that.

Expand Down
File renamed without changes.
4 changes: 2 additions & 2 deletions public/dist/_assets/manifest.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"index.js": "index.8857d57b.js",
"style.3cee9128.css.js": "style.3cee9128.css"
"index.js": "index.f81d3d49.js",
"style.css": "style.ac844bda.css"
}
File renamed without changes.
790 changes: 534 additions & 256 deletions vite/package-lock.json

Large diffs are not rendered by default.

6 changes: 2 additions & 4 deletions vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,10 @@
"build": "vite build"
},
"dependencies": {
"vite": "^1.0.0-rc.6",
"vue": "^3.0.2"
},
"devDependencies": {
"@koa/cors": "^3.1.0",
"@vue/compiler-sfc": "^3.0.2",
"rollup-plugin-output-manifest": "^1.0.2"
"vite": "^1.0.0-rc.8",
"@vue/compiler-sfc": "^3.0.2"
}
}
26 changes: 8 additions & 18 deletions vite/vite.config.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,20 @@
const cors = require('@koa/cors')
import outputManifest from 'rollup-plugin-output-manifest'

export default {

// our output dir for production build
// our entry file
entry: 'src/index.js',

// output dir for production build
outDir: '../public/dist',

// output our manifest
rollupInputOptions: {
plugins: [outputManifest({
outputPath: '../public/dist/_assets',
filter: a => !!a
})]
},
// emit manifest so PHP can find the hashed files
emitManifest: true,

// we don't need to output the index.html
emitIndex: false,
// required to load scripts from custom host
cors: true,

// required for in-browser template compilation
// https://v3.vuejs.org/guide/installation.html#with-a-bundler
alias: {
vue: "vue/dist/vue.esm-bundler.js"
},

// required to load scripts from localhost
configureServer: ({ app }) => {
app.use(cors({ origin: '*' }))
}
}

0 comments on commit 763f924

Please sign in to comment.