Skip to content

Absolute path guide #1712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Absolute path guide #1712

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c6b954
Update README.md
louisgv Mar 4, 2017
34baf59
Update README.md
louisgv Aug 20, 2017
bb3e44e
Merge branch 'master' into patch-1
louisgv Aug 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,35 @@ Learn more about ES6 modules:
* [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
* [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)

## Importing a Component using path relative to src (Absolute path)

Create a file called `.env` in the root of the project, then add the following:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.env is exists in .gitignore. So anyone that is collaborating will not have the file and need to do this in the project. I think this setting should not exists in .env. Can we tell them to install cross-env and do cross-env NODE_PATH=./src react-scripts start in .scripts in package.json instead?

@gaearon can we make the NODE_PATH configurable in package.json? 😄 So the user can just set it once and be done with it.

Copy link
Contributor

@Timer Timer Mar 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe there was an argument posted somewhere on these issues arguing to check .env into source control, as it doesn't contain any secrets (client side code shouldn't).

I don't believe we're going to add new configuration for this, however.

Copy link
Contributor

@viankakrisna viankakrisna Mar 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, but i believe that .env should contain the environment specific setting like CHOKIDAR_USE_POLLING which doesn't need to turned on in specific env. This env variable is making the codes in src directly dependent to have it setup.

So, this would cause confusion if the docs says it like this right now. For example, when the original author push it to a git repo and other team member tries to clone it, the repo is not working in other team member local machine because of the missing .env files. And we have "it's working on my local machine" problem all over again.

I think right now If we want to document NODE_PATH in the docs we need to use the cross-env in the scripts, or make it configurable.

The officially supported ways of making an absolute import is discussed here #1065 so I think that this pr would be better to document that instead.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe there was an argument posted somewhere on these issues arguing to check .env into source control, as it doesn't contain any secrets (client side code shouldn't).

Yes, we'll remove it from gitignore as part of #1344.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok then, I'm not aware of this. Just experienced an "it's working on my local machine" because of .env that's is missing. :)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But why not it doesn't work when I use 'npm start ' to run my project ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I recall that Rails' dotenv (which takes care of loading this .env file in a rails app environment) was able to recognize several .env files, like .env, .env.local, .env.development, .env.production, etc. I think this would fix this issue. The settings to be checked into source control live in .env, where a comment can specify that any other settings needed only by a specific developer in their local environment should be set in the .env.local file instead.


```
NODE_PATH=src
```

This will allows any component to be imported using its path relative to `src`, for example:

```js
import Button from './components/Button';
```

is now:


```js
import Button from 'components/Button';
```

This allows uniform import path accross different component, and eliminate the following "hypothetical" situation:

```js
import Utils from '../../../Utils';
```



## Adding a Stylesheet

This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
Expand Down