Meta tags:
description=How to use react-app-rewired to sort a React app into a Java folder structure with package.json at the root, and sources in src/ main test /js;

Headings (most frequently used words):

react, app, things, java, telling, where, are, sorting, into, folder, structure, actual, vs, expected, creating, and, apps, splitting, the, with, rewired, reflection, moving, around, jest,

Text of the page (most frequently used words):
java (60), the (50), react (46), app (32), root (31), paths (31), src (30), project (25), and (22), folder (19), with (17), this (17), main (16), config (16), things (15), test (14), json (14), #rewired (13), into (13), package (12), node_modules (11), where (11), that (10), structure (10), you (9), but (9), are (9), code (9), for (8), all (8), there (8), telling (8), need (8), scripts (8), frontend (7), npm (7), create (7), new (7), move (7), overrides (6), jest (6), static (6), next (5), get (5), maven (5), target (5), default (5), reflection (5), calendar (5), use (5), file (5), everything (5), around (5), post (5), junit (5), build (4), about (4), project_folder (4), can (4), here (4), rootdir (4), check (4), function (4), apps (4), how (4), out (4), have (4), moving (4), sorting (4), community (4), license (3), then (3), contained (3), pom (3), xml (3), see (3), install (3), folders (3), lock (3), source (3), well (3), run (3), used (3), setuptests (3), env (3), which (3), spring (3), public (3), start (3), else (3), bit (3), documentation (3), eject (3), now (3), tests (3), splitting (3), creating (3), side (3), actual (3), expected (3), follow (3), share (3), blog (3), tools (3), libraries (3), pioneer (3), demos (3), streams (3), core (3), clean (3), privacy (2), rss (2), stackoverflow (2), github (2), twitch (2), youtube (2), discord (2), mastodon (2), bluesky (2), maybe (2), too (2), rewire (2), sort (2), files (2), same (2), above (2), options (2), module (2), exports (2), return (2), console (2), log (2), original (2), what (2), roll (2), boot (2), classes (2), commented (2), more (2), index (2), after (2), first (2), dev (2), without (2), good (2), delete (2), gitignore (2), sources (2), npx (2), one (2), was (2), seen (2), wouldn (2), believe (2), tutorials (2), had (2), site (2), active (2), various (2), platforms (2), watch (2), space (2), notified (2), when (2), publish (2), content (2), your (2), interested (2), shown (2), view (2), data (2), pretty (2), boring (2), heavily (2), customized (2), talks (2), libfx (2), record (2), args (2), var (2), turn (2), year (2), techniques (2), switch (2), serialization (2), records (2), valhalla (2), panama (2), loom (2), leyden (2), amber (2), performance (2), patterns (2), pattern (2), matching (2), optional (2), ramp (2), migration (2), meta (2), lambda (2), javafx (2), basics (2), j_ms (2), generics (2), dop (2), deprecation (2), libs (2), collections (2), architecture (2), tags (2), works (2), javascript (2), contact, imprint, little, self, runtime, image, jlink, who, knows, write, result, diff, set, particularly, take, fixes, approach, stripped, unrelated, roots, setupfilesafterenv, modulepaths, home, nipa, also, needs, know, right, configure, work, like, charm, latter, places, perfect, pick, fat, jar, visible, case, anything, breaks, changed, their, value, these, absolute, make, readable, copied, output, quickly, logged, instance, given, arrive, apppath, appbuild, apppublic, apphtml, appindexjs, appsrc, testssetup, come, below, owntypedeclarations, lib, apptypedeclarations, ownnodemodules, ownpath, publicurlorpath, swsrc, service, worker, appnodemodules, proxysetup, setupproxy, yarnlockfile, yarn, appjsconfig, jsconfig, apptsconfig, tsconfig, apppackagejson, html, sparse, exactly, just, didn, trial, error, ended, actually, under, replace, each, mention, except, save, sounds, great, ahead, benefits, limitations, add, plugins, loaders, whatever, far, tell, find, took, eventually, found, says, indicated, position, makes, should, from, read, readme, append, existing, not, sure, whether, name, desired, requires, three, steps, time, shuffle, leaves, following, classic, may, already, hand, created, mine, either, way, step, initializr, wanted, another, appeared, dice, put, additional, top, level, both, projects, dumped, unceremoniously, half, baked, efforts, apply, putting, other, stuff, doesn, belong, attack, ships, fire, off, shoulder, orion, recently, started, decided, positive, experience, gatsby, very, being, looked, several, they, shortcoming, resulting, unstructured, much, ask, production, almost, belongs, toc, table, contents, lic, artist, want, its, 2021, slides, upcoming, past, schedule, recordings, virtual, threads, vector, structured, concurrency, lilliput, galahad, babylon, openjdk, conversation, book, club, videos, jms, newsletter, posts, testing, rant, jigsaw, jdeps, impulse, methods, lang, review, comments, words, even, better, enabled, nipafx,

