DEV Community: James 'Tucker' Wray

Netlify Deployment config settings for craco react apps.

James 'Tucker' Wray — Sun, 03 Jan 2021 21:24:35 +0000

Recently I discovered a new build tool 'craco'.
[Create React App Config Override].
Craco allows you to customize create react app without ejecting (Adding less for those super convenient cascading stylesheets anyone?). This meant new things were possible with create react app which wouldn't previously have been possible without making some sacrifices.
For example:
-sacrificing future dependency update coverage
-donating the time and energy for some serious research and custom configurations to the webpack setup/ other cogs and pulleys cra takes care of for us.

From my understanding ejecting a create react app means losing all future automatic updates to your application's dependencies. The future automatic updates thing doesnt sound too terribly bad, more of a headache and a development time tax I'd prefer not to pay. Just another thing in the back of my mind taking up space. I feel like a few scripts might be written to update thwm on your own. I mean you know the scripts exist out there already. How else are the updates pushed out to us currently. Its just taking time to find them or create your own versions.

I digress...
Adding 'LESS' to my react application sounds like a winning idea and when I bumped into this craco thing wandering through the interwebs one weekend I was all for giving it a try.

As with all of my web adventures ... there were some bumpy roads ahead.

While converting my Netlify Deployment from an npm create react app to a craco create react app, I ran into some hangups.
The following writeup will hopefully shed some light on your dark situation and save you some time and build hours on the console.
here goes...

key |

_______________________________________________|

TLDR

Netlify Build Settings UI

package.json

netlify.toml

errors

TLDR |

_______________________________________________|

This was the solution:

|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= npm run build |
| Publish directory | ./build |
|-------------------|--------------------|

Netlify UI Build Settings UI |

_______________________________________________|

My problem was in the Netlify Build Settings UI.

I was incorrectly using UI= craco build for my build script. Netlify's build-bot didn't recognize the craco dependency. It does however recognize yarn or npm.
The final correct build step configuration was to just stick with 'npm run build' and have that call 'craco build', "underneath the hood".

Invalid Configuration:

|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= craco build |
| Publish directory | ./build |
|-------------------|--------------------|

isnt recognized by the build-bot

Valid Configuration:

|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= npm run build |
| Publish directory | ./build |
|-------------------|--------------------|

but is recognized

package.json scripts |

_______________________________________________|

simply replace all "react-scripts" with "craco" at least the start, build, & test scripts
"react-scripts start" would become "craco start"

e.g.:

"scripts": {

     "start": "craco start",
     "build": "craco build", 
     "start:proxy": "REACT_APP_PROXY=true craco start",
     "test": "craco test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject",
     "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
     "coverage": "npm test -- --coverage --watchAll=false",
     "lint": "eslint 'src/**/*.{js,jsx}' --fix",
     "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
     "storybook": "start-storybook",
     "deploy-storybook": "storybook-to-ghpages"
   },

netlify.toml to allow react router redirects|

_______________________________________________|

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

errors from Netlify Build Logs |

_______________________________________________|


