Build error due to sensitive data in .gitignore file

LauraLee · October 18, 2020, 2:47pm

I too am having problems with the deploy failing whether using yarn build or npm run build,
I used your suggestion and ran CI= npm run build, but it still failed.
Here is the link to the build log
https://app.netlify.com/sites/covid19-world-data/deploys/5f8c540b0e2c914013d41196

Thank you
Laura

luke · October 19, 2020, 12:54am

Hi, @LauraLee. I split this question to a new topic because the issue in this case is different.

The error in the logs is this:

7:42:30 AM: Failed to compile.
7:42:30 AM: 
7:42:30 AM: ./src/components/Country.js
7:42:30 AM: Cannot find file '../data/clientInfo.js' in './src/components'.
7:42:30 AM: npm ERR! code ELIFECYCLE
7:42:30 AM: npm ERR! errno 1
7:42:30 AM: npm ERR! covid-react@0.1.0 build: `react-scripts build`
7:42:30 AM: npm ERR! Exit status 1
7:42:30 AM: npm ERR!
7:42:30 AM: npm ERR! Failed at the covid-react@0.1.0 build script.
7:42:30 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
7:42:30 AM: npm ERR! A complete log of this run can be found in:
7:42:30 AM: npm ERR!     /opt/buildhome/.npm/_logs/2020-10-18T14_42_30_958Z-debug.log

The logs are public as is the repository URL so I took a look at the file referenced here:

github.com

LauraLeeLee/2nd_covid_react/blob/master/src/components/Country.js#L7


      
          import React, { Component } from 'react';
          import PropTypes from 'prop-types';
          import Moment from 'moment';
          import Header from './Header.js';
          import SelectedCountry from './SelectedCountry.js';
          import DateComp  from './Date.js';
          // import DayPicker from './DayPicker.js';
          import { formatDate } from '../today-date.js';
          // import { apiKey } from '../data/clientInfo.js';
          // import { REACT_APP_API_KEY } from '../.env'; don't need to import the .env file, it is accessed with process.env.variableName
          
          
class Country extends Component {
            state = {
              apiData: [],
              selectCountry: '',
              selectedApiData: {},
              apiError: '',

This references a file of ../data/clientInfo.js. However, there is no such file at that path:

https://github.com/LauraLeeLee/2nd_covid_react/tree/master/src/data

The list of files there does not include clientInfo.js so there is an error when that file is imported from on line 7 of Country.js.

To summarize, it is a real error and not something caused by our service. If there are other questions, please let us know.

LauraLee · October 19, 2020, 4:07pm

Hello Luke,
Thank you for responding.

The file ../data/clientInfo.js is in .gitingore as its information not be be accessed publicly as it contains keys.

How is that to be handled then for Netlify? So it can build but so the files will remain unseen in github and netlify?

Thank you
Laura

perry · October 19, 2020, 7:44pm

hi Laura,

you may want to store the sensitive data in an environment variable:

also may be of interest:

LauraLee · October 22, 2020, 7:35pm

Thank you Perry. I created the .env file and moved the api there.

It deployed, but doesn’t work. Its failing where the code grabs the API data.
I have console.log in the app.js the process.env to console out the name of the variable in .env, its returns as undefined in console.

I created the app with create-react-app, and have the variable name in .env appended with REACT_APP_.

EDIT: I see where I went wrong, I’m struggling a bit to add the correct information to then rebuild.
I didn’t add environment variables to the Environment section for netlify build.
Where it says to

Set environment variables for your build script and add-ons

Then to add the key and value, the key I would think would be the variable name, but I’m not following what the value should be…certainly its not the api key itself that I’m keeping hidden.

Going through the docs to try to grasp the steps needed. Any guidance would be appreciated.

Thank you for your time,
Lee

luke · October 26, 2020, 4:12am

Hi, @LauraLee. There is no way (that I know of) to protect secrets in client side javascript. The solution for this is typically to make the required API calls via Functions and store the private API keys in that environment.

There is a support guide about this here: