Nuxt.js: need a resolve.alias "~base" point to the base folder of project

[jiangfengming]

I want to put the AJAX functions into a folder named "models" or "apis" or whatever. The predefined alias can't meet my needs, and everyone has his own habit, why not adding an alias pointing to the base folder?

_{This feature request is available on Nuxt.js community (#c13)}

[Atinux]

What do you think of ~app instead of ~base?

[jiangfengming]

Yeah, I think both are great!

BTW, what is the best practice to define environment configs in nuxt? For example, backend api base URL is different between development and production. Before I use webpack.DefinePlugin() to inject different configs when run npm run dev vs npm run build . Since Nuxt doesn't support customizing webpack.DefinePlugin, I think I can approach another way like:

const conf = require('./' + process.env.npm_config_profile);

[Atinux]

Actually, you have access to process.env in your *.vue components, but they will be filled only when loaded from the server-side.

What if you could configure the environment variables with Nuxt.js with the nuxt.config.js file like this:

module.exports = {
  env: {
    API_URL: process.env.API_URL || 'https://localhost:3000/api/'
  }
}

They will be merged in the webpackDefinePlugin() with the already existing process.env.NODE_ENV.

You could then use them trough process.env in your *.vue components:

<!-- pages/index.vue -->
<script>
export default {
  data () {
    // call API with process.env.API_URL
  }
}
</script>

What do you think?

You could also use .env file in the nuxt.config.js:

require('dotenv').config()
module.exports = {
  env: {
    API_URL: process.env.API_URL || 'https://localhost:3000/api/'
  }
}

So you could write your environments variables in the .env file for development.

[Atinux]

The downside of this use is that the environments variables will be exposed in the source code of the client-side, which is a pretty big security issue.

[Atinux]

@fenivana

Here the implementations in the v0.7.3

• You can now define env variables in nuxt.config.js
• You have access to the base folder with ~, example: require('~/models/Foo')

Thank you for your trying nuxt.js 🔥

[jiangfengming]

You're awesome!

[stursby]

@Atinux did you find a solution for not exposing env vars in the client-side code? I'm also trying to use a headless CMS and don't want my API KEY leaked into the client code.

[Atinux]

@stursby they are not leaked in the client-side, you can access them in your vue files but only from the server-side.

If you want to give them to the client-side, you have to manually define them in the ˋnuxt.config.jsfile in the ˋenv property.

[stursby]

@Atinux Hmmmm, I was making API calls which required an API Key which I'm loading from a .env file. Then calling require('dotenv').config() in nuxt.config.js.

Sever-rendered pages work just fine... however when I try and navigate client-side to another page, that page fails (because it has no knowledge of process.env).

So then I tired using the env property in nuxt.config.js and everything works fine, however like you mentioned above, now my API Key is in plain text in .nuxt/utils.js.

[Atinux]

I see @stursby

But even if the API Key is not in plain text in your code, your API calls made from the client-side will have the API Key in the parameter.

Do you mind sharing the headless CMS you're using, it might help me to know more what you're trying to achieve.

[stursby]

@Atinux Yea, let me throw a demo together. In the meantime, the headless CMS I was testing out was Elemeno. So basically if I hard-coded my API Key, everything works, however, then that key shows up in the .nuxt/ output. (Elemeno DOCS)

// works (but leaks key)
var elemeno = new Elemeno('secret-key-here');

// only works on full page loads (server side render)
// client side navigation via <nuxt-link> throws a 404
var elemeno = new Elemeno(process.env.SECRET_KEY);

[Atinux]

@stursby You need to use something like http-proxy-middleware with setting the API KEY via onProxyReq option.

You will need to use nuxt.js programmatically, see https://nuxtjs.org/api/nuxt-render

See an example with express here

And then from the client-side, you call only your server which proxy the request to Elemeno API.

[stursby]

@Atinux any chance you could put together a demo w/ http-proxy-middleware? I'm struggling getting it all working together. I've tried setting dynamic env property in nuxt.config.js, but still run into server error when navigating between pages on the client side (full rage refresh / server-side rendering works just fine). I'm sure I'm not alone trying to find a solution where you can define express routes that talk to a private API, and then call them via client-side (axios in my case). Any help/ideas/thoughts would be much appreciated 🙌

[samkitano]

I am struggling with the authentication process for an API, as well.

Keeping an authorization token available for both client and server is driving me crazy.

Any light on this topic would be much appreciated!

[stursby]

@samkitano I think @Atinux took care of it in a similar comment of mine. You need to set a Nuxt environment for PROD as to what the end URL will be... granted this has nothing to do with uisng http-proxy-middleware.

[samkitano]

Thanks for the heads up, @stursby, in fact I was (unsuccessfully) trying to implement that very same concept using dotenv.

But my problem is one of a different nature:

I have a Laravel API running on port 80, using Laravel Passport, which automatically generates and returns in response an authorization (jwt) token right upon successful authentication.

data:
{
  access_token: "eyJ0eXAiOiJKV1QiLCJhbG...",
  expires_in: 31536000,
  refresh_token: "H7sLz9StOVr5qAk+...",
  token_type: "Bearer"
}

Nothing else to do on this side.

On the other hand, I have a SPA Vue.js app that perfectly communicates with the API, through axios. The app uses local storage to save the session details. I am now trying to "convert" to Nuxt.js, to take advantage of SSR. So, basically what I need it to do is:

• Send a POST to the API with user login (username & pw).

• Receive back a response.

• Somehow store the response.

• Use the stored response to perform each and every request made to the API.

By tweaking the provided example "AuthRoutes", I have managed to do so, but as soon as a page is refreshed, the token (living in Vuex) is lost. No use.

The express server, for whatever reason (my guess is a domain:port related thing), is failing to set a cookie, but even it if were, it would be useless, since apparently I can't really set its value with the jwt token (or any other).

To sum it up: I am failing to figure out the right approach for the whole process. It is not a Nuxt thing, which btw, it's absolutely brilliant. The problem is my miserable understanding of SSR and node, as front-ending has never been my favourite beach, really. Vue.js definitely got my attention, and I'm quite sure Nuxt is the right tool for the SSR (and not limited to) job.

So, if someone could just point me the right road on this, I would be forever grateful. "This" being how the frack do I keep the fracking token alive in both client and server rendered pages xD

Cheers!

[Atinux]

Hi @samkitano

I know SSR can be difficult at the beginning, I will work on an example with auth0 + nuxt.js to see how to handle JWT with nuxt.js easily, see #197 (I suggest to keep this thread there since it's still open and more pertinent).

In the meantime, you can take a look at this example (https://github.com/nuxt/example-todomvc) where I store the todos in the session. It's the same problem for the JWT where the server needs to know the stored token but it cannot access the localStorage. I think the cookie might be the solution since it's shared both on the client-side and server-side of the nuxt application.

[samkitano]

Thanks a lot, @Atinux! That would be fantastic!

I will definitely read the thread and take a look at the example; it seems to be exactly what I need, or at least related.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.