Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from Laravel Mix to Vite #2

Merged
merged 14 commits into from
Jun 2, 2024
Merged

Migrate from Laravel Mix to Vite #2

merged 14 commits into from
Jun 2, 2024

Conversation

yoeriboven
Copy link
Owner

This pull request includes changes for migrating from Laravel Mix to Vite outlined in Migration Guide and automated by the Vite Converter.

Before merging, you need to:

  • Checkout the shift-120782 branch
  • Run composer update
  • Run npm install
  • Review all comments for additional changes
  • Thoroughly test your application (no tests?, no CI?)

Please send your feedback to [email protected] or share the good vibes on Twitter.

@yoeriboven
Copy link
Owner Author

ℹ️ Previously, Laravel configured several npm scripts for building assets. For Vite, Laravel configures a dev script for generating and watching your assets (for development) and build script for generating your assets (for production).

Shift automated this change by replacing commands using these scripts with their new Vite script. However, you may still be referencing these scripts in your code or in deployment scripts.

@yoeriboven
Copy link
Owner Author

⚠️ Shift detected you are using Vue. As such, Vite recommends importing your CSS from your JavaScript entry point. This will improve your development experience by avoiding flashes of unstyled content during hot reloading.

Shift removed your CSS entry point from your Vite configuration. However, you will need to import this CSS in your JavaScript entry point.

@yoeriboven
Copy link
Owner Author

ℹ️ Laravel renamed the environment variables used by Mix to use a VITE_ prefix, instead of MIX_. While Shift automated this change throughout your code, you should check for any additional references which may not be included in your Git repository.

@yoeriboven
Copy link
Owner Author

ℹ️ Vite requires JavaScript files containing JSX to have a .jsx file extension. Shift did not detect any JSX in files with a .js extension under the resources folder. However, if you are using JSX, be sure the files have a .jsx extension.

@yoeriboven
Copy link
Owner Author

⚠️ Vite generates frontend assets to the public/build folder. This folder is not tracked by Git within a default Laravel project. As such, Shift added this folder to your .gitignore file.

If you wish to track the generated frontend assets within your project, such as for ease of deployment, you may undo this commit by running: git revert 218463e4

@yoeriboven
Copy link
Owner Author

⚠️ Shift detected you are using Inertia. You may need to update your require statement for Vue components as well as configure an entry point if you are using SSR.

@yoeriboven
Copy link
Owner Author

ℹ️ The new @vite Blade directive outputs <script> tags with the type="module" attribute. This attribute implicitly defers the script. This is a difference from Laravel Mix which may change the execution order of the JavaScript on your page.

If you experience JavaScript errors relating to undefined references, you may need to reorder your scripts or add the defer attribute to any inline <script> blocks on your page.

@yoeriboven
Copy link
Owner Author

⚗️ This Shift is still being refined. Please report any issues or suggestions to [email protected]. Your feedback is what helps improve the experience for everyone.

@yoeriboven yoeriboven merged commit 29a1e13 into main Jun 2, 2024
1 check passed
@yoeriboven yoeriboven deleted the shift-120782 branch June 2, 2024 19:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants