Skip to content

Commit

Permalink
adjusted information about image path
Browse files Browse the repository at this point in the history
  • Loading branch information
andrefelipe committed Feb 12, 2021
1 parent 6963d43 commit 1611821
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 5 deletions.
13 changes: 9 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,18 @@ Of course, HMR and styles will work just fine! And fast!
- 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 1 (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.
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 wouldn't know about that.

So make sure Vite dev started at http://localhost:3000
The solution is to stricly specify which port to use, and match the PHP side to the same port. Check vite.config.js for example.

Currently haven't thought of a way to overcome this. It's rare and some solutions would polute our vite.config anyway.
### Known issue 2 (during Dev only)

Image urls within CSS works fine BUT you need to create a symlink on dev server to map to your assets folder. This is an expected limitation as noted on [Vite docs](https://vitejs.dev/guide/backend-integration.html)

The solution is here, adjust the paths and run in terminal:
`ln -s {path_to_vite}/src/assets {path_to_public_html}/assets`

### Tips for multiple entries

Expand Down
3 changes: 2 additions & 1 deletion vite/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// IMPORTANT image urls in CSS works fine
// BUT you need to create a symlink on dev server to map this folder during dev
// on production everything will work just fine:
// ln -s {path_to_project}/src/assets {path_to_public_html}/assets
// ln -s {path_to_vite}/src/assets {path_to_public_html}/assets

import vue from '@vitejs/plugin-vue'
import liveReload from 'vite-plugin-live-reload'
Expand Down Expand Up @@ -51,6 +51,7 @@ export default {
cors: true,

// we need a strict port to match on PHP side
// change freely, but update on PHP to match the same port
strictPort: true,
port: 3000
},
Expand Down

0 comments on commit 1611821

Please sign in to comment.