How to enable JIT(Just in time mode) with create react app? - javascript

I tried setting up the JIT in create-react-app by myself but it doesn't seem to be working as in the styles are not getting updated. I am using craco to build the app with tailwind css and also added TAILWIND mode=WATCH as they suggested to make it work with most builds . Here are my configs:
tailwind.config.js
module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
primary: "#ffa500",
secondary: {
100: "#E2E2D5",
200: "#888883",
},
},
},
},
variants: {
extend: {
opacity: ["disabled"],
},
},
plugins: [],};
package.json scripts
"scripts": {
"start": " craco start",
"build": "TAILWIND_MODE=watch craco build",
"test": "craco test",
"server": "nodemon ./server/server.js",
"eject": "react-scripts eject"
},
package.json devDependencies
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.4"
},
I'll be glad if I could get any way to fix this .

If you are on Windows (as I suspect you might be from your comment on #Ako's answer), then your setup is correct but you just need to install cross-env, then adjust your start script like so:
"start": "cross-env TAILWIND_MODE=watch craco start"

you must use TAILWIND_MODE=watch in your start script not build, and after you have developed what you want build it just with craco build script. so your package.json scripts must look like this:
"scripts": {
"start": "TAILWIND_MODE=watch craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
},
also in purge prop inside the tailwind.config.css file you must add './src/components/*.{js,jsx}' so purge should look like this:
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],
and after you built your app you must serve the index.html file inside build folder.
clone this repo and after building the project use npm run servebuild and see if it works.
https://github.com/ako-v/cra-tailwindcss-jit-craco

So you have to watch your JSX, JS, HTML files using the ```--watch``` option provided in tailwindcss CLI,
So what you can do is open up a new terminal in the root of the react project and follow the command below
npx tailwindcss -o ./src/App.css --watch
[-i] you can provide a input file also using this option.
[-o] modify the output as per your folder structure.
This will make sure to rebuild the CSS file,
Next step is to open up another terminal and do npm start and your development server is ready with JIT compiler.
(side note)
Also, I use tailwind with my default configuration of the package.json and it also works smoothly without craco (both JIT / default) and in production.

Related

Unable to deploy my react SPA on Github Pages & AWS Amplify with the same package.json

I have this Tic-Tac-Toe game. It is already deployed to AWS Amplify. I also wanted it to deploy on Github Pages, so I added the required scripts & homepage property in package.json. But after deploying it on Github Pages, I am started getting blank screen on my AWS Amplify deployment.
After looking deeper into the issue, I found that the homepage property value is causing the problem. If I remove it or set empty in package.json, my AWS Amplify deployment starts working but Github Pages stops working at the same time & vice-versa.
Here is my how my packae.json looks like:
{
"name": "app-client",
"version": "0.1.0",
"private": true,
"homepage": "https://classhacker.github.io/tic-tac-toe/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test"
},
...
}
What should I do now? If anybody faced the same problem earlier, please let me know the steps to solve this.

How to add TS files to launch vue3 application in prod

Current folder structure:
/appname/server.js
/appname/package.json
Current package.json
"scripts":
{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "node server.js",
},
I'd like to write serve.js using TS. I know how to do in a typical TS project, but i'm not able to do so when webpacks are involved. If I update tsconfig to include serve.ts the js file doesn't end up in the dist folder.
Wanted folder structure:
/appname/server.ts
/appname/package.json
Wanted package.json
"scripts":
{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "node dist/server.js",
},
To make this even more complicated, the dist folder is needed to drive the application, so I rather not mess with it, putting server.js in a different folder is probably a better approach.
You could use ts-node to run server.ts directly:
Install ts-node as a devDependency:
npm i -D ts-node
Update your NPM script to use ts-node instead of node:
{
"scripts": {
"start": "ts-node server.ts"
}
}
Or you can avoid a devDependency with npx ts-node:
{
"scripts": {
"start": "npx ts-node server.ts"
}
}

How to update webpack config for a react project created using create-react-app?

I have created a react project using create-react-app. Now I need to update the webpack config, but I don't find the file anywhere.
Do I need to create this file myself or what is the process?
I am new to react and not really sure how to proceed from here.
No need to run npm run eject
Step 1
npm install react-app-rewired --save-dev
Step 2
Add config-overrides.js to the project root directory.(NOT ./src)
// config-overrides.js
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
return config
}
Step 3
'Flip' the existing calls to react-scripts in npm scripts for start, build and test
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
Step 4
Restart your app. Done
Option 1 - Eject your CRA
If you've just created your app using CRA, and haven't made big changes to it, you could use npm run eject - more about it here
Keep in mind that there is no going back (except by commits, of course) after doing this. This will basically provide you with webpack file and other files which are currently 'hidden' in CRA
Some critiques and second thoughts about this method here
Option 2 - React App Rewired
This might be the right choice for you. This allows you to extend your current webpack without ejecting, or messing up / making too many changes at your project as npm run eject will. Take a look at the package here
A great tutorial by Egghead.io using react-app-rewired here
I solved this problem by running a script between yarn install and yarn build. After yarn install the webpack.config.json file is generated, then immediately run a script on Node that modifies it, and then run the build.
My code:
custom.webpack.config.js
const fs = require('fs')
// WebPack.config File
const fileConfig = 'node_modules/react-scripts/config/webpack.config.js'
new Promise((resolve) => {
fs.readFile(fileConfig, 'utf8', function (err, data) {
if (err) {
return console.log(err)
}
resolve(data)
})
}).then((file) => {
let CodeAsString = "Code as String to save"
let regexCode = /YourCodeRegex}/g
let result = file.replace(regexCode, CodeAsString)
fs.writeFile(fileConfig, result, function (err) {
if (err) return console.log(err)
console.log('The webpack.config file was modifed!')
})
})
So, now do you need to edit the package.json to include this code in the process:
"scripts": {
"prestart": "node custom.webpack.config.js",
"prebuild": "node custom.webpack.config.js",
"start": "react-scripts start",
"build": "react-scripts build"
}
Done! :)
https://www.npmjs.com/package/react-app-rewired
Complete answer is :
How to rewire your create-react-app project
Create your app using create-react-app and then rewire it.
Install react-app-rewired
For create-react-app 2.x with Webpack 4:
npm install react-app-rewired --save-dev
For create-react-app 1.x or react-scripts-ts with Webpack 3:
npm install react-app-rewired#1.6.2 --save-dev
Create a config-overrides.js file in the root directory
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
like this:
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
for example :
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
config.module.rules = [...config.module.rules,
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
return config
}
'Flip' the existing calls to react-scripts in npm scripts for start, build and test
from:
/* package.json */
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
To:
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
Note: Do NOT flip the call for the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making react-app-rewired no longer required. There are no configuration options to rewire for the eject script.
Start the Dev Server
npm start
Build your app
npm run build
Webpack configuration is being handled by react-scripts. I assume that you don't want to eject and just want to look at the config, you will find them in /node_modules/react-scripts/config
webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`
You can modify your webpack config or any other node_module using patch-package https://www.npmjs.com/package/patch-package
Install the version of react-scripts you want with npm i react-scripts#5.0.0
Then go into node_modules/react-scripts/webpack/webpack.config.js. Make the changes you need and then npx patch-package react-scripts
patch-package will generate a file in your project root like patches/react-scripts+5.0.0.patch
Add post-install script to package.json with
"scripts": {
"postinstall": "patch-package",
...
}
Now whenever you run npm i you will automatically get this patch included with the installed library.
The best way is:
Install react-app-rewired and customize-cra
Create a config-overrides.js file in your root folder. Here is an example Webpack override file gist: https://gist.github.com/Nagibaba/209c1bddcc39ff0686a820806cfa8ee3
Also, consider that you need to change react-scripts inside your package.json to react-app-rewired like:
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
You are ready to go

How can add all files in public directory to the build directory with parcel-bundler

I use parcel-bundler on a react app. But I realized I need to redirect all files index.html using HTTP files but when I add a .htaccess file to my public directory. It's not added to the dist folder after building the project.
How can I achieve this without adding files manually after building?
You can set up a custom copy script in your package.json that you can use in your build script or wherever you need :)
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && npm run copy",
"test": "react-scripts test",
"eject": "react-scripts eject",
"copy": "cp public/.htaccess dist"
},
Note: Windows users will need to use the copy command rather than cp

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......
After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.
You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Categories