11:27:54 AM: $ CI=craco build
11:27:54 AM: bash: build: command not found
11:27:54 AM: 
11:27:54 AM: ────────────────────────────────────────────────────────────────
11:27:54 AM:   "build.command" failed                                        
11:27:54 AM: ────────────────────────────────────────────────────────────────
11:27:54 AM: 
11:27:54 AM:   Error message
11:27:54 AM:   Command failed with exit code 127: CI=craco build
11:27:54 AM: 
11:27:54 AM:   Error location
11:27:54 AM:   In Build command from Netlify app:
11:27:54 AM:   CI=craco build
11:27:54 AM: 
11:27:54 AM:   Resolved config
11:27:54 AM:   build:
11:27:54 AM:     command: CI=craco build
11:27:54 AM:     commandOrigin: ui
11:27:54 AM:     environment:
11:27:54 AM:       - REACT_APP_CLIENT_ID
11:27:54 AM:       - REACT_APP_GOOGLE_API
11:27:54 AM:       - REACT_APP_HEREAPI
11:27:54 AM:       - REACT_APP_MAPBOX_TOKEN
11:27:54 AM:       - REACT_APP_PS_ID
11:27:54 AM:       - SKIP_PREFLIGHT_CHECK
11:27:54 AM:   redirects:
11:27:55 AM:     - from: /*
      status: 200
      to: /index.html
Caching artifacts


7:32:03 PM: ────────────────────────────────────────────────────────────────
7:32:03 PM:   1. Build command from Netlify app                             
7:32:03 PM: ────────────────────────────────────────────────────────────────
7:32:03 PM: 
7:32:03 PM: $ craco build
7:32:05 PM: Creating an optimized production build...
7:33:26 PM: Failed to compile.
7:33:26 PM: 
7:33:26 PM: src/redux/reducers/rootReducer.js
7:33:26 PM:   Line 28:37:  Missing semicolon  semi
7:33:26 PM:   Line 36:38:  Missing semicolon  semi
7:33:26 PM: src/route_views/discover/searchlistings/listings/ListingCard.js
7:33:26 PM:   Line 48:73:  Missing semicolon  semi
7:33:26 PM: src/route_views/discover/searchlistings/listings/SingleListingView.js
7:33:26 PM:   Line 3:72:   Missing semicolon  semi
7:33:26 PM:   Line 7:53:   Missing semicolon  semi
7:33:26 PM:   Line 8:25:   Missing semicolon  semi
7:33:26 PM:   Line 9:22:   Missing semicolon  semi
7:33:26 PM:   Line 11:33:  Missing semicolon  semi
7:33:26 PM: src/route_views/discover/suggested_listings/SuggestedListings.js
7:33:26 PM:   Line 38:23:  Missing semicolon  semi
7:33:26 PM: src/utils/CalendarRangePicker.js
7:33:26 PM:   Line 15:3:   Missing semicolon  semi
7:33:26 PM:   Line 16:91:  Missing semicolon  semi
7:33:26 PM:   Line 20:27:  Missing semicolon  semi
7:33:26 PM: Search for the keywords to learn more about each error.
7:33:26 PM: 
7:33:26 PM: ────────────────────────────────────────────────────────────────
7:33:26 PM:   "build.command" failed                                        
7:33:26 PM: ────────────────────────────────────────────────────────────────
7:33:26 PM: 
7:33:26 PM:   Error message
7:33:26 PM:   Command failed with exit code 1: craco build
7:33:26 PM: 
7:33:26 PM:   Error location
7:33:26 PM:   In Build command from Netlify app:
7:33:26 PM:   craco build
7:33:26 PM: 
7:33:26 PM:   Resolved config
7:33:26 PM:   build:
7:33:26 PM:     command: craco build
7:33:26 PM:     commandOrigin: ui
7:33:26 PM:     environment:
7:33:26 PM:       - REACT_APP_CLIENT_ID
7:33:26 PM:       - REACT_APP_GOOGLE_API
7:33:26 PM:       - REACT_APP_HEREAPI
7:33:26 PM:       - REACT_APP_MAPBOX_TOKEN
7:33:26 PM:       - REACT_APP_PS_ID
7:33:26 PM:   redirects:
7:33:26 PM:     - from: /*
      status: 200
      to: /index.html
Caching artifacts

Setting Dynamic Variables/Properties in Javascript

James 'Tucker' Wray — Mon, 14 Sep 2020 01:51:52 +0000

I became overwhelmed while trying to learn redux, because not only was I learning Redux-- I was also learning higher level concepts of JavaScript intertwined with the Redux module.

Topics included:

how to verbalize a definition for what state really even meant without using the word 'state'
how state differed from props, the concept of immutability
why you would want to maintain immutability when working with state
how to maintain immutability when working with state
how to use switch-cases or to use the spread operator of ESNext
why you would want to 'rewind state'
Lets not forget the topic of today's blog: how to select object properties dynamically such as when setting action payloads to the values of a state slice in Redux Reducers.

This technique saved me a lot of time when creating reusable forms with functions for storing and updating state including handler functions such as a change-handlers or submit-handlers. I found the dynamic bracket notation useful many times when I was using a spread operator to duplicate or make a copy of an object or array
This is a shorthand and I didn't understand how simple it was for the longest time.

I found the following snippet on a Google Search. It cleared things up for me in the flash of another light-bulb moment.
You can also set dynamic properties with the bracket syntax:

var property="test";
var obj={
[property]=1;
};

console.log(obj.test);//1
It does the same as:

var property="test";
var obj={};
obj[property]=1;
Naming conventions and variable name choices are essential for developers to understand and efficiently work with your codebase. I am torn between assessing the var name choices here as muddy and obscure or expertly declarative.

First we have a string assigned to the var 'property' followed by a JavaScript object {} assigned to the var 'obj'. Our JS object 'obj' contains a single key:value pair or object \n named 'property'.

where the objects sole property is actually assigned to be called by the variable " property ".

What we are creating here is actually the ability to create numerous key value pairs on the object "obj".

by reassigning the value of our var "property", we are able to create a new key:value pair on "obj".

var property="propertyNumber2"
print(obj)
yields {"test":1,"propertyNumber2":1}

example retrieved and reshared from https://riptutorial.com/javascript/example/2321/dynamic---variable-property-names#

How to Edit Styles with Chrome Inspector..And take them with you when you're done 🥃 🎈🧨✨🎉🎊

James 'Tucker' Wray — Mon, 14 Sep 2020 01:44:08 +0000

Today I learned how to Use Chrome Editor Like webpack or the hot-reloading feature and to export new styles from chrome inspector.

open the inspector with right click >inspect or
[ctrl] + [shift] + [i]
select elements tab
(its in the top row of the inspector menu next to console

-click the left square with arrow in it in top left corner of inspector panel
or
[ctrl]+[shift]+[c]

hover over the elements of your html tree structure or hover over the actual page itself

see things highlighting blue or brown and green ?
the brown and green are padding and margin
the blue is the html element your are now interacting with

click the element you need to style

### in the styles pane

if there is a current selector imported from your projects stylesheet for this element, it will appear here with the current styles

if there is not a selector present in your imported stylesheet for this element

a new selector for elements of that type will appear for you to add styles

you may use that one or create your own
to create your own click the plus sign in the top right

or doubleclick into the selector name to input the selector specificity you would like to use for your new style rules

now

you're editing an element in the inspector tool.

sweet.

how do you get your new styles out when you are finished.

if you hit refresh or close the window they are gone.

you could copy paste the new styles into a text.file like notepad as you go.
just dont get carried away and forget one.

It'll be really hard to differentiate:

😵 what was there already 😵 ?
🆕 what you added new
❌what you removed

🔨 and what you just tweaked or changed a little bit
Or will it...

see that plus you clicked to create your own new specific selector..?

hover it until the helper text pops up saying
--'new style rule'

when that pops up
hold down the left click on the plus sign

--a dropdown option appears wit hat least two options
--inspector-stylesheet

&
-- a reference to your projects css file

which ever one you select will create a new selector and empty style rule for you to edit in that sheet

pretty cool

now down in that new selector you created with the plus button

notice on the right edge there is a filename:number

clicking that will pull up the stylesheet this selector and ruleset is being added to allowing you to directly edit delete or copy any or all of it.

now you can take your new inspector styleswith you all at once at the end

SO go ahead and get carried away again
it okay now!

the fun is back in development!!

Deploy React Repo from Github with CodeSandBox.io & Netlify integration.

James 'Tucker' Wray — Mon, 14 Sep 2020 01:37:21 +0000

tldr: This write-up elaborates on two related processes I use several times a week.
spinning up images and deploying them

-one
You can create images of several projects at once using the urls from the github repos
I use this technique to review my students projects 8 at a time to save time & space on my personal machine and avoid cloning down and installing dependencies of each project 1 at a time.

-two
There is a sweet netlify/vercel integration with codesandbox that lets you streamline a CI/CD setup at the literal click of a button the step by step for both processes is below.

I like to code. Going to a fully remoteCode School I have gained a lot of exposure to CodeSandBox, Github, and React--especially create react app.

I have gained a fondness for using CodeSandBox as my development environment.
I have access to a terminal. I can fork my project right there and have it spin up a clone to try out new features. I have access to node package manager and a staging environment. I can drag and drop in images to have them accessible in the project. Its so cool.
I love it already.

Then I figured out I could deploy my creations to netlify and Vercel(Zeit now).
Niiiice.

Im really loving it.

When starting a create React App, you inadvertently end up with a project nested inside of a named directory. When developing on a local machine that's very Useful. It helps you to keep you projects separate and identifiable in the terminal.The problem arises with the root of you project being nested inside the directory.
When you push your project to Github You have to drill down one directory to see
-your index.html
-your package.json etc
-the files that a build step is going to look for. I first noticed this when I attempted to deploy my hard earned projects to a live site so that I can show them on my portfolio. When deploying to Netlify Gh-Pages or Vercel/Zeit you have to give the build server directions to your root.

One -Level -Down. This causes so many errors and You end up having to wait 2 minutes everytime for the project to spin up | ⚡🌩 fail 🌩⚡ | and try again. 🔁🔁🔁

So I become a Team Lead at the code school. I now have a team of 8 programmers slightly junior to me creating projects 5 days a week after lecture. These projects need my review and feedback the same day by 5pm! 3 hours 8 projects.
Options.

clone them all down
spin up the project on a local host
open a VSCODE instance in the half screen beside and line by line it checking for whatever features I dont see on the local host browser.
hope the dependencies match my local setup. HA! right!

2.
Look through the code line by line on github and assume it works because the code'looks right with no obvious bugs'-- not good enough for the pros not good enough for me.

Pick up a Neural Link a la Elon Musk and try number two but this time my neural cortex actual runs the code somewhere in my left lobe?
Not this year.
the option I have gone with for 8 month now ... 🥁 💦

Enter Codesandbox. and their import Project from Github feature.
🥰😍😻💖 be still my hearts

Lets get the actual process

1
Find your repo at github

choose the correct branch
meaning the one you want to deploy

2 choose the correct level aka folder

Drill down to the Package.json
- If you dont see it on the top screen
- click into the folder Create React App named after you project. That'll take you inside and on the next page you should see everything the same but the folder structure.
You're one(1) folder in.
Locate package.json -that's the level you want to deploy as root.

3
From here you want to copy the URL from the address bar exactly as it is

don't change it by clicking on anything else.

in a new tab go to your codeSandbox dashboard -- https://codesandbox.io/dashboard/recent

(4 1/2 - you might have to log in 😭 🔐 😂)

5
Click create Project

the top box Center of Page

in the box modal that pops up
- choose the bottom option --on the left sidebar -- "import Project"

Paste your URL into the input blank and hit "Generate Sandbox"

7a
If you have permission to link to this repo you'll see Codesandbox's loading animation.

7b
It cant be private unless
-its yours
and
-you've linked github to your Codesandbox account

7c aka 'try again you copied the url incorrectly'

If you get -an all black screen -with the error message -you might go back to your github repo and make sure --you copied the URL correctly and --that you had navigated to the level where package.json can be found.

When your sandbox spins up it will be in a safe mode so
8

hit fork sandbox in the top right corner

from here you can locate the familiar
Github OctoCat on the left menu bar
~click her smile~
..(Octocat is a her, right?)
9

click their smile

9a
youll see more familiarity such as options

to link to a repo
create a new repo
create a pull request
create a commit message.

you can deploy here but I usually wait until I have something worth while before doing any type of Continuous Deployment even if it is ridiculously simple with CodeSandBox and Netlify's integration.

When you get to that point that you feel the need to share this work of art with the rest of the world wide web...

in the "Left Menubar of Power" (the only left menubar)

find the ardently labeled Rocket Ship 👩🏻‍🚀👨🏻‍🚀🚀
We are Launching Code bebe! 🤘🏻👩🏻‍🎤🤘🏻 🤘🏻👨🏻‍🎤🤘🏻

11
--select Vercel or Netlify
hopefully you have a free account with one of the two
11a
-- if not its the standard verify with google etc.

So select Netlify. 12
Select Deploy App.

give it a few seconds
13

and you will see a new option appear -- to view the build progress.

This will show you the console rolling down command line responses as your app is built at rocket speed(see what I did there? I told you we were launching rockets bebe 🎸 )

13b

At the end of the rocket rollout aka when the build process logs stop.. If you dont see something about
- "failure!!!" or
- "exit code 132"
- "--failed deploy"

13c

you should see a message with -- deploy successful -- followed by a button and a link -- to "view demo" Check it out!

This is the testing grounds -- Look for any bugs -- this is what your page will look like to the world and Netlify is kind enough to give you a practice round before the big show.

If you like what you see -- go back to code sandbox

in the "Lefthand Menu of Power" find the button that says " CLAIM "

16b

click it and you should see a screen with --" merge codesandbox deploys to Netlify Dashboard" I have to go through this screen almost everytime.

16c
--Click accept.
occasionally You will have to verify your google account by pushing the picture of your google icon one more time.

Now on to the Netlify Dashboard -- so you can pick a more accurate Domain Name. -- That's a technical term for the webpage address. 🕸+📃

17b

Click on Domain options in the middlescreen navigation bar.

17c

In center screen -- there is a button for domain options/settings. -- select that -- a dropdown on the right has the option -- to edit settings or edit domain settings.

By clicking this you will gain access to a input field and be able to pick the website name that brings you the most joy. 😂 🎈 🎉

Its free too. 🆓

18 Last Button@@!@!!

Hit save and you are done my beautiful friend on the internets!

We deployed 👇🏻 click by click 👆🏻 from a 🥪⌛⏳ CodeSandbox. 🏁🙊🐱‍👤

Never 🙅🏻‍♂️ once spun up a single character of code on our local machine. 💻
We 🚫 Didnt ❌ clog up 🚯 anything with another 2 million bytes of node_modules.
It all happened on some far away planet 🌍 in a virtual machine 🤖 on a beautiful little technology called CodeSandBox.

Thankyou Codesandbox. 👨🏻‍💻 🙏🏻🙏🏻🙏🏻 👩🏻‍💻

Take a Bow!

My Why - My Original Problem - My Bounty

James 'Tucker' Wray — Mon, 15 Jun 2020 20:45:37 +0000

My Why, My Original Problem, My Bounty

My Why

I'm learning code to free myself of progress blockers like time, location, and monetary constraints. I want to be free to travel the world promoting renewable energy and a renewed vision of earthly stewardship. I want to share with impoverished peoples of the world that they too can have options and can make a difference in their local world and in the larger world as well. I fully believe that if freed from the shackles of purely surviving and offered the liberties and leisure of choice a person will make educated and hugely helpful decisions to lift up themselves and their communities.

I plan to take modern technology to the places that could use it most. The idea is to help people trade in the pick axes of the cobalt mines for a laptops and AI controlled machines. I believe that like me, many of the people in the world want to make better choices when it comes to recycling, emissions, carbon footprints, sustainable living, eating cleaner to just brush the surface. But, we are confounded by our circumstance of simply surviving. We don't yet own the liberties or leisure of choice in many, if any, of these areas.

My Original Problem

In September of 2018, I pursued a problem's solution; The over-the-air signal to my mothers homestead was too weak to be picked up by the government provided boxes; even with boosters and amplifiers it struggled to display 2 channels without a blizzard of interference atop the broadcasts. I found that all hope was not yet lost as she did have a monthly subscription to high-speed internet. There was an application that you could use to stream the same free networks through a WI-FI connection on your cell phone and cast right onto your television screen. We bought the dongle for the television and setup the app on her phone. In no time she was in business!

🌤 All was well! 🌤

-------🌩🚨⚡ Until it wasn't. ⚡🚨🌩

A month later the app's author lost interest and it went down. It stopped working. I quickly found another version by another author and patched up the pipeline restoring the service. History has a way of repeating itself; and here, Father time was no different. At a loss for our inability to find a permanent solution, I decided it was time I became the author of the application, because surely, I wouldn't become disinterested and let my sole subscriber (Mom 💛) down.

Two years & 9 short months later --I have my final review tomorrow for my team project in the Labs Unit of Lambda School. Next, I undertake 2 months of Computer science algorithms and the original language I picked up for mom's streaming app, Python. Then its off to the races and taking on the career of my dreams.

My Bounty

I pursued a problem's solution;

that which I perceived to be on the other side of the 'learn to code wall'
without understanding the great beauty that IS the wall.
That wall represents the journey and the growth it yields to those gritty enough to stay the course.

I found much more than the answer to that problem.

I found software as a way to solve any problem.
I found code to be a unifying entity.
In my experience it brings people together and heightens their abilities.
They leave smarter and happier for the social interaction if not solely the personal growth.

I found more problems and many more solutions.
I found a new way of thinking,of living.
I found a community of like minded growth oriented humans.
I found some perceived trolls, who inside were actually scared, cornered or injured and also just more humans.
I found compassion by the ton.
I found acceptance and inclusion.
I found both physically and psychologically safe learning environments.
I found excellence of many magnitudes.
I found beauty.
I found strong willed humans.
I found in surmountable odds.
I found sobriety! 3 years and 4 months today. My drug of choice is knowledge!
I found peace of mind.
I found purpose.
I found a desire to help others and to grow every day.
I found satisfaction.
I found a leveling ground where anybody can be somebody.
I found opensource that meant sometimes the good stuff Was free.
I found team work and collaboration in ways I never thought to dream up.