I'm using Ruby 2.5.9 with Rails 4.2.11.3 at my project and try to get my Vue Frontend connected to it by using Vite. So I installed:
vite_ruby: 3.0.7
vite_rails_legacy: 3.0.3
vite: 2.7.12
regarding the docs. The vite.json looks like this:
{
"all": {
"sourceCodeDir": "frontend",
"watchAdditionalPaths": []
},
"development": {
"autoBuild": true,
"publicOutputDir": "vite-dev",
"port": 3036,
"host": "127.0.0.1"
},
"test": {
"autoBuild": true,
"publicOutputDir": "vite-test"
}
}
When now visiting the frontend I keep getting the error message:
http://localhost:3000/vite-dev/#id/vue/dist/vue.esm-bundler.js/server-renderer net::ERR_ABORTED 404 (Not Found)
The probolem was #vitejs/plugin-vue not properly being installed by yarn. So a manual installation of it solved the problem. Also it must be included inside the vite.config.js like: import vue from '#vitejs/plugin-vue'.
Related
So Laravel decided to innovate once again and fix what was not broken, so Mix is gone and now default asset bundling goes with Vite.
I'm following the absolute default in their documentation to a bunch of front-end bugs and finally only several remained:
I use Laragon with SSL.
I haven't configured anything additional and my vite.config.js looks like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
When I run npm run dev and visit the Laragon domain I get the following in the console:
client.ts:78 WebSocket connection to 'wss://127.0.0.1:5173/' failed.
client.ts:48 [vite] failed to connect to websocket.
your current setup:
(browser) 127.0.0.1:5173/ <--[HTTP]--> 127.0.0.1:5173/ (server)
(browser) 127.0.0.1:5173/ <--[WebSocket (failing)]--> 127.0.0.1:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
I guess I need to configure my actual domain somewhere? I tried doing that in a server object in the config, but it didn't help those errors.
PS: Now in my vue files I need to import including the .vue extension e.g. import Button from '#/Components/Button.vue' is there any way I can ommit the .vue like it was with Laravel Mix?
I haven't use laragon before, but if you have a custom domain, eg, like
http://cutom-domain.test, you need to tell vite to use the certificate like so;
In your vite.config.js, add a server key with the following configuration
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import fs from 'fs';
import { homedir } from 'os';
import { resolve } from 'path';
// Ignore the protocol on the host, ie do not put "http"
const host = 'cutom-domain.test';
const viteServerConfig = host => {
let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)
if (!fs.existsSync(keyPath)) {
return {}
}
if (!fs.existsSync(certificatePath)) {
return {}
}
return {
hmr: {host},
host,
https: {
key: fs.readFileSync(keyPath),
cert: fs.readFileSync(certificatePath),
},
}
}
export default defineConfig({
server: viteServerConfig(host),
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
Credit to this blogpost that explains more - Making Vite and Valet play nice together
I don't know if it's still relevant, but looking in the source code of laravel-vite-plugin I found a way to solve this problem in a very simple way, without even changing the vite.config.js file.
Put these two variables in the .env file and set them with full path to .key and .crt files on your system:
VITE_DEV_SERVER_KEY='C:/laragon/etc/ssl/laragon.key'
VITE_DEV_SERVER_CERT='C:/laragon/etc/ssl/laragon.crt'
Do not change anything on vite.config.js file. Here is my (fresh install of laravel + jetstream w/ inertia and --ssr):
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
And that's it. Run npm run dev and Vite will "magically" start a development server with https on.
VITE v4.0.4 ready in 1248 ms
➜ Local: https://laravel.test:5173/
➜ Network: https://192.168.1.2:5173/
➜ press h to show help
LARAVEL v9.48.0 plugin v0.7.3
➜ APP_URL: https://laravel.test/
Even though the configuration present in the official documentation also works, this way is much simpler, and the host, key and cert variables are not defined in the file, but they are dynamic reflecting the dev environment.
Hope this helps someone.
Here is the source where I found this, and you can also inspect in node_modules\laravel-vite-plugin\dist\index.js of your project.
When I do npm run build instead of regular npm run dev, the problem is gone. I guess, build mechanism is different for prod, so there is no WSS related errors in console.
So, in other words, perform a production Vite build and deploy it (if you are testing on a remote project).
My React/NextJS front end has a Button component that fetches data via a serverless function when the button is clicked. I want to test this functionality during local development with the Vercel dev/CLI tools. I am getting a 404 result when attempting to access my lambda functions. Here are the approximate steps that I've gone through so far:
Create package.json with a dev script:
...
"scripts": {
"dev": "yarn codegen && next --hostname=0.0.0.0 --port=3001",
}
...
Link to deployed vercel project
Create vercel.json to specify builds and routes:
...
"builds": [
{ "src": "*.html", "use": "#now/static" },
{ "src": "pages/api/*.py", "use": "#now/python" },
],
"routes": [
{ "src": "/api/validate", "dest": "/pages/api/validate.py" }
]
...
Create my test Lambda function (in python):
from http.server import BaseHTTPRequestHandler
from datetime import datetime
class handler(BaseHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.send_header('Content-type', 'text/plain')
self.end_headers()
self.wfile.write(str(datetime.now().strftime('%Y-%m-%d %H:%M:%S')).encode())
return
Create my Button component:
...
<Button
variant="contained"
color="secondary"
onClick={() => {
fetch('api/validate')
.then(response => { console.log(response)
response.json() })
.then(data => console.log(data))
}}
>
Generate sample dataset
</Button>
...
Run vercel dev
Access website at localhost:3001 (next dev server address)
Click button
Result:
I'm receiving a 404 response
Note: I can access the lambda function from localhost:3000/pages/api/validate.py (vercel dev server address). This appears to manually kickstart the lambda function build and serve process. I thought that it should have been built and served already from the vercel.json specification and be available at localhost:3001/api/validate. This seems to agree with the Vercel documentation.
Note 2: Next dev/CLI tools build and serve javascript/typescript files just fine. I'm using python and Go functions as well, which are supported by Vercel dev/CLI but not Next
My solution was to use vercel dev instead of next dev or yarn dev, and to use an environment variable in a .env file that points to the function url. This env variable should be prepended with NEXT_PUBLIC_ so that it is registered by next.js and passed to process.env during the build process.
# .env
NEXT_PUBLIC_FUNCTIONS_BASE_URL="http://localhost:3000" # 3000 is vercel port
# component.js
...
fetch(process.env.NEXT_PUBLIC_FUNCTIONS_BASE_URL + '/api/function-name')
...
You need to pass the port from vercel dev to the upstream CLI, in this case next dev.
{
"scripts": {
"dev": "yarn codegen && next dev --port=$PORT",
}
}
Now when you run vercel dev, the ephemeral port will be proxied from the dev server.
You can also remove vercel.json if you rename /pages/api to /api.
I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui
I am using Karma (v0.12.37) as test runner along with JSPM (v0.16.2). I have added following proxy config in karma so as to allow proper loading of JSPM files:
proxies: {
'/base/jspm_packages/': '/base/app/jspm_packages/'
}
Bu this doesn't work out and fails on following:
PhantomJS 2.0.0 (Windows 8 0.0.0) ERROR: 'Potentially unhandled rejection [10] Error: XHR error loading http://localhost:9876/base/jspm_packages/npm/babel-core#5.8.22.js
Error loading http://localhost:9876/base/jspm_packages/npm/babel-core#5.8.22.js
Error loading http://localhost:9876/base/app/pages/examples/todo-example/todo.controller.test.js'
Debug Logs are giving:
proxying request - /base/jspm_packages/npm/babel-core#5.8.22.js to localhost:9876
/base/app/jspm_packages/npm/babel-core#5.8.22.js { host: 'localhost',
port: 9876,
baseProxyUrl: '/base/app/jspm_packages/',
https: false }
But the following url containing 'app' in it works properly:
http ://localhost:9876/base/ app/ jspm_packages/npm/babel-core#5.8.22.js
Any clue on what is going wrong?
Try:
proxies: {
'/app/': '/base/app/',
'/jspm_packages/': '/base/jspm_packages/'
}
If you have configured your jspm-config with a baseUrl of "/", try removing the baseUrl entry since karma-jspm does not support a custom baseUrl. Then you should be able to get rid of the "proxies" entry for the jspm_packages.
See: https://github.com/Workiva/karma-jspm/issues/91
After having done lot of trial and error, found out the following way:
Instead of playing with proxies, alter the jspm paths config in karma.config.js
jspm: {
...
paths: {
"github:*": "app/jspm_packages/github/*",
"npm:*": "app/jspm_packages/npm/*",
'app/*': 'app/*.js'
},
...
},
What finally did the trick for me (karma, babel, JSPM/SystemJS) was to have this:
Remove baseUrl from the karma.conf.js and have this jspm section:
jspm: {
config: 'config.js',
loadFiles: [
'www/**/*.spec.js'
],
serveFiles: [
'www/**/!(*spec).js'
],
paths: {
"github:*": "/base/jspm_packages/github/*",
"npm:*": "/base/jspm_packages/npm/*",
'www/*': '/base/www/*'
}
},
I'm using the "Marionette-Require-Boilerplate" (https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate) to build my app, which also uses Firebase and FirebaseSimpleLogin. They are working fine in 'development' mode, but when it's time to minify it into 'Production' mode using Grunt and running in the browser, the minified version will have trouble finding the Firebase libraries, spitting out an error saying firebase is not defined. Both the Firebase and FirebaseSimpleLogin libs have been included in the config file as followed:
paths:{
"firebase" : "../libs/firebase",
"firebase-simple-login" : "../libs/firebase-simple-login",
"backbone-firebase" : "../libs/backbone-firebase",
}
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"],
"exports": "backbone-firebase"
}
}
It seems like the Boilerplate is minifying the code using Almond.js in 'production mode', but I'm not sure how that's affecting it. I tried including the Firebase libs in the 'path' variable in Grunt.js, but that didn't do anything.
Any help is appreciated!
Thanks.
-Tony
You shouldn't be minifying the already minified Firebase sources - that will cause trouble. You should skip minification for firebase.js (and simple login).
Thanks to the Firebase Support Team in solving the problem. The solution is to remove the "exports" from the "backbone-firebase" shim as there's no such thing as "backbone-firebase"; it is part of the "Backbone" namespace, e.g. Backbone.Firebase.Colection. Require.js was looking for something that is called "backbone-firebase" while non exists. Once the "exports" is removed, Require.js works correctly during the minification.
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"]
}
}