1

I've successfully deployed my JSS VueJS app on Vercel, but it's not working as expected. I suspect the issue lies in the absence of environment variables, which I know are essential.

Unlike the default Sitecore VueJS application, which uses vue.config.js , my app doesn't have a .env file. I attempted to follow this tutorial for nextJS, but unfortunately, it didn't work.

Can anyone help me identify the VueJS variables I need to set in my Vercel environment? If there are any specific documents or guides on this topic, I'd appreciate the pointers. Thank you

1 Answer 1

1

It appears that you have successfully deployed your JSS VueJS app on Vercel, but you are facing issues, possibly because of missing environment variables. You are correct, environment variables play a crucial role in configuring applications accurately.

You mentioned that your app doesn't have a .env file like the default Sitecore VueJS application. If you're following a tutorial that's focused on Next.js, it might not align perfectly with your VueJS app's requirements.

To identify the VueJS variables you need to set in your Vercel environment, you'll want to consider the configuration needs of your Vue app. Common environment variables for Vue apps might include API endpoints, authentication tokens, or other runtime settings.

On the basis of the above, I can suggest 2 Approaches as below.

Approach 1

Here are the general steps you can follow:

  1. Identify Required Variables: List down the variables your VueJS app needs. These could be API URLs, keys, secrets, or any other configuration values.

  2. Configure Vercel: Go to your Vercel project dashboard and navigate to the settings section. There should be a place to add environment variables. Add the variables you identified in the previous step here.

  3. Accessing Environment Variables in Your App: In your Vue app code, you can access these variables using the process.env object. For example, if you've set an environment variable named VUE_APP_API_URL, you can access it like this: process.env.VUE_APP_API_URL.

As for specific documents or guides, since you're working with VueJS on Vercel, you might not find resources that exactly match your scenario. However, you can look into

Vercel's documentation on environment variables

While it might be more focused on Next.js, the concept of handling environment variables should be similar and might provide valuable insights.

Remember to ensure the variable names you use in Vercel's dashboard (VUE_APP_API_URL for instance) match the ones you reference in your Vue app's code.

Approach 2

To set up environment variables for a VueJS app deployed on Vercel, you can follow these steps:

  1. In your VueJS project, create a .env file in the root directory. This file will store your environment variables.

  2. Open the .env file and define your variables in the format VARIABLE_NAME=variable_value. For example:

    API_URL=https://api.example.com
    SECRET_KEY=abc123
    
  3. In your VueJS code, you can access these environment variables using process.env.VARIABLE_NAME. For example:

    const apiUrl = process.env.API_URL;
    const secretKey = process.env.SECRET_KEY;
    
  4. Install the dotenv package by running npm install dotenv in your project directory. This package will load the environment variables from the .env file.

  5. In your VueJS project, create a vercel.json file in the root directory (if it doesn't exist already).

  6. Open the vercel.json file and add the following code to define the environment variables for Vercel:

    {
      "env": {
        "API_URL": "@api-url",
        "SECRET_KEY": "@secret-key"
      }
    }
    
  7. Deploy your VueJS app to Vercel. Vercel will automatically replace the placeholders (@api-url and @secret-key) with the actual environment variable values defined in the Vercel environment.

By following these steps, you should be able to set up and access environment variables in your VueJS app deployed on Vercel.

If you continue to face issues, don't hesitate to provide more specific details about the problem you're encountering, and I'd be glad to offer further assistance. Good luck, and I hope this might help you and you get your VueJS app up and running as expected!

4
  • Hello Nikhil, thank you for your suggestions. Unfortunately I'll not be able to test it. We've decided to go to a docker approach, which makes it easier to deploy our current VueJS app instance. So we've dropped Vercel for VueJS app. Aug 29, 2023 at 12:11
  • Oh, that means this question is no longer needed correct? @FabioCarvalho Aug 29, 2023 at 19:14
  • Yes, that's right. Aug 30, 2023 at 20:21
  • Maybe then you could mark the answer and close the question @FabioCarvalho Sep 1, 2023 at 7:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.