Develop Reference

vue devServer proxy is not working after build

I am trying to call my API through proxy. It works fine locally. But while I build and upload to my server it does not work.
in my vue.config.js file :
devServer: {
proxy: {
"^/rest": {
target: 'https://v1.quant-ux.com',
ws: true,
changeOrigin: true,
pathRewrite: {'^/rest' : '/rest'}
},
}}

The devServer only runs in local environments (on your machine during development). It's a separate process from your build, so you can't deploy a Vue app with a built-in proxy server.
Your options:
Rewrite your URLs to the proxy target (e.g., a build script/plugin).
Run your own proxy on the server (assuming you have control of it).

How do I set up AWS Cloud9 to run an existing JavaScript app with webpack-dev-server (in development mode)?

I am trying to get my fairly typical JavaScript (React) app to run in dev mode on AWS Cloud9. I successfully cloned my repo (using https ugh), installed my npm packages, and can run scripts in the console. However, I don't know how to run and access the app in dev mode. There are a plethora of docs but they all seem to dance around the running part. My guess is I need to somehow set a custom host and port, but I also need to find what URL to use to see the app running.
Here is my devServer config:
devServer: {
// Display only errors to reduce the amount of output.
stats: "errors-only",
host, // Defaults to `localhost`
port, // Defaults to 8080
overlay: {
errors: true,
warnings: true,
},
}

If anyone comes across this, I wanted to share my solution because I know how frustrating this can be:
First, create a script in your package.json file:
"start": "webpack-dev-server --open"
Then, add the following to your Webpack config file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
host: '0.0.0.0',
port: 8080,
compress: true,
}
Then, open the terminal in AWS Cloud 9, and run the script:
npm start
Finally, click on the link in the terminal: "Project is running at http://0.0.0.0:8080/" and your app will show in a new window.
**If it doesn't work, don't forget to allow port 80 on your Cloud 9 Security Group: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/working-with-security-groups.html#adding-security-group-rule
If you want to view the project in the preview pane, you can add the following to your devServer config:
disableHostCheck: true,
However, it's important to note that when set to true, this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

1) First thing you need to do is to run react app on port 8080. You can do this by setting environment variable PORT to 8080 and then just starting react dev server from AWS Cloud9 terminal.
export PORT=8080
npm start
For details look at this discussion on GitHub.
2) After starting your application you can preview it by clicking Preview -> Preview Running Application at the top of AWS Cloud9.
For more details check this AWS Cloud9 doc

In webpack.config.js:
devServer: {
historyApiFallback: true,
contentBase: './',
host: process.env.IP,
//https: true,
port: process.env.PORT,
"public": "your-project.c9users.io" //no trailing slash
},
Refer Link

Grunt dev server to allow push states

I am trying to set up my grunt server to allow push states.
After countless google searches and reading SO posts I cannot figure out how to do this.
I keep getting errors like the one below.
Does anyone have any ideas how to fix this?
No "connect" targets found. Warning: Task "connect" failed. Use --force to continue.
It appears to me below that I have defined targets with the line
open: {
target: 'http://localhost:8000'
}
See complete code below:
var pushState = require('grunt-connect-pushstate/lib/utils').pushState;
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
hostname: 'localhost',
port: 8000,
keepalive: true,
open: {
target: 'http://localhost:8000'
},
middleware: function (connect, options) {
return [
// Rewrite requests to root so they may be handled by router
pushState(),
// Serve static files
connect.static(options.base)
];
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-connect'); // Load the plugin that provides the "connect" task.
// Default task(s).
grunt.registerTask('default', [ 'connect']);
};

Push states are already included in most SPA frameworks, so you might not need this unless you're building a framework.
Angular: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
React: How to remove the hash from the url in react-router
This looks like a grunt build script to compile an application to serve. So I'm not exactly sure how you'd use pushStates in the build process. You may be trying to solve the wrong problem.

Don't bother with grunt to deploy a local dev pushstate server for your SPA.
In your project directory, install https://www.npmjs.com/package/pushstate-server
npm i pushstate-server -D
Then to launch it, add a script entry in the package.json of your project:
…
"scripts": {
"dev": "pushstate-server"
}
…
This way you can now start it running npm run dev
All the requests which would normally end in a 404 will now redirect to index.html.

Finding MongoDB details after hosting on Ubuntu

I'm completely new to setting up servers, MongoDB, and still a little new to Javascript.
I'm trying to upload a Deployd server onto an online server. There is limited information on this, so at the moment, I set up a simple AWS Ubuntu server by doing the following tutorials:
http://zenborgium.blogspot.com/2012/12/how-to-setup-deployd-on-ubuntu-server.html
http://terraltech.com/how-to-setup-deployd-on-ubuntu-server/
However, I'm stuck at creating the production.js. There's a guide on it here. I'm specifically stuck at this line of code:
var server = deployd({
port: process.env.PORT || 5000,
env: 'production',
db: {
host: 'my.production.mongo.host',
port: 27105,
name: 'my-db',
credentials: {
username: 'username',
password: 'password'
}
}
});
server.listen();
Where do I find the host, port, name, and credentials that I should use from MongoDB? The tutorials say I need to use my own data, but I don't know where or how to find them.

First of all, you have to have MongoDB installed. I haven't used Deployd myself, but I will give you some information regarding the config file.
If you are running Mongo on the same ubuntu server as your application, you can use localhost to connect.
Default Mongo install runs on port 27017, in other words localhost:27017.
The 'name' parameter is just a name you give your database. So here you can put whatever you want, ex my-db.
With a clean Mongo install, you don't need any credentials. You have to set that up yourself if you want. I suppose leaving them out of the config file is ok, if not needed.
Your config file should therefor look something like this:
var server = deployd({
port: process.env.PORT || 5000,
env: 'production',
db: {
host: 'localhost',
port: 27017,
name: 'my-db'
}
});
update
I had a quick look at the tutorial you linked to. In one of the tutorials they created a user for mongodb. If you followed this step, you need to put that login information into you connect-object under credentials.
update 2
To get information about your mongodb install, check this SO post

NodeJs tls.createServer equivalent to Apache SSLCertificateChainFile?

I have an Apache config for SSL like so:
SSLCertificateFile ~/certs/server.crt
SSLCertificateKeyFile ~/certs/server.key
SSLCertificateChainFile ~/certs/bundle.crt
Now in my NodeJs server, I am using grunt with grunt-connect as the server.
The documentation for grunt-connect says that it can be configured using the following syntax.
grunt.initConfig({
connect: {
server: {
options: {
protocol: 'https',
port: 8443,
key: grunt.file.read('server.key').toString(),
cert: grunt.file.read('server.crt').toString(),
ca: grunt.file.read('ca.crt').toString()
},
},
},
});
I need this configuration to match my Apache configurations. It has a certificate file, and a key file, and also a bundle file.
Looking at the documentation for the tls.createServer in NodeJs,
I do not see an option that looks like it could be equivalent to SSLCertificateChainFile.
How can I make my NodeJs connect server mirror the same SSL configuration as my Apache server?
EDIT
I will also award the bounty to someone who can do this:
Create a SSCCE Gruntfile that demonstrates how to configure connect to accept a server certificate and bundle certificate.

You may try concatenating server.crt and ca.crt files in one file and using result in cert option. Don't use ca option, as per docs it is needed only 'if the client uses the self-signed certificate'.