DEV Community

Create Your Own React Template

Jimmy McBride on December 15, 2019

Are you tired of deleting the same things and adding the same extra packages to create-react-app just to get up and running? Don't you just wish yo...

Read full post

Vlad Burlutskiy • Feb 14 '21 • Edited

I followed your steps but somehow I keep getting this message. Getting stuck there:

Error: ENOENT: no such file or directory, stat '/Users/vladislavburlutskiy/Documents/Lambda/my-app/gitignore'
    at Object.statSync (fs.js:1086:3)
    at Object.statSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/graceful-fs/polyfills.js:307:34)
    at statSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/util/stat.js:10:52)
    at getStatsSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/util/stat.js:24:19)
    at Object.checkPathsSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/util/stat.js:49:33)
    at Object.moveSync (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/fs-extra/lib/move-sync/move-sync.js:14:28)
    at module.exports (/Users/vladislavburlutskiy/Documents/Lambda/my-app/node_modules/react-scripts/scripts/init.js:273:8)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:133:18)
    at Object.runInThisContext (vm.js:310:38) {
  errno: -2,
  syscall: 'stat',
  code: 'ENOENT',
  path: '/Users/vladislavburlutskiy/Documents/Lambda/my-app/gitignore'
}

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.
npm ERR! code 1
npm ERR! path /Users/vladislavburlutskiy/Documents/Lambda
npm ERR! command failed
npm ERR! command sh -c create-react-app "my-app" "--template" "astra"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vladislavburlutskiy/.npm/_logs/2021-02-13T17_51_18_481Z-debug.log

Michelangelo Markus • Feb 15 '21

Error: ENOENT: no such file or directory, stat '/Users/vladislavburlutskiy/Documents/Lambda/my-app/gitignore'

This is your error. No such file as gitignore

.gitignore !== gitignore

Check the file name.

Vlad Burlutskiy • Feb 15 '21

I know, somehow cra is not adding the dot in front of gitignore

Jimmy McBride • Feb 15 '21

Can you push your code to GitHub so I can check it out? I've never encountered this error myself, so I don't have a quick solution. But if I can see you code maybe I'll have a better idea.

Vlad Burlutskiy • Feb 15 '21

I found the bug and fixed it already.

Jimmy McBride • Feb 15 '21

What was it?

Vlad Burlutskiy • Feb 15 '21

I initially had gitignore outside the template folder and npm published it as such. Then I fixed that and moved it inside the template folder, however I didn't npm publish an updated version.

Jimmy McBride • Feb 15 '21

Ah! That makes sense! Yeah, once you said the dot wasn't in front of it, that's what I figured. Forgetting to publish my changes has got me a time or two as well! Glad you got it figured out!

Vlad Burlutskiy • Feb 16 '21

I also created a separate repo for my cra template:
github.com/nezlobnaya/cra-template...

Vlad Burlutskiy • Feb 16 '21

and I added an alias (alias create-react-app-custom="npx create-react-app --template=file: path/to/folder) to my .zshrc file to quickly run it locally

Jimmy McBride • Feb 14 '21 • Edited

If you have a .gitignore delete the dot and do just gitignore maybe?

Jimmy McBride • Feb 14 '21

Looks like it can't find gitignore, do you have a dot in front of it?

Vlad Burlutskiy • Feb 14 '21

I don't, Jimmy. Obviously, there is something else

Jimmy McBride • Feb 15 '21

Check the path that your gitignore file is compared to where the error says it isn't. The error is obviously trying to tell you what's wrong.

Rich Winter • Jan 24 '20

I like your template's idea, but I think you are creating confusion by using/mixing both SASS and styled-components.

Personally, I would want all styling variables handled by styled-components. It is easy to
import { createGlobalStyle }... and define CSS globals there. Then apply them by wrapping the main <App> with a <ThemeProvider> component - See styled-components.com/docs/api#cre...

I don't see you using SASS color manipulation functions, so I'm wondering, other than those, why choose to use SASS at all?

Jimmy McBride • Jan 24 '20

At this point, just for color variables. But I'm really digging what you're putting down. I'm actually refactoring my style library to lean solely on styled-components and factoring out sass. 👍

Why it was in there at all was because the style library I had created was (and is) a baby. It helps you lay out a page really well, but it wasn't that pretty. So I included sass to pretty up everything after it was laid out.

Ahmad Ichsan Baihaqi • Mar 5 '20

Hello Jimmy, thank you for this great article. Help me so much for starting to create my custom CRA template. However, I have question. As mentioned in this article, you also provide devDependencies inside template.json. I also did the same. But, unfortunately, the devDependencies not installed when I run the CRA command. After several minutes trying to solve, I found out that devDependencies is blacklisted to be present inside the template.json. Here is the code I found in CRA github github.com/facebook/create-react-a.... Are you face the same problem?

Thank you in advance.