I am using Github Actions to run CI and CD for my NextJS app (v9.4.4).
I currently have a jsconfig.json file as the following:
{
"compilerOptions": {
"baseUrl": "src"
}
}
This is great as I can do import Nav from "components/Nav" in lieu of import Nav from "src/components/Nav" and is working perfectly locally (with either next dev or next build).
However, when I try to build the NextJS app on Github Actions, it errors with:
./src/App/index.jsx
Module not found: Can't resolve 'contexts/firebase' in '/home/runner/work/MyFirebaseApp/MyFirebaseApp/src/App'
For context, a sample of my file structure is:
MyFirebaseApp
│ .github
│ next.config.js
│ jsconfig.json
│ ...more config files...
│
└───src
│ │
│ └───App
│ │ │ index.jsx
│ │
│ └───components
│ │ Nav.jsx
│ │
│ └───contexts
│ │ firebase.jsx
I have tried changing the baseUrl to home/runner/work/MyFirebaseApp/MyFirebaseApp/src without any luck.
Is there special webpack configuration or changes I need to make for this to build on Github Actions?
Related
I just started using Remix.run and I'm trying to add a ssl certificate to my site and it requires that I make this specific path available in my app that's similar to this
www.mypage.com/.well-known/pki-validation/blah.txt
Unfortunately, I find that when i create a route folder in Remix that starts with a dot, it returns a 404 response. Even when i try to escape it in the name like so [.]well-known
https://remix.run/docs/en/v1/guides/resource-routes#url-escaping
Example of what I've tried.
app/
├── routes/
│ ├── [.]well-known/
│ │ ├── pki-validation
│ │ ├────── blah[.]txt.tsx
│ └── about.tsx
│ └── index.tsx
└── root.tsx
Any ideas? Thanks.
I think you are supposed to wrap more between those brackets.
app/
├── routes/
│ ├── [.well-known]/
│ │ ├── pki-validation
│ │ ├────── [blah.txt].tsx
│ └── about.tsx
│ └── index.tsx
└── root.tsx
Think i got something working here: https://stackblitz.com/edit/node-wmuju8
Edit: seems like escaping the dot in the wellknown folder and file is enough, so not sure why it is not working for you.
im newbie in react and im having a hard time trying to organise my project structure. Right now im puting everything into my components folder but since its large website that im creating, it can become very confusing to navigate. What is the best practice to organise components? Lets say i have 2 subpages homepage and about us. In each of them i have 2 containers (sections) with 2 components each. So it would look smth like that:
Homepage - > Section A [component A, component B] | Section B [component C, component A]
AboutUs -> Section New [component X, component Y] | Section Old [component Z, component A]
How would u create your folders for something like that?
Im putting everything into components folder so its look like long list:
-Hompage
-AboutUs
-Sections A
-Component A
... and so on.
It can be frustrating when you are just starting out trying to find a good folder structure and having everyone tell you to just do what works best for you. You may not have enough experience to know what works best for you!
There are 2 main ways I have organized my projects and it has always depended on what my team has preferred.
The first way is not my personal favorite:
Option1: Single Folder for Component + Test, notice we keep the very simple layout components in their own grouped folder. Sometimes there can also be a 'shared' folder for widely used components.
src/
├─ components/
│ ├─ layout/
│ │ ├─ header.jsx
│ │ ├─ footer.jsx
│ │ ├─ page.jsx/
| | |
│ ├─ hero-dispay/
│ │ ├─ HeroDisplay.jsx
│ │ ├─ HeroDisplay.test.jsx
│ ├─ login-form/
│ │ ├─ LoginForm.jsx
│ │ ├─ LoginForm.test.jsx
│ ├─ home-page/
│ │ ├─ HomePage.jsx
│ ├─ landing-page/
│ │ ├─ LandingPage.jsx
├─ App.jsx
Option 2: Separation of Concerns Here, we organize our components by where in the app they go. This works best for highly paginated apps. If I notice that I use something between two 'page' components, then I graduate it to its own folder in the 'components' folder. Again, I have a shared folder for very simple reusued components. Don't be afraid to use sub-folders under the parent folders.
src/
├─ components/
│ ├─ layout/
│ │ ├─ header.jsx
│ │ ├─ footer.jsx
│ │ ├─ page.jsx/
│ ├─ home-page/
│ │ ├─ HeroDisplay.tsx
│ │ ├─ HeroDisplay.test.tsx
│ │ ├─ HomePage.tsx
│ ├─ landing-page/
│ │ ├─ LoginForm.tsx
│ │ ├─ LoginForm.test.tx
│ │ ├─ LandingPage.jsx
│ ├─ shared/
│ │ ├─ Avatar.tsx
│ │ ├─ NotificationBar.tsx
├─ App.jsx
I will attach a picture of a recent small project I did that was a web-app for filtering job applications. Of course there will be people that disagree with my methods (and If I were to restart the app I may organize things differently). The important part is to not spend too long thinking about it. Just pick a pattern, and stick with it for the project. You will learn what you do and don't like as you go and can re try when you start a fresh project!
Best of Luck!
There are multiple ways of organizing your code, you can for example divide it by sections as you already described, and have a shared folder where component A can be located as it is being used on multiple sections.
At the end of the day, the best folder structure is the one that you can understand, feel comfortable with, and can easily explain.
Personal advice, create a brief readme that explains your approach. That way when you work with somebody else, they will get a glance at where things are.
The question is - how to force Jest to follow symlinked shared folder file structure but not main shared folder?
I have the next files structure:
root
├── projects
│ ├── A
│ │ ├── node_modules
│ │ ├── shared (symlink ../../shared-main)
│ │ ├── components
│ │ ├── settings.ts
│ ├── B
│ │ ├── node_modules
│ │ ├── shared (symlink ../../shared-main)
│ │ ├── components
│ │ ├── settings.ts
├── shared-main
│ ├── utils.ts
│ ├── config.ts
In my projects, A and B, I use utils from the shared folder. Utils.ts uses config.ts where imports settings files by path './settings.ts', but inside the shared-main folder, it looks like "file doesn't exist" (it is ok). But Jest in a project's tests when it meets using a shared file test fails with the error: "../../shared-main/config.ts:9:35 - error TS2307: Cannot find module '../settings' or its corresponding type declarations."
How to get around this and force Jest to use config.ts from the symlink folder instead of the main one?
How about "testRegex": ["test/.*.[jt]s"], in your jest config so it doesn't try and find shared files, if you're using shared files across multiple projects then no single project should test those files, they should only test their own files.
However I'm not so sure that symlinks are your problem, when using typescript like this and trying to use files outside of your project rootDir it will not find the types for it or it will complain that it can't find the types for it if you've added it to tsconfig include/exclude. Right now I can only assume that you're using tsc --project with specific config files for each project.
// tsconfig.json
"include": ["projectA/**/*.ts"],
If you've done something like that then it won't find any types outside of projectA so anything in config.ts and utils.ts will not have any types or be able to find any modules, unless they're included in your tsconfig.
To show a simpler example if I have:
// tsconfig.json
...
includes: ["src/**/*.ts"]
...
Along with a directory structure like this:
- tsconfig.json
- example.ts
- src
Then anything in example.ts will not be able to find its types or module imports.
The way I get around this issue in my project is to use ts-jest along with specifying where to find tests, along with overriding the globals rootDir.
// .jestrc.json
"testRegex": ["test/.*.[jt]s"],
...
"globals": {
"ts-jest": {
"tsconfig": {
"rootDir": "."
}
}
}
I want to test a camel-component, written by a colleague and me. It runs on Karaf and the following camel bundles are deployed:
80 │ Active │ 50 │ 2.17.1 │ camel-blueprint
81 │ Active │ 50 │ 2.17.1 │ camel-catalog
82 │ Active │ 50 │ 2.17.1 │ camel-core
The component and a blueprint that uses the component is deployed, too. I think that I missed to install a camel feature, which provides the class DefaultComponent, so I think it's not necessary to review the code.
I get the following error:
java.lang.NoClassDefFoundError: org/apache/camel/impl/DefaultComponent
My mistake was that I did not set up the Maven project of the Camel component correctly. To avoid this you can start the development of a Camel component with an archetype.
So you could start like this:
mvn archetype:generate -DarchetypeGroupId=org.apache.camel.archetypes -DarchetypeArtifactId=camel-archetype-component -DarchetypeVersion=2.24.2
My react native app takes 2 full minutes to load and I'm wondering what's the hold up. When it gets to 97.4% it just freezes for about two full minutes before going to 100%. How can I find out the reason for this delay?
>npm start -- --reset-cache
> crew_rn#0.0.1 start /Users/######/crew_rn
> node node_modules/react-native/local-cli/cli.js start "--reset-cache"
Scanning folders for symlinks in /Users/######/crew_rn/node_modules (9ms)
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/#####/crew_rn
Metro Bundler ready.
Loading dependency graph, done.
warning: the transform cache was reset.
BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 97.4% (598/606)
I see no one has answered my question and there is interest so I'll just share what I did.
In the package.json file - there were several dependencies. I took out all the dependencies and slowly put them back in until I identified the dependency which was causing the slowdown - and then I changed its version. This is the approach I took.