Deploying the Application

To ensure that others can also see my website (i.e. that I no longer view my site via my localhost), it is important to deploy the website.

Jump to:

• Trying to deploy to Netlify
• Trying to deploy to Vercel
• Fixing the capitals
• Fixing the warnings

Trying to deploy to Netlify

Since I have previously deployed a github folder to Netlify, it seemed sensible to use Netlify again for this. I also thought that because I already know it, it would only be 2 minutes of work. But unfortunately I had a lot of problems deploying my website.

First, I logged into Netlify with my GitHub account. Then I clicked the button: 'New site from Git' where I could create a new site. I searched for the github repo (frontend-applications in this case), changed the name of the URL and the folder was connected. Fortunately, this went well.

But then I had to start uploading my code using the code below:
$ npm run build

Unfortunately this did not work. I got this error message:

Failed to compile. 

Without looking at the errors themselves, I thought it was netlify. For this reason I went to see if another deploy platform would work. That's how I ended up at Vercel.

Trying to deploy to Vercel

Vercel works exactly the same as Netlify: You can deploy a website using your GitHub account. So I also logged in to Vercel via GitHub, searched for the repo I wanted to deploy (frontend-applications), adjusted some settings and that way my repo was connected to vercel. Just like on Netlify, I just had to type in the command: npm run build again to deploy my code. But here too I got the same error in my console:

Failed to compile.

Because of this I knew that the error was not due to Vercel or Netlify, but to my own code. But now, of course, the question was: What is the reason for this?

Fixing the capitals

To find out exactly what went wrong while deploying my code, I went to Netlify to see the console where the errors are displayed. In this console it said the following at the top:

$ Cannot find file './components/atoms/HeaderTitle.js' in './src'
$ npm ERR! code ELIFECYCLE
$ npm ERR! errno 1

I then googled this error to find out what exactly I did wrong. That way I immediately came across the problem I mentioned earlier in my wiki (Wiki - Getting started in React). At the beginning I had written all my folders and files with a capital letter. But Vercel and Netlify (and the other deploying platforms) are case sensitive. This means that deployment fails when files and folders are written with capital letters (Source). For this reason I changed all file and folder names to lowercase. Only I got the same error message again.

So I decided to post a message in Teams and ask if other students / teachers saw what went wrong. With the help of these other students / teachers, I found out that I thought all my folders had gone to lowercase, but 1 folder was not completely cooperative. This concerned the 'Components' folder. In my files on my laptop there was a folder called components (note the lower case letters) but on GitHub there was a folder called Components (note the capital letter).

I then solved this by creating a 'test' folder, containing a copy of everything that was in the Components folder. Then I pushed this to GitHub so that I had two folders: the 'Components' folder and the 'test' folder which both contained the same code. After this I removed the 'Components' folder and changed the name of the 'test' folder to 'components' (with a lower case letter) and pushed everything back to GitHub. Fortunately, this worked and I was able to try to deploy again. But unfortunately the deployment still failed.

Fixing the warnings

Then I went back to the error console of Netlify why the deployment still failed. In the console it said the following at the top:

$ Treating warnings as errors because process.env.CI = true.

Below was an explanation on which lines everything went wrong. But what this meant was the following: My code contained a number of warnings (such as assigning a key to the .map on my circles in front of the map) that were considered errors. The solution was to simply resolve all warnings. After this, the deployment suddenly worked and my website was online!