I am new to tailwind I have a simple react shopping cart project with basic CSS and I want to convert it with Tailwind.
I have install tailwind using the tutorial below.
https://www.youtube.com/watch?v=v6Sy6VP2yOc
But I am stuck when in tutorial he use npm run build:css command.
Video Time lap -- https://youtu.be/v6Sy6VP2yOc?t=286
In tutorial it compile successfully but on my side it did not.
Can anybody tell me why?
Can you please check the below code? Hope it will work for you. You can try this way, it might be helpful for you.
"scripts": {
"start": "react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/your-path -o src/your-path",
}
After that, you need to restart your project using the below command so that this will build your tailwind file automatically.
npm start
Related
For some reason I can't get my React app to consistently deploy to GitHub. Occasionally my custom domain will be removed from the repository's page settings and I'll have to add it again. Other times my readme page will be deployed instead of the React app. Other times nothing happens at all.
When I try and deploy, the settings in my GitHub dashboard are set to use the gh-pages branch, and I try and deploy the changes with npm run deploy. These are my scripts, could someone tell me if I'm doing something wrong? I feel like it should be quite simple.
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
i cloned a project from github .
when i try to run yarn it successfully install the required packages .
but when i try to run yarn start i get error . please check below screenshot .
i searched alot and i get to know that package.json dont have a start object so i copy paste many ones from internet after looking for solutions but none of them is working .
i will be thankful if u help me to fix my bug .
normally when create new project, at "package.json" there is lines like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
try to add manually
"start": "react-scripts start",
I'm developing project in ASP.NET Core and React. In testing, I came across one big security issue. Source files of react get expose in google developer tools. I have tried to remove webpack source maps but that thing didn't work for me and the reason is they have not mentioned in which webpack folder do we need to make change as there are 6 folder containing webpack. I'm new to this stack and not getting how to deal with this flaw. How can I fix this issue?
Its very easy and its possible to hide complete source code which gets expose to end user in developer tools. You need to update package.json file from ClientApp folder.
Before updation
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build", //UPDATE THIS LINE
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You need to use following code instead of above code:
After updation
"scripts": {
"start": "react-scripts start",
"build": "rimraf ./build && react-scripts build && rimraf ./build/**/*.map",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Above code worked for me. This thread helped me in achieving my goal. For more details you can check that as well.
I had the same issue. This is how I fixed it.
Create a file called .env in the src folder then add this code GENERATE_SOURCEMAP=false. Then run npm run build or yarn run build. This solved the issue for me
You can never hide your code on the browser. The best you can do is obfuscate your code. Here is a very useful video that explains your concern: https://www.youtube.com/watch?v=hOtZhNb4TKg
Also, use this as your reference: https://reactjs.org/docs/optimizing-performance.html#use-the-production-build
The crux of the above video is to keep your business logic and secrets on the server which is always secure.
if you are using craco to build your project, use this
"scripts": {
"start": "craco start",
"build": "rimraf ./build && craco build && rimraf ./build/**/*.map",
}
Hope this helps
I've got a node project with a create-react-app project in a folder called client.
It's setup on Heroku and deploys and works (functionaly) using git push heroku master but none of the styling is active and it's using the wrong fonts.
It all works on localhost.
In the project package.json I have
"heroku-postbuild": "cd client && npm install && npm run build"
and in client package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Cannot find anything wrong in Heroku setup or logs, or any documentation, at a bit of a loss where to start even looking
Included the css file in index.html
I have a master branch and gh-pages.
I was able to see it on gh-pages when a friend developer of mine walked me through it.
I tried to merge the gh-pages with master to add the styling I did and it messed up the viewable app page of github.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"precommit": "lint-staged",
"build": "node build.js",
"deploy": "npm run build && git-directory-deploy --directory _build/"
},
"homepage": "https://marianapt.github.io/reduxTable/",
"lint-staged": {
"*.{js,json,css,md}": ["prettier --write", "git add"]
}
thats my package.json
I do npm install to make sure its all updated..
ever since i merged the master and the gh-pages I cant see my application and im back to seeing the readme page. https://marianapt.github.io/reduxTable/ thats the link...
I don't understand realy whats happened with you but I think the problem is you lose your prod app.js of master branch when you do the merge.
Just try to run npm run build and push again to the github
Hope this will helps you.