I currently have a project structure as shown below:
Parent (Maven)
|-- SpringBoot (Maven + Kotlin)
|-- Shared module (Maven + Kotlin)
|-- React with KotlinJS (Preferably maven)
the last module is React with KotlinJS. As seen in the "new project" wizard of IntelliJ, it says it's only available with Gradle. Is there a possibility that I can also build the React KotlinJS app with Maven? Because I want to remain the current project structure in Maven for code sharing between modules.
Anyone has a clue? I tried adding Gradle build files to the other modules but that doesn't seem to work.
Related
Hello everyone I have a Yarn, Turborepo monorepo. I have 2 Next apps that share some UI components
src
|- apps/ the next js apps
|- packages/ui the UI library
I am unable to add SVGR as I don't have webpack, I use NextJS transpile to get the library into my project. What are my options to import SVGs it my code? I am currently failing during the build
My setup is the same as this
Most of my confusion comes from how the compilation and builds happen with monorepos
Next transpiles the library, but library itself fails during build as SVG files cannot be imported
Basically I am trying to do this
import Star from './star.svg'
In a shared library like this
Do I need to create a react app for this? I am suspecting that I need a more complex setup with proper build step, outputs and entry point for the types
Folder structure on vs code
I have the above file structure. I have used react js inside the laravel framework combined.
It's a brand new project just with react --auth scaffolding inside the laravel project.
I can deploy just the laravel project but don't know how to deploy the react-laravel combined web app. please help
You must build project on your local machine and then upload whole project structure on server. When you build it, it will generate css and especially js files which are key files for your react part. Upload all content and it will work fine.
I have been trying to come up with an elegant solution to share code between two projects that are closely related to each other.
I have a React web app which simply includes all of the client code and I have an Express app which serves the React web app, but it also acts as an API. Because I use Typescript for both projects, I want to reuse some types. To accomplish that, I created a shared project.
My current folder structures is as follows:
web-app
shared
server
Now I want to link the web-app and server projects with my shared project, but there are some restrictions:
This shared folder should not be uploaded to npm.
I have to be able to still deploy everything with Heroku (which rules out npm link I believe).
I would prefer not to eject my React project.
I am not sure whether my current structure of projects allows the functionality I need, so feel free to also suggest other folder structures.
You can use yarn workspaces for that kind of purpose,
There's a minimal working boilerplate I have created exactly for that kind of configuration:
https://github.com/rok-tel/ts-express-react
take a look at ./packages/shared folder which is consumed both by server (express) and client (react)
Consider use Nx - https://nx.dev/
This is an awesome framework to manage monorepos.
Use their React application boilerplate for the client side project
Use their express project boilerplate to create the API
Use their shared code package boilerplate to create shared code package
Docs for creating the shared code package:
https://nx.dev/l/r/tutorial/07-share-code
If you are using create-react-app to create the web-app then you can easily use NODE_PATH environment variable to do absolute imports without creating node modules.
Create a .env file at the root level (same level as package.json of web-app directory)
Set an environment variable, NODE_PATH to shared/ (NODE_PATH=shared/)
Now instead of doing something like
import { editUser } from ‘../../../shared/actions’;
you can use
import { editUser } from ‘shared/actions’;
Fixing ESLint
Install eslint-plugin-import to prevent eslint from throwing import errors. And update your .eslintrc file as
{
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "shared/"]
}
}
}
}
Fixing Flow
Add the following content to your .flowconfig file
[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=shared
I want to start a new app that will have both web and reactnative interfaces.
I decided to move all business -non enviroment dependent- code into a third package -aka sdk- that i can share between both react & react native .
So my project now has 4 modules
Web -- created with cra
Sdk -- mainly redux + redux saga + react containers + Hoc's
Mobile -react native
Server - nodejs express api.
All web, mobile and server will depend on Sdk module.
sdk module will depend on server module -mainly to impory mocks and data interfaces.
Is there any standard way to achieve such structure ?
Most probably i would love to
use yarn workspaces to hoist all node-modules into one folder to avoid reinstalling packages in every project
i will be working in all 4 projects at same time, so i need hotreload to be aware of this.
** challenges im facing **
Cra doesnot transpile code outside src folder so although web project does refresh qhen i make changes on sdk. It cannot understand es6 code.
Jest also doesnot understand es6 from node_modules
How can i avoid rebuilding step while working on both sdk and web modules simultaneous ?
Yarn workspace sounds like a good approach for the project structure you're thinking.
You can have a packages directory where you can add your projects:
/packages
- web
- sdk
- native
Now you can use babel to watch for code changes for each of your package using babel -w and yarn workspace will take care of linking them together.
If the babel watchers are running, any changes that you make to the sdk will be reflected to both web and native packages. You can also club all of these together using something like concurrently to fire up watchers using a single command.
I have co-authored an open-source library where we follow a similar structure which you may check here. The difference in this project is that our redux logic is in a separate repo.
In order for jest to work, you can add a test env into your .babelrc file which transpiles modules. So you can add two different environments like test which transpiles into commonjs modules and an es environment which keeps ES modules so your users can take advantage of tree-shaking. Example config
Hope this gives you a good starting point :)
You could try a Project structure like this:
| package.json
|- node_modules
|- Web
| package.json
|- SDK
| package.json
|- Mobile
| package.json
|- Server
| package.json
Then you could install everything within the root folder and set the NODE_PATH env variable :
export NODE_PATH='yourdir'/node_modules
I am trying to create module within an existing multi-module maven project. This module will require Grunt, Bower, NPM, Angular JS, bootstrap among others. The output of this project (after the build is done) are static resources (fonts, js-files, application-js, application-css).
There is a separate Web module within the project that hosts the Web-Application portion of the Application.
I need to accomplish the following
Ensure that Maven can kick of the build of Grunt/Bower based UI Module.
Ensure that this module can be plugged in as a dependency for the Web Module.
So far, I have been able to figure out how to include a UI module as a dependency for a Web Project (via WEB-INF/lib/ui.jar...servlet 3.0 spec related).
Question:
What should the structure of the project be like to ensure that I don't copy unnecessary files into the JAR (like package.json or node_modules folder)?
Is there a way Maven can do an incremental build on such a project?
I am finding it hard to reconcile the two different project structures due to my own shortcomings I guess.