1

SOLVED: So the solution was actually straight forward. First, I went into webpack and added the '--https' flag. BUT because I was using a template from themeforest, the template-developer hardcoded in localhost:3003 to servefiles to. I simply searched for 3003 and found a single line of code in webpack.config which i changed to 'https://localhost:3003' and that was all i needed to do!!

I'm building a front-end client using angular. I'm running into issues when calling API's because the server requires all requests to be sent over https.

Right now when use 'npm start' my project runs on http://localhost:3003. How can I change this to https://localhost:3003?

I'm not experienced with server and SSL - so just trying to figure out the easiest way to do this during development.

I'm using angular and webpack server. Here's a look at my package.json

"tslint": "tslint",
"server:hmr": "npm run server -- --inline --hot",
"server": "webpack-dev-server --open --progress --profile --watch --port 3003",
"start": "npm run server",
"start:hmr": "npm run server:hmr"

UPDATE: still haven't figured this out. I'm running on webpack (not angular cli). The solutions i've tried so far such as adding -https flag or serve-https npm library haven't worked. Both options will load the files of my web app over https - but I get a 404 error "failed to load webpack.js"

Tyler Brown
  • 417
  • 1
  • 7
  • 12
  • Possible duplicate of [Webpack Dev Server running on HTTPS/Web Sockets Secure](https://stackoverflow.com/questions/26663404/webpack-dev-server-running-on-https-web-sockets-secure) – Neil Lunn May 29 '17 at 02:17
  • you are now running a local instance ?, if so first deploy your app after that it loads over https . i had deployed one such app on gh-pages . you can check https://rahulrsingh09.github.io/AngularConcepts – Rahul Singh May 29 '17 at 08:23
  • I could deploy my app to solve this problem - but then how would I continue making calls to api over https from a development environment? I would like a way to make calls through https from my local instance/localhost – Tyler Brown May 29 '17 at 14:34

2 Answers2

2

Running your webpack-dev-server with the https flag.

webpack-dev-server --open --https --progress --profile --watch --port 3003
Ryan Tsui
  • 918
  • 5
  • 14
  • This doesn't work because I get a mixed content error: Mixed Content: The page at 'https://localhost:3003/' was loaded over HTTPS, but requested an insecure script 'http://localhost:3003/js/main.js'. This request has been blocked; the content must be served over HTTPS. Is there a way to fix this? – Tyler Brown May 29 '17 at 14:51
  • Please check if you are requesting the JavaScript file with 'http://'. You should use 'https://' for requesting the .js file. – Ryan Tsui May 30 '17 at 02:21
0

Try serve-https, it's a simple HTTPS static file server: https://www.npmjs.com/package/serve-https

David Findlay
  • 1,296
  • 1
  • 14
  • 30
  • yes that looks great but I don't know enough to get it working. How would I integrate this into my app? Do i combine the 'serve-https -p 3003' with npm start? – Tyler Brown May 29 '17 at 02:08
  • Instructions and examples are given on that page. You use serve-https instead of npm-start. – David Findlay May 29 '17 at 02:11
  • yes I used serve-https -p 3003 and still no luck. I just see a directory to my app - I can click on the SRC folder but then with a 404 not found for webpack. (index):43 GET https://localhost.daplie.me:3003/webpack-dev-server.js 404 (Not Found) – Tyler Brown May 29 '17 at 04:46
  • sorry about being a pain I don't know much about the server side of things just trying to figure out the easiest way to get https to work – Tyler Brown May 29 '17 at 04:46