I have configured WebPack for my application and added webpack-dev-server. It compiles successfully after running and gives me "Project is running at http://localhost:9000/". However, when I try to open it in my browser I get a "This site can't be reached" page with the following error:
ERR_CONNECTION_REFUSED
Any fix suggestions will be greatly appreciated!
Snippets from my package.json file:
"scripts": {
"build": "webpack --config webpack.config.js",
"start:dev": "webpack-dev-server"
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
Snippet from my webpack.config.js file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
For those who might have the same issue, I seem to have found a solution shortly after posting this question. Here it is: link.
Related
Taylor Otwell announced that new Laravel projects now will run with Vite and that Vite is installed by default. I can't seem to be able to run dev environment 'npm run dev'
I installed new laravel project, installed Laravel JetStream with SSR and teams support hit the 'npm install command'.
Every time I run npm run dev it shows this:
And if I open the local link, it shows this:
Why can't I user npm run dev and compile my files?
This is package.json for my brand new laravel app
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build && vite build --ssr"
},
"devDependencies": {
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"#inertiajs/server": "^0.1.0",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.2",
"#vitejs/plugin-vue": "^2.3.3",
"#vue/server-renderer": "^3.2.31",
"autoprefixer": "^10.4.7",
"axios": "^0.25",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vite": "^2.9.11",
"vue": "^3.2.31"
}
}
and if I try hitting 'vite' in the terminal I get this:
If you don't want to use vite but mix instead in your new laravel project, you can just get the usual behavior of npm run dev back with the following changes:
Install Laravel Mix (because by the new installation it is not there anymore):
npm install --save-dev laravel-mix
Create a webpack.mix.js file, if it is not there, and make sure it has the following content:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Update package.json:
"scripts": {
- "dev": "vite",
- "build": "vite build"
+ "dev": "npm run development",
+ "development": "mix",
+ "watch": "mix watch",
+ "watch-poll": "mix watch -- --watch-options-poll=1000",
+ "hot": "mix watch --hot",
+ "prod": "npm run production",
+ "production": "mix --production"
}
Remove vite helper functions (if they are there):
- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
- resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+ resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mixin({ methods: { route } })
.mount(el);
},
});
Update environment valiables (in .env, VITE_ prefix to MIX_):
- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Remove Vite and the laravel Plugin
npm remove vite laravel-vite-plugin
Remove the Vite config file:
rm vite.config.js
Remove these paths from .gitignore:
- /public/build
- /storage/ssr
If you created some code already with vite, you must have some more changes in your blade files, check out this article. But if it is a new project, you just good to go.
For anyone experiencing the problem:
With Vite, running npm run dev will only build your frontend and start watching any changes to your code to rebuild automatically.
To actually start your server, you need to run php artisan serve in a separate command window.
Source (See With Laravel section): https://laravel-vite.dev/guide/essentials/development.html#with-laravel
Had the same issue, but none of the mentioned solutions worked for me. Instead I saw an issue with the <script> src's in the head-section of the rendered html.
screenshot of script src's buggy
Added in vite.config.js the following code which solved the issue.
server: {
hmr: {
host: 'localhost',
},
}
Edit:
The issue was reported in laravel's vite-plugin repo and it will be fixed with this PR
I was having the same issue, I did the following and it finally worked!
I did:
Upgraded my Laravel Project to Latest (v9.19.0). Infact i upgraded all my packages to latest one too.
Remove the node_modules and install the dependency using npm install
Make sure you follow the upgrade guides properly.
Run the server using php artisan serve
And run the dev server using npm run dev
If you done properly, it should start the dev server and all your javascript code should compile. (If it succeed, you will see the desired output.)
I fixed the issue in the above steps.
Vite needs an updated node version.
You can download the latest node version then run npm install and npm run dev
To create the server you can use php artisan serve
If you are using laragon as a local deployment you can set the --host flag to the virtual host url of the app ,it worked for me
Try:
.env :
APP_URL=http://localhost:8000
welcome.blade.php :
<head>
<title>my project</title>
#vite(['/resources/js/app.js', '/resources/css/app.css'])
My app runs perfectly in the browser but will not open on Heroku. The build succeeds. When I check the logs tail it says "code: 'MODULE_NOT_FOUND', requireStack: [: '/app/server/node_modules/readable-stream/lib/_stream_readable.js',]
However, in my package.json I have
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#stripe/stripe-js": "^1.29.0",
"are-we-there-yet": "^3.0.0",
"readable-stream": "^3.6.0",
"streams": "^0.0.7"
}
I have also tried removing node_modules and package-lock and reinstalling multiple times. The same application error persists on Heroku. Please help if you can!
My full code repo is here.
This is the logs message
I have a problem where I get the following error when deploying my SvelteKit website to Vercel:
> Using #sveltejs/adapter-auto
18:05:29.787 > 404 /about (linked from /)
18:05:29.787 at file:///vercel/path0/node_modules/#sveltejs/kit/dist/chunks/index5.js:167:11
18:05:29.787 at visit (file:///vercel/path0/node_modules/#sveltejs/kit/dist/chunks/index5.js:326:5)
18:05:29.802 Error: Command "npm run build" exited with 1
The website works fine both in dev and build environment locally.
I have been trying all day to fix this and in the process broke my latest website version, which now gives a different error when using npm run dev locally:
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/footer.
Plugin: vite-plugin-svelte
File: /Users/koenraijer/Documents/Code/Svelte/kaashuys/src/lib/footer/Footer.svelte
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/nav.
Plugin: vite-plugin-svelte
File: /Users/koen/Documents/Code/Svelte/kaashuys/src/lib/header/Header.svelte
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/footer.
Plugin: vite-plugin-svelte
File: /Users/koen/Documents/Code/Svelte/kaashuys/src/lib/footer/Footer.svelte
6:29:51 PM [vite] Internal server error: File to import not found or unreadable: ../scss/components/nav.
Plugin: vite-plugin-svelte
File: /Users/koen/Documents/Code/Svelte/kaashuys/src/lib/header/Header.svelte
This exact same nav file was imported perfectly fine in the version used to generate the first error message. All of these files are present.
When running npm run preview, suddenly it does work.
First part of my package-lock.json:
{
"name": "blog-template",
"version": "0.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "blog-template",
"version": "0.0.1",
"dependencies": {
"#fontsource/fira-mono": "^4.5.0",
"#lukeed/uuid": "^2.0.0",
"cookie": "^0.4.1",
"scss": "^0.2.4"
},
"devDependencies": {
"#sveltejs/adapter-auto": "next",
"#sveltejs/adapter-static": "^1.0.0-next.26",
"#sveltejs/kit": "next",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"mdsvex": "^0.9.8",
"node-sass": "^7.0.1",
"postcss": "^8.4.5",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"svelte": "^3.44.0",
"svelte-dark-mode": "^2.0.0",
"svelte-preprocess": "^4.10.1",
"typescript": "^4.5.4"
}
},
Other things I've tried:
run npm audit, update outdated packages etc.
removed everything scss related, reinstalled svelte-preprocess.
checked if removing the sveltePreprocess config scss: prependData line did anything.
Incrementally added newer parts to the earlier version that did work, but I didn't find manage to find the perpetrator.
I don't know how I broke it or how to fix it...
I created a fresh gatsby site by using the command npm init gatsby on a M1 Mac. I kept all options to default in the wizard and started by npm run develop. I immediately get this error on every refresh:
Although it's annoying the site is working fine. The error doesn't give much information and I couldn't find anyhting on google. My node version is v17.2.0 and this is the auto generated package.json:
{
"name": "my-gatsby-site",
"version": "1.0.0",
"private": true,
"description": "My Gatsby Site",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^4.3.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
EDIT:
I'm using Firefox.
There's a lack of details despite being a starter command (browser, browser version, etc). I'd try to follow one of the suggestions of this GitHub thread:
If you are registering a service worker, try commenting/removing it
If not, play around with the browser cookies (allowing or disallowing):
Allowing the localhost:8000 cookies.
In the same way, using the opposite cookie approach, you can disable the "Delete cookies and site data when Firefox Developer Edition is closed" option.
This solved the problem, no error anymore:
I worked around the issue by disabling the "Delete cookies and site
data when Firefox Developer Edition is closed" option
Source: https://github.com/gatsbyjs/gatsby/issues/16076#issuecomment-536152468
Is was wondering if its possible to deploy a React Native app to Heroku? The reason I ask is because then I can retrieve the url and place it in an iframe to mimic an iPhone where the user can then tryout the app without actually having to install it on to the iPhone via iTunes.
This is possible using react-native-web (sources).
There are few things that you have to do to set this up on heroku:
in the settings tab of your your heroku app dashboard
set the buildpack as heroku/nodejs,
in package.json set the build script to build your web version from RN sources, for example, if you are using expo: expo build:web,
create a Procfile in the root directory to serve the web
version: for example, if you used expo, the build directory is web-build and therfore the command should be npx serve web-build,
Additionally, if you use expo, make sure to add the expo-cli as a dev dependency: npm install -D expo-cli.
You will then simply need to push to heroku the usual way. By default, heroku will run yarn build (or npm run build depending on wether you used one or the other to generate your lock file).
In the end, here is what the package.json file might look like (using expo again):
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll",
"build": "expo build:web"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/native": "^5.8.9",
"#react-navigation/stack": "^5.12.6",
"expo": "~40.0.0",
"expo-asset": "~8.2.1",
"expo-constants": "~9.3.0",
"expo-font": "~8.4.0",
"expo-linking": "~2.0.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"expo-cli": "^4.0.16",
"#babel/core": "~7.9.0",
"#types/react": "~16.9.35",
"#types/react-native": "~0.63.2",
"jest-expo": "~40.0.0",
"typescript": "~4.0.0"
},
"private": true
}
And the Procfile simply consists of a single line:
web: npx serve web-build
You could probably achieve similar results using reactxp instead of reac-native-web, but I never tried it myself.
Client side routing
Configuring Heroku for client side routing
If you use client side routing (react navigation for example), you will have to setup a few more things to make sure linking works. With the previous build alone, client side routing will fail (404 errors) because heroku will try to route requests on its own, but your app needs everything to end up at index.html so it can perform routing tasks on its own (client side routing).
We will thus prevent any Heroku routing by adding a second buildpack heroku-community/static next to heroku/nodejs. This second buildpack is configured via a /static.json file (default values):
{
"root": "web-build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
Configuring webpack for client side routing
You probably already have this part setup because otherwise you would have 404 errors even locally. To allow client side routing it seems like we also need to configure webpack (output.publicPath and devServer.historyApiFallback), with expo this can be done by running expo customize:web and then editing /webpack.config.js with:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.output.publicPath = '/';
config.devServer = {
...config.devServer,
historyApiFallback: true,
};
return config;
};
There is a nice article about these routing issues you might have here: Fixing the 'cannot GET /URL'
Steps for deploying React native/expo app to heroku:
1:
set heroku buildpack as static: >heroku buildpacks:set heroku-community/static
2:
Add static.json for static buildtype:
{
"root": "web-build/",
"routes": {
"/**": "index.html"
}
}
More settings here: https://github.com/heroku/heroku-buildpack-static#configuration
3:
npm run build (package.json: "build": "expo build:web") --> Creates web-build folder
git add .
git commit
git push heroku master
heroku open