How to set .next-folder in another folder? - javascript

I have my pages folder in /client folder and would like .next folder in root of project.
I have a project with the following structure:
Whereby I place pages folder under ./client/pages. Ideally, I would like to place .next folder in root of project.
Is it possible to do this?

You can use the next.config.js file to specify the output of the build.
I like to have my folder called _next to make routing easier.
module.exports = {
distDir: '_next',
};
So you could make your path traverse one level through the directory with:
module.exports = {
distDir: '../.next',
};
Although I would recommend you don't use the .next name and use the underscore instead, this will solve a lot of headaches in production.
module.exports = {
distDir: '../_next',
};
An even better solution would be to use a proxy like Nginx to handle the routing for you. So leave your _next folder in the client directory and set the root path to your client folder.

Related

Change/add create-react-app entry point or location of index.js

I am trying to use create-react-app to create a simple web-app. I have moved the pages and components into separate directories under src labeled pages and components. I would like to change/add the entry point for index.js from src/index.js to src/pages/index.js. Another option would be to keep index.js in src/ and import from pages and component directories. Can someone help me to find how i can change the entry point path?
I can't seem to find the location of the default html-webpack-plugin config file.
Here is what I would like the structure to be:
(in src)
...
pages/
- App.js
- Home.js
components/
- Filter.js
serviceWorker.js
I used react-rewired to achieve something like this:
https://github.com/timarney/react-app-rewired/issues/189
in my config-overrides.js
console.log("#######################");
console.log("# using react-rewired #");
console.log("#######################");
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function(config, env) {
// ...add your webpack config
console.log("###########");
console.log("# webpack #");
console.log("###########");
console.log({config, env});
if (env === 'development') {
config.entry = config.entry.replace(new RegExp("index.ts$"), 'runApp.tsx');
console.log("entry point changed:", config.entry);
}
return config;
},
}
I needed to run on a different file but only when running the development server
the link above has the full solution
Try using npm run eject.
this will take all script from node_module/react-script in the project folder. There you will be able to access webpack.config.js file in config folder. you can search for html-webpack-plugin and get the access point.
I have added my access point to config/paths.js and used as default access point which worked for me.
NOTE: make sure you don't have any different configuration setting as it gets very difficult to manage, if environment setup changes or doesn't match.

Rewriting sass url when building project

I'm using webpack-dev-server during development and have a public folder as content base containing: index.html, img/**.*.jpg.
During development in my sass file i reference images as:
background-image: url('img/background.jpg');
This works fine during development since webpack-dev-server is serving the images in the public folder.
But when I build the project and generate a dist folder that is later going to be deployed to a test server I need to rewrite all the urls in the sass files since they aren't going to be served from the root of the webserver. In my case I would like to rewrite the previous css rule as:
background-image: url('folder1/folder2/folder3/img/background.jpg');
Is this possible?
Not exactly. I would recommend you instead keep your paths relative to the folder you're currently in. For instance, have an assets folder that has both img, sass, etc. Then, your paths could be relative to the assets root as opposed to needing to traverse to a separate build folder. That way it won't matter if you're in build, dist or otherwise.
For example:
|assets
|-sass
|--my_styles.scss
|--SUBSTYLES
|---my_substyles.scss
|-img
|--my_img.png
and your paths would then be:
url(../img/my_img.png) //For my_styles.scss
and
url(../../img/my_img.png) //For my_substyles.scss
Otherwise, you'll need to keep a separate variable file per server/build type that defines a ROOT_PATH variable and appends it in your SASS. Something along the lines of
url($ROOT_PATH + 'img/my_img.png')
which could always be wrapped in a mixin to be used more easily.
I solved this with environment variables using sass-loader.
module.exports = {
...
sassLoader: {
data: "$env: " + process.env.NODE_ENV + ";"
}
};

Node.js - Error: Cannot find module 'config/chgpass'

I created the files following the tutorial (http://dataops.co/android-login-registration-system-with-node-js-and-mongodb/), but unfortunately the error is shown like in the image.
I'm new to node.js and to this kind of programming.
PS.: All of the other files that are referred in the tutorial are right, and the chgpass.js is in the target folder.
Code from the file that requests the chgpass.js file AND the tree from the folder (open with Word and select MS-DOS):
http://www.mediafire.com/download/w283nsjuuj9j794/File-Folder.txt
As your config folder is inside of node_modules folder, thus use:
var chgpass = require('config/chgpass');
Explanation:
In tutorial config folder is inside node_modules that way you can directly access it using require('config/chgpass')
But if you put outside of node_modules then you have to give the complete path of the folder from the location you are requiring it. That is in your case: require('../config/chgpass')

Submodules in Browserify

/foo
/bar.js
/foobar.js
/index.js
In node.js if you a require a directory (require('foo')), it would look into that directory and find an index.js file and return whatever exports I have in that file, so I can just bundle up the contents of the directory in an index.js file. Therefore, I dont have to require bar and foobar separately if index.js already includes them.
However this approach doesn't work with browserify. It seems like only thing browserify understands is relative paths.
/star
/star.js
/starfoo.js
/index.js
/foo
/bar.js
/foobar.js
/index.js
In other words I want to separate my project into submodules, call require on a directory as if I am calling require on a dependency. For example in the star.js file I want to be able to require('foo') and get the exports of bar.js and foobar.js (as long as /foo/index.js is importing bar.js and foobar.js)
edit:
Looking at the react source code, i think what i am describing is possible
https://github.com/facebook/react/blob/master/src/isomorphic/ReactIsomorphic.js
In this file they call require on React-Children in line 14.
var ReactChildren = require('ReactChildren');
However react children is couple directories deeper.
https://github.com/facebook/react/blob/master/src/isomorphic/children/ReactChildren.js
Where is this mapping defined?
There isn't a way to specify a base directory because that's not how node modules work. If you want non-relative paths, use the node_modules directory. If you want require('foo') to work from any directory, just make a symlink from your project root:
ln -s foo node_modules/foo

require a file outside of node_modules with grunt

I am trying to require a node module that is used in my app into my gruntfile.js but whatever I do i get : Cannot find module 'appjs/config
In the gruntfile I simply do : var myconfig = require('appjs/config');
But it just don't want to load, is there a way to import this files easily? I also tried various path but appjs is at the root where the gruntfile is.
Have you tried this?
var myconfig = require('./appjs/config');
Seems like this should work, if appjs is in the same directory as your gruntfile.

Categories