I see alot of projects using the following structure.
src
├── App
│ ├── Header
│ │ ├── Logo.js
│ │ ├── Title.js
│ │ ├── Subtitle.js
│ │ └── index.js
│ └── Footer
│ ├── List.js
│ ├── ListItem.js
│ ├── Wrapper.js
│ └── index.js
What is the use or benefit of those index.js files inside every Folder?
generally in this context the index file will be used to export stuff from all the other files
like this:
export * from './Logo'
export * from './Title'
export * from './Subtitle'
that way you can import { Logo, Title, SubTitle } from '/App/Header
instead of having to individually import them all from their separate file paths or include the extension on the end like so: import { Logo } from '/App/Header/Logo.js
Related
I am using Stripe OSS documentation tool markdoc with nextjs framework.
As explained in its docs, if we want to have documentation in the root page, we can call and set configs in _app.tsx like so
// pages/_app.js
import Layout from '../components/Layout';
export default function App({ Component, pageProps }) {
return (
<Layout frontmatter={pageProps.markdoc.frontmatter}>
<Component {...pageProps} />
</Layout>
);
}
And in this case, the structure is like below.
.
├── markdoc
│ ├── functions.js
│ ├── nodes
│ │ ├── ...
│ │ ├── link.markdoc.js
│ │ └── index.js
│ └── tags
│ ├── ...
│ └── index.js
├── pages
├── docs
│ ├── _app.tsx
│ └── index.md
└── next.config.js
But I want to have normal page in my _app.tsx (i.e. root page) then load and show markdoc contents under the docs path. (eg. localhost:3000/docs)
Hers is my case.
.
├── markdoc
│ ├── functions.js
│ ├── nodes
│ │ ├── ...
│ │ ├── link.markdoc.js
│ │ └── index.js
│ └── tags
│ ├── ...
│ └── index.js
├── pages
├── docs
├── index.md <- where my first docs content is stored
├── index.tsx <- where I want to call initial markdoc object to load frontmatter
│ ├── _app.tsx
│ └── index.tsx <- where my root page is stored with normal Next/React
└── next.config.js
In this case, how can I call markdoc object under the docs path as it is done in _app.tsx? Also, where should index.md be placed in this case? If I place the index.md in the root, there will be two entry root index.tsx and index.md...
I have a folder structure for NextJs
pages
├── blog
│ ├── index.jsx
│ ├── other.jsx
│ └── [slug].jsx
└── index.js
On npx next build && npx next export I get
├── 404.html
├── blog
│ ├── a1.html
│ ├── b2.html
│ ├── c3.html
│ └── other.html
├── blog.html
└── index.html
I want it to respect my content structure and generate the following tree instead
├── 404.html
├── blog
│ ├── index.html
│ ├── a1.html
│ ├── b2.html
│ ├── c3.html
│ └── other.html
└── index.html
Notice how pages/blog/index.jsx got exported as ./blog.html instead of expected ./blog/index.html
How do I prevent the default and generate in the expected format?
P.S: The entirety of the site is static and generated with help of getStaticProps and getStaticPaths
this post is quite old but I just faced this issue today, in your next.config.js make sure to add trailingSlash: true, like:
module.exports = { trailingSlash: true}
that should fix it
i did it and it works for me:
const fs = require('fs');
const fsExtra = require('fs-extra');
async function clMagicFormat(){
try{
const outFilesList = await fs.promises.readdir(`${__dirname}/out`);
outFilesList.forEach(async i => {
if(i != 'index.html' && i != '_next' && i != 'assets' && i != 'favicon.svg'){
await fs.promises.mkdir(`${__dirname}/out/${i.split('.html').join('')}`, { recursive: true });
await fs.promises.rename(`${__dirname}/out/${i}`, `${__dirname}/out/${i.split('.html').join('')}/index.html`);
await fs.promises.copyFile(`${__dirname}/out/favicon.svg`, `${__dirname}/out/${i.split('.html').join('')}/favicon.svg`);
await fsExtra.copy(`${__dirname}/out/assets`, `${__dirname}/out/${i.split('.html').join('')}/assets`);
}
})
}catch(err){
throw new Error(err);
}
}
clMagicFormat();
Then in my Next.js script i set this:
"deploy": "npm run build && npm run export && node cl.magic.script.js
I'm working on a project for a company with several brands, each with their own website, and my goal is to be able to have a single React app that, when deployed, will theme itself according to the env vars of that brand's server.
My current structure for the project is:
my-CRA-project/
|
├── public/
│ ├── brand1/ /* static stuff for each theme */
│ │ ├── logo.png
│ │ ├── staticData.json
│ │ └── etc...
│ ├── brand2/
| └── etc...
|
├── src/
│ ├── themes/ /* sass vars for each theme */
│ │ ├── brand1/
│ | │ └── _vars.scss
│ │ ├── brand2/
│ | │ └── _vars.scss
| │ └── etc...
| |
│ └── ...rest of src code
└── ...rest of project
And I'm setting
NODE_PATH=./node_modules;./public/brandN
SASS_PATH=./node_modules;./src/themes/brandN
for each brand to incorporate their specific files when building on deploy.
The issue is that the latest version of React deprecated the NODE_PATH variable and it now says to use a jsconfig.json file instead, which defeats the purpose I'm using the NODE_PATH var to begin with.
Is there any way to duplicate this behavior using the jsconfig.json file? Or even beyond that, is there a better way I could be structuring this entire project to achieve the same goal?
Below is an example jsconfig.json file for a JavaScript project. You can create the file if it doesn't already exist:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
you can use webpack and it's alias
for example in next js , it would go in component folder and then based on env go to sub folder
const path = require('path')
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
resolve: {
alias: {
test: path.resolve(__dirname,`components/${process.env.test}`),
}
}
})
return config
}
}
I have a React app. The folders looks like this:
├── src
│ ├── App.jsx
│ └── components
│ ├── charts
│ │ ├── Chart.jsx
│ └── editor
│ └── Editor.jsx
│
├── test
│ └── testComponents
│ ├── testCharts
│ │ └── testChart.js
│ └── testEditor
│ └── testEditor.js
│
├── package.json
└── webpack.config.js
Because the folders are deep, the import inside testChart.js looks like:
import Chart from './../../../src/components/charts/Chart.jsx'
// ...codes...
The ./../../../src/ ... is not very friendly I think. Is there any way to make it more clean like import charts/Charts.jsx?
Thanks for your time!
Based on the accepted answer, to be more clear:
// webpack.config.js
// ...
var path = require('path')
module.exports = {
// ...
resolve: {
alias: {
srcDir: path.resolve(__dirname, 'src/')
}
}
}
Then in testChart.js, you could directly import srcDir as following.
import Chart from 'srcDir/components/charts/Chart.jsx'
Give alias to Component files in webpack
https://webpack.js.org/configuration/resolve/
I want to structure my files. The ideal structure is below:
├── src
│ ├── Data
│ │ ├── AppData.js
│ │ └── AppsData.js
│ ├── Components
│ │ └── Main
│ │ └── Main.js
│ ├── Views
│ │ ├── AppList
│ │ ├── Footer.js
│ │ └── Header.js
│ │
...
But problem is that if I import Header.js from Main.js, import Header from '.../Views/Header' fails. When I import Header from /Components/Main.js with import Header from '../Views/Header' succeeds.
How to import .../ files?
You are confused by all the dots here...
./File.js means "File.js in current directory"
../File.js means "File.js one directory up"
../../File.js means "File.js two directories up"
To fix your problem, do following
// Components/Main/Main.js
import Header from "../../Views/Header"
You are using relative path., and when you do ../Views/Header.js you are trying find Header.js in Components folder, but you need move up to src folder, so just add additional .. to your path
import Header from '../../Views/Header'