there.
I´m starting on VueJS, creating a project in codeanywhere:
npm install -g vue-cli
vue init webpack myProject
So, when i run npm run devi get a
Your application is running here: http://localhost:8080
Because, i am developing on a cloud based IDE, i´cant access http://localhost...
So, i access the way Codeanywhere publish when you create a project:
https://myProject-XXXXXXXX.codeanyapp.com/
But i get a
This Container is currently unaccessible.
Really appreciated any help.
I created a vue.config.js file at the root (next to package.json) with content:
module.exports = {
devServer: {
host: '0.0.0.0',
allowedHosts: [
'.codeanyapp.com'
]
}
};
From the Codeanywhere documentation:
You have to change the default IP so your Container could run externally.
Please change IP address on your container from 127.0.0.1 to 0.0.0.0.
Work for me with nuxt.config.js :
server: {
port: 3000,
host: '0.0.0.0',
timing: false
},
Related
Hi i build a new vuejs project with "npm create test" and serve that with "npm run serve"
And the result was this
But when I go to the desired address in "http://localhost:8080/" I get these errors in the console:
I researched this topic and the way I was suggested was to edit the config file and add this section
devServer: {
host: "localhost"
}
And this is my whole config file
But my problems persisted
I'm new in vuejs and i hopeful that you can help me. Thanks.
Your project attempts to use WebSockets via socketjs.
You will need to run
npm install sockjs
see: https://www.npmjs.com/package/sockjs
You will also need to have a sockhost, see: https://webpack.js.org/configuration/dev-server/
create a fill named "vue.config.js" in main root.
add this scripts to the created fill:
module.exports = {
devServer: {
host: 'localhost',
hot: true,
disableHostCheck: true,
https: false
}
}
Maybe it's just due to a change of network, I think that if you restart the server or reconnect to original network it will dissapear.
I want to deploy my create-react-app to Vercel.
I define my redirects in my now.json as follows:
{
"redirects": [
{ "source": "/api/(.*)", "destination": "BACKEND_URL/$1", "statusCode": 200 }
]
}
The destination URL depends on the environment variable BACKEND_URL, which is defined in the Vercel dashboard.
I am trying to replace the environment variable in the redirects in the following build command:
sed -i "s|BACKEND_URL|${BACKEND_URL}|g" now.json && yarn build
But unfortunately now.json doesn't seem to be available at build time:
09:54:44.243 sed: can't read now.json: No such file or directory
How to enable dynamic redirects in Vercel?
This is not possible since now.json is read to determine how to build so you can't dynamically generate it during a build.
Instead, consider using a framework like Next.js which provides a next.config.js that can read environment variables as defined in RFC 9081.
npm install next#canary react react-dom
// next.config.js
module.exports = {
experimental: {
async redirects() {
return [{
source: "/api/:path*",
destination: `${process.env.BACKEND_URL}/:path*`,
permanent: false,
}]
}
}
};
https://github.com/zeit/now/discussions/4351
I think this actually is possible.
If you are using create-react-app then you just need to preface your env var name with REACT_APP_. See here: https://create-react-app.dev/docs/adding-custom-environment-variables/
I am currently doing this with a websocket URL env var. I have named it REACT_APP_WS_URL and here is how I use it.
I have 2 different vercel files in the project:
vercel.staging.json which has this section:
"build": {
"env": {
"REACT_APP_WS_URL": "wss:staging.my-backend.com/socket"
}
}
vercel.live.json which has this section:
"build": {
"env": {
"REACT_APP_WS_URL": "wss:my-backend.com/socket"
}
}
I deploy to them with either of these commands:
vercel deploy --prod -A vercel.staging.json
vercel deploy --prod -A vercel.live.json
and in my code I can access process.env.REACT_APP_WS_URL anywhere.
I have not tried doing this with the Vercel dashboard env vars but it might be worth trying your original approach except rename your env var to REACT_APP_BACKEND_URL.
Note: my deployment commands only work when I don't assign domains to the project. If I assign domains to a project, they are automatically used for ALL --prod deploys, no matter what is in my alias field in the json config file.
I want to develop a Vue app and serve it to external domain.
So I wrote a vue.config.js to redirect development server to public like below:
module.exports = {
devServer: {
disableHostCheck: true,
host: '0.0.0.0',
port: 8080,
public: 'mypublicpage.com:8080',
},
publicPath: '/'
}
Just before few hours ago, I got the expected result of above setting file like this
App running at:
- Local: http://localhost:8080
- Network: http://mypublicpage.com:8080/
But now my Local port is always randomized, so I can't access my Vue app through the public(Network) URL. I still don't know why this happens.
App running at:
- Local: http://localhost:19282 port changes on every npm run serve
- Network: http://mypublicpage.com:8080/
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
I cloned project from github and deployment on VM.
All works fine except watching if any file in project updating.
VagrantFile have string to syn folder
config.vm.synced_folder './', '/app', owner: 'vagrant', group: 'vagrant'
Tried to add vue.config.js with
module.exports = {
configureWebpack: {
devServer: {
watchOptions: {
ignored: ['node_modules'],
aggregateTimeout: 300,
poll: 1500
},
public: '192.168.83.181' // vagrant machine address
}
}
}
Below how project structure and terminal with executed vue-cli-service build --watch --mode development looks
node --version
v8.12.0
vue --version
3.1.3
Tried on Ubuntu 16.04 and 18.04 versions.
I have the same issue, but I think the problem is not relative to vue-cli. Because if you change your js code in vm with vi. Then vue-cli can watch this change and pre-compile.But with change from win 10. nothing to happen, despite of changing code is reflected on share folder