I need to config server port for Nuxt3. I try to do it so:
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig(
vite: {
server: {
port: 5000,
},
},
})
But it doesn't work. How to set server port in Nuxt3?
As told here, this is currently not supported.
Change it like this
{
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --port=5678", // here
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.1"
}
}
Here is how to change the port for production: https://github.com/nuxt/framework/discussions/1884#discussioncomment-1631668
If you are using PM2, set the port on ecosystem.config.js
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs',
port: 5000
}
]
}
My solution for dev and production mode in all platforms (windows, Linux, MacOS) :
Install the cross-env to support cross platforms.
sudo npm i cross-env -g
Edit your project package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --port=8001",
"generate": "nuxt generate",
"preview": "cross-env PORT=8001 node .output/server/index.mjs"
},
"devDependencies": {
"nuxt": "3.0.0-rc.4"
},
}
Run the app
yarn run preview
You can use like this in your ecosystem.config.js:
module.exports = {
apps: [
{
name: 'NuxtApp',
port: 3001,
exec_mode: 'cluster',
instances: '1',
script: './.output/server/index.mjs',
args: 'preview',
},
],
}
Related
When I try run npm run dev in my nuxt project. I get an error like this.
Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 21:02:57
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 21:02:57
at postcss8Module (node_modules/#nuxt/postcss8/dist/index.js:15:10)
at installModule (node_modules/#nuxt/kit/dist/index.mjs:435:21)
at async setup (node_modules/#nuxtjs/tailwindcss/dist/module.mjs:186:7)
at async ModuleContainer.normalizedModule (node_modules/#nuxt/kit/dist/index.mjs:167:5)
at async ModuleContainer.addModule (node_modules/#nuxt/core/dist/core.js:167:20)
at async ModuleContainer.ready (node_modules/#nuxt/core/dist/core.js:34:7)
at async Nuxt._init (node_modules/#nuxt/core/dist/core.js:342:5)
Package.json.
I just created a new nuxt project using "npm init nuxt-app myhealth"
{
"name": "myhealth",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^5.3.3",
"postcss": "^8.4.17"
}
}
Solve this problem with these steps:
Install the development dependencies again as instructed in the tailwind documentation
Remove '#nuxtjs/tailwindcss' and add '#nuxt/postcss8' to nuxt.config.js
Configure the nuxt.config.js build property by adding
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
Reference: https://tailwindcss.com/docs/guides/nuxtjs
I'm trying to create an npm scripts configuration that compiles scss and uses browser-sync to reload the browser when files are written to the css directory.
The scss compilation works.
However, after the css is rewritten, browser-sync is not reloading the browser.
My package.json:
{
"name": "bob",
"version": "0.1.0",
"description": "testing",
"watch": {
"sass": {
"patterns": [
"./src/sass"
],
"extensions": "scss"
},
"bsReload": {
"patterns": [
"./src/css"
],
"extensions": "css"
}
},
"scripts": {
"dev": "concurrently \"npm run watch\" \"npm run bs\" ",
"bs": "browser-sync start --proxy \"http://mylocalsite.localdev\" ",
"bsReload": "browser-sync reload",
"watch": "npm-watch",
"serve": "http-server dist",
"sass": "sass --style=compressed ./src/sass/main.scss ./css/main.css"
},
"author": "Bob",
"license": "ISC",
"devDependencies": {
...
}
}
I created a new repo with $ npm install vue-app and created some test components.
When i run the command $ npm run dev the application starts in localhost port 3000.
I try to add my component in a WP website. When i build the files and add to my theme, i receive the message:
Uncaught SyntaxError: Cannot use import statement outside a module
I found some documentation for webpack but not for vite.config.js.
Anyone can help?
vite.config.js
// vite.config.js
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
package.json
{
"name": "vite-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.3",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.3.5"
}
}
Below is my current vite config.js/ package.json and tsconfig.json with build with lib configuration, it worked properly using with normal vite build but fails does not work on build lib.
The files are generated in dist folder but app doesn't loads
vite.config.js
`/* eslint-disable import/no-extraneous-dependencies */
import reactRefresh from '#vitejs/plugin-react-refresh';
import path from 'path';
import { Alias, defineConfig } from 'vite';
import * as tsconfig from './tsconfig.paths.json';
function readAliasFromTsConfig(): Alias[] {
const pathReplaceRegex = new RegExp(/\/\*$/, '');
return Object.entries(tsconfig.compilerOptions.paths).reduce(
(aliases, [fromPaths, toPaths]) => {
const find = fromPaths.replace(pathReplaceRegex, '');
const toPath = toPaths[0].replace(pathReplaceRegex, '');
const replacement = path.resolve(__dirname, toPath);
aliases.push({ find, replacement });
return aliases;
},
[] as Alias[],
);
}
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, "src/main.tsx"),
name: "Aagam",
},
rollupOptions: {
external: ["react"],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
react: 'React',
},
},
},
minify: true,
sourcemap: false,
},
plugins: [reactRefresh()],
resolve: {
alias: readAliasFromTsConfig(),
},
css: {
modules: { localsConvention: 'camelCase' },
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`
}
}
}
});
> `
package.json
"name": "reporting-ui-component",
"version": "1.0.0",
"files": [
"dist"
],
"typings": "./dist/reporting-ui-component.d.ts",
"main": "./dist/reporting-ui-component.umd.js",
"module": "./dist/reporting-ui-component.es.js",
"scripts": {
"dev": "vite",
"build": "tsc && vite build && tsc -P tsconfig.dts.json",
"serve": "vite preview",
"start": "npm run dev",
"lint:fix": "eslint src --ext .jsx,.js,.ts,.tsx --quiet --fix",
"lint:format": "prettier --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
"lint": "yarn lint:format && yarn lint:fix ",
"type-check": "tsc",
"lint-staged": "npx lint-staged -r",
"validate": "npm run style",
"validate-commit": "npm run lint-staged",
"style": "npx -q eslint src --ext .ts,.tsx --fix"
}
tsconfig.dts.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"declaration": true,
"declarationDir": "dist",
"emitDeclarationOnly": true
},
"include": ["src"]
}
It would be great if you could provide some solution to it?
I am getting error on running above config
In order to make sure your project is rendered from the output generated by lib, make sure to refer the start point of your app i.e. index.html to have the below script
<script src="/dist/<your-file-name>.umd.js"></script>
in place of previous path
<script type="module" src="/src/main.tsx"></script>
and it should start working
I cant access my app using the ipv4 address, it works only from localhost.
I used vue cli to generate the template. heres the code :
I've tried to google it, but i found no answer that actually helps
package.json:
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config
build/webpack.dev.conf.js --allowed-hosts 192.168.42.126",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
}
}
webpack.dev.conf.js:
devServer: {
clientLogLevel: 'warning',
host: '0.0.0.0',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
//host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ?
{
warnings: false,
errors: true
} :
false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},