Text of the page (random words):
sorting a react app into java s folder structure nipafx this site works well without javascript but it works even better with javascript enabled bluesky mastodon discord youtube twitch github stackoverflow rss words tags architecture clean code clean comments code review collections community core lang core libs default methods deprecation documentation dop generics impulse j_ms java 10 java 11 java 12 java 13 java 16 java 17 java 18 java 20 java 23 java 24 java 25 java 26 java 27 java 8 java 9 java basics java next javafx jdeps js junit 5 junit pioneer lambda libfx libraries maven meta migration on ramp optional pattern matching patterns performance project amber project jigsaw project leyden project loom project panama project valhalla rant record args records reflection serialization streams switch techniques testing tools turn of the year var blog posts newsletter the jms videos tags ai architecture book club clean code collections community conversation core libs deprecation documentation dop generics j_ms java 10 java 11 java 12 java 16 java 17 java 18 java 19 java 21 java 22 java 23 java 24 java 25 java 26 java 27 java 28 java 8 java 9 java basics java next javafx junit 5 junit pioneer lambda libraries maven meta migration on ramp openjdk optional pattern matching patterns performance project amber project babylon project galahad project leyden project lilliput project loom project panama project valhalla records reflection serialization streams structured concurrency switch techniques tools turn of the year var vector virtual threads recordings streams schedule code demos demos demos junit pioneer record args libfx talks my talks past upcoming slides about about me license privacy 2021 01 19 sorting a react app into java s folder structure post js libraries maven tools have a java project and want to sort a react app into its folder structure with package json at the root and sources in src main test java js here s how to do that with react app rewired src source dev artist lic license sorting a react app into java s folder structure source code interested in the project shown in this blog post check out calendar a calendar view on static data pretty boring but heavily customized table of contents actual vs expected creating java and react apps splitting the react app with react app rewired moving things around telling react where things are telling jest where things are reflection share follow share this post with your community i m active on various platforms watch this space or follow me there to get notified when i publish new content src interested in the project shown in this blog post check out calendar a calendar view on static data pretty boring but heavily customized toc actual vs expected creating java and react apps splitting the react app with react app rewired moving things around telling react where things are telling jest where things are reflection s f share this post with your community i m active on various platforms watch this space or follow me there to get notified when i publish new content i ve recently started a new side project and decided to go with spring boot and after my positive experience with gatsby for this very site react being new to this i looked up several tutorials but they all had the same shortcoming the resulting folder structure was well unstructured is it too much to ask to have production code in src main java js tests in src test java js and package json and almost everything else in the root folder where it belongs actual vs expected the tutorials all had one folder for the java project another for the react project and then appeared to roll the dice for what to put where i ve seen things you wouldn t believe an additional top level folder that contained both projects side by side the frontend folder dumped unceremoniously into the java project half baked efforts to apply java s default structure by putting the react app into src main js which then contained package json node_modules tests and other stuff that doesn t belong there attack ships on fire off the shoulder of orion i ve seen things you wouldn t believe but all i wanted was this project_folder node_modules src main java js test java js target package json pom xml here s how to get there creating java and react apps first we need a java app with the classic src main java folder structure you may already have one at hand i created mine with spring initializr either way the next step is to create the react app i used npx for that cd project_folder npx create react app frontend this leaves us with the following folders project_folder frontend node_modules src package json src target pom xml now it s time to shuffle things around splitting the react app with react app rewired sorting the react app into the java structure requires three steps moving things around telling react where things are telling jest where things are moving things around to create the desired folder structure we need to move everything out of frontend src sources move to src main js src tests move to src test js src setuptests js move to src test js public move to src main static not sure whether static is a good name you do you node_modules move to root folder gitignore append to existing gitignore in the root folder package json and package lock json move to root folder readme read delete the java project s root folder is now the react app s root folder that should be all files from frontend so you can delete it as indicated by the position of package json this makes the java project s root folder the react app s root folder telling react where things are so far so good but now we need to tell react where to find everything it took me a bit but i eventually found react app rewired which says all the benefits of create react app without the limitations of no config you can add plugins loaders whatever you need sounds great install ahead npm install react app rewired save dev first we need to rewire the npm scripts so rewired is actually used in package json under scripts replace each mention of react scripts except for eject with react app rewired scripts start react app rewired start build react app rewired build test react app rewired test eject react scripts eject next we need to create a file config overrides js in the app s new root folder the rewired documentation is a bit sparse on how exactly to use it or maybe i just didn t get it but after a bit of trial and error i ended with this file file config overrides js module exports paths function paths env use this to check original paths console log paths root paths apppath paths appbuild root target classes public paths apppublic root src main static paths apphtml root src main static index html paths appindexjs root src main js index js paths apppackagejson root package json paths appsrc root src main js paths apptsconfig root tsconfig json paths appjsconfig root jsconfig json paths yarnlockfile root yarn lock paths testssetup root src test js setuptests js paths proxysetup root src main js setupproxy js paths appnodemodules root node_modules paths swsrc root src main js service worker js paths publicurlorpath paths ownpath root node_modules react scripts paths ownnodemodules root node_modules react scripts node_modules paths apptypedeclarations root src react app env d ts paths owntypedeclarations root node_modules react scripts lib react app d ts return paths more to come below to arrive there i logged the paths instance given to my function see commented code copied the output into the file so i can quickly see all the options changed paths of everything i need to their new value these need to be absolute so i use root to make it more readable commented out everything else to have it visible in case anything else breaks and there we go npm start and npm run build work like a charm the latter places the frontend code into target classes public which is perfect for maven to pick it up and roll it into spring boot s fat jar what about npm run test telling jest where things are by default react apps use jest and it also needs to know the right paths here s how to configure that in config overrides js file config overrides js module exports paths function paths env as above jest function config use this to check original config console log config config rootdir home nipa code calendar config roots rootdir src main js rootdir src test js config setupfilesafterenv rootdir src test js setuptests js config modulepaths return config i used the same approach as above but stripped all the config options that are unrelated to paths this fixes npm run test as well reflection so there we go take a default java app and a default react app sort react app folders into java folders particularly source files into src main test js package lock json and node_modules into root rewire react to new structure install react app rewired create config overrides js in the project root and set paths there and that s it you can see it all in this diff here s the result project_folder node_modules src main java js test java js target config overrides js package json pom xml next up for that little project is to get maven to build the frontend with npm and then create a self contained runtime image with jlink who knows maybe i ll write about that too bluesky mastodon discord youtube twitch github stackoverflow rss imprint privacy contact license