How can this be modified to work with https server on localhost

[iang0ld]

How can this be modified to work with https server with localhost? I have tried a few things without success.

[rhian-cs]

Hi @iang0ld !

While it's possible for the application server to handle HTTPS, we generally don't do that in real apps since that's the responsibility of the Reverse Proxy.

flowchart LR
    User-->|HTTPS Request|ReverseProxy
    ReverseProxy-->|Plain HTTP Request|ApplicationServer

Besides that, running HTTPS locally is kind of cumbersome and requires the creation of self-signed certificates. I found this tutorial (but haven't tested it): https://web.dev/articles/how-to-use-local-https

Is there a particular reason you want to use HTTPS on your local machine?

If you plan on deploying your app on a server, I'd suggest you to use a reverse proxy such as Nginx to guard your application, as well as Let's Encrypt so you can easily use HTTPS for free.

If you use Docker, you might be interested in this image: https://github.com/JonasAlfredsson/docker-nginx-certbot. It automatically creates (and renews) SSL certificates for you with Let's Encrypt. Since it's built on top of Nginx you can also use it as a regular reverse proxy. I've used it before and it's pretty good, but you do need to configure Nginx. In any case, you should not have to change anything in your application code.

Let me know if that helps :smiley:

[iang0ld]

Thanks Rhian,

I have taken you advice and have decide to use https.

I still have one questions. Our Api calls are made with Axios. How can we make sure the ones in onmounted they are run while rendering on the server, and not by the client?

Yours Ian

From: Rhian Moraes @.> Sent: Saturday, January 20, 2024 8:06 AM To: rhian-cs/cm42-blogpost-vue-express-webapp @.> Cc: Ian Gold @.>; Mention @.> Subject: Re: [rhian-cs/cm42-blogpost-vue-express-webapp] How can this be modified to work with https server on localhost (Issue #6)

Hi @iang0ldhttps://github.com/iang0ld !

While it's possible for the application server to handle HTTPS, we generally don't do that in real apps since that's the responsibility of the Reverse Proxy.

flowchart LR

User-->|HTTPS Request|ReverseProxy

ReverseProxy-->|Plain HTTP Request|ApplicationServer

Besides that, running HTTPS locally is kind of cumbersome and requires the creation of self-signed certificates. I found this tutorial (but haven't tested it): https://web.dev/articles/how-to-use-local-https

Is there a particular reason you want to use HTTPS on your local machine?

If you plan on deploying your app on a server, I'd suggest you to use a reverse proxy such as Nginx to guard your application, as well as Let's Encrypt so you can easily use HTTPS for free.

If you use Docker, you might be interested in this image: https://github.com/JonasAlfredsson/docker-nginx-certbot. It automatically creates (and renews) SSL certificates for you with Let's Encrypt. Since it's built on top of Nginx you can also use it as a regular reverse proxy. I've used it before and it's pretty good, but you do need to configure Nginx. In any case, you should not have to change anything in your application code.

Let me know if that helps 😃

— Reply to this email directly, view it on GitHubhttps://github.com/rhian-cs/cm42-blogpost-vue-express-webapp/issues/6#issuecomment-1901115168, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACCK53VZ7AM22R2EJ2LOFX3YPLN47AVCNFSM6AAAAABCBPLNNOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBRGEYTKMJWHA. You are receiving this because you were mentioned.Message ID: @.**@.>>

[rhian-cs]

To make sure your API calls are being made on the server, put it in a file under the server/ directory and be sure it is imported by either server/index.js or any files imported by server/index.js. Make sure to not import that file in any of the client JS files.

If you want your front-end to be able to access that data (without exposing that code or API keys to the client) you could make an endpoint in your server that makes the request to that external API. For example:

flowchart TD

    YourClient-->|GET /api/v1/my_payment_info|YourServer

    YourServer-->|GET http://example.org/api/payment_info/:user_id?apiKey=YOUR_SECRET_KEY|ExternalAPI

That way you can call /api/v1/my_payment_info in your client in the onmounted lifecycle method and have your back-end handle all the work with the external API. Both requests can be made with Axios.

[iang0ld]

thank you. You help is invaluable.

Sorry but are ae to explain the first paragraph about index.js perhaps with an example. I am unsure of what you are saying g.

Yours Ian

---

From: Rhian Moraes @.> Sent: Sunday, January 21, 2024 3:21:57 AM To: rhian-cs/cm42-blogpost-vue-express-webapp @.> Cc: Ian Gold @.>; Mention @.> Subject: Re: [rhian-cs/cm42-blogpost-vue-express-webapp] How can this be modified to work with https server on localhost (Issue #6)

To make sure your API calls are being made on the server, put it in a file under the server/ directory and be sure it is imported by either server/index.js or any files imported by server/index.js. Make sure to not import that file in any of the client JS files.

If you want your front-end to be able to access that data (without exposing that code or API keys to the client) you could make an endpoint in your server that makes the request to that external API. For example:

flowchart TD

YourClient-->|GET /api/v1/my_payment_info|YourServer

YourServer-->|GET http://example.org/api/payment_info/:user_id?apiKey=YOUR_SECRET_KEY|ExternalAPI

That way you can call /api/v1/my_payment_info in your client in the onmounted lifecycle method and have your back-end handle all the work with the external API. Both requests can be made with Axios.

— Reply to this email directly, view it on GitHubhttps://github.com/rhian-cs/cm42-blogpost-vue-express-webapp/issues/6#issuecomment-1902166731, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACCK53XIJZU4CZCNGHNEN3DYPPVKLAVCNFSM6AAAAABCBPLNNOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSGE3DMNZTGE. You are receiving this because you were mentioned.Message ID: @.***>

[rhian-cs]

Hi @iang0ld ! Sure!

What I meant is that this project has two main directories for source code: src/ and server/.

Even though both files are in the same repository (and are part of the same project) they're executed separately.

The src/ directory contains everything that will be run by the client, so it will be sent to the user as a JS bundle.

The server/ directory contains everything that will be run by the server, that is, everything that Node will run in your server machine.

JavaScript modules work like a tree: modules can import other modules which forms a module tree.

In the case of this project we have the following files under server/ directory: index.js, homepageRouter.js and assetsRouter.js.

If you look at each file you can see that index.js imports homepageRouter.js and assetsRouter.js. That forms the following tree:

└── server/index.js
    ├── server/homepageRouter.js
    └── server/assetsRouter.js

Since server/index.js is directly executed by Node when starting the server:

https://github.com/rhian-cs/cm42-blogpost-vue-express-webapp/blob/3b65319caeb4b4bc0938511ef2b442b2bbdfd7af/package.json#L9

That means homepageRouter.js and assetsRouter.js are imported as well, and they're both going to be run on the server.

Let's say you wanted to call an external API using the server. You could add an endpoint in index.js like this:

app.get("/api/v1/external_api_call", async (_req, res) => {
  const postsRequest = await axios.get('https://jsonplaceholder.typicode.com/posts');

  res.json({ posts: postsRequest.data });
});

However, to keep index.js clean you could also extract this endpoint to another file, as long as it is imported by index.js (like homepageRouter.js or assetsRouter.js), so that it is included in the module tree.

Let me know if that answers your question!