salesforce / design-system-react

Salesforce Lightning Design System for React
https://design-system-react-site.herokuapp.com/
BSD 3-Clause "New" or "Revised" License
921 stars 418 forks source link

Please provide a neat, well illustrated and elaborated documentation to how to install and run the project locally. #1441

Closed hariprasad26091993 closed 6 years ago

hariprasad26091993 commented 6 years ago

Please provide a complete guide and step by step process, from cloning git repo to running the project, because running locally having lots of errors while following a cliche process of running a npm Example: ERROR in ./components/accordion/examples/base.jsx Module not found: Error: Can't resolve './components/accordion' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\accordion__examples' @ ./components/accordion/examples/base.jsx 12:40-73 @ ./components/accordion/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/accordion/examples/base.jsx Module not found: Error: Can't resolve './components/accordion/panel' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\accordion\examples' @ ./components/accordion/examples/base.jsx 14:36-75 @ ./components/accordion/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/info.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/info.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/error.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/error.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/close-alert.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/close-alert.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/custom-class-name.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/custom-class-name.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/warning.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/warning.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/offline.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/offline.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/dismissable.jsx Module not found: Error: Can't resolve './components/alert' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/dismissable.jsx 12:36-65 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/error.jsx Module not found: Error: Can't resolve './components/alert/container' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/error.jsx 14:40-79 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/info.jsx Module not found: Error: Can't resolve './components/alert/container' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/info.jsx 14:40-79 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/warning.jsx Module not found: Error: Can't resolve './components/alert/container' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/warning.jsx 14:40-79 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/offline.jsx Module not found: Error: Can't resolve './components/alert/container' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/offline.jsx 14:40-79 @ ./components/alert/docs/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/@storybook/react/node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js ERROR in ./components/alert/examples/close-alert.jsx Module not found: Error: Can't resolve './components/alert/container' in 'C:\lightningReact\design-system-react-master\design-system-react-master\components\alert\examples' @ ./components/alert/examples/close-alert.jsx 14:40-79 @ ./components/alert/docs__/storybook-stories.jsx @ ./components/storybook-stories.js @ ./.storybook/config.js

and many more, let me know if i could resolve this issue....

interactivellama commented 6 years ago

I haven't tested the local process on Windows recently. I'll put that on my personal backlog to test out, but I don't have a timeframe for that.

I'm seeing: C:\lightningReact\design-system-react-master\design-system-react-master\components\accordion_examples_

Why is the project a child folder of itself? design-system-react-master\design-system-react-master.

I also don't understand the path components\alert_examples_. That should be components/alert/__examples__.

It appears that it is being run in an environment that converts /_ to something else--and treats a front slash / as an escape character.

What kind of "Linux helpers" do you have installed in your shell in order to run bash commands?

I'll pull a fresh clone down today on my Mac and see if there are any issues on master. If you could explore possible issues of running the project locally on Windows until I can get to it myself, I would appreciate it. Thanks for bringing this to my attention! The community will definitely need to make sure that the project is compatible with Windows users, so that you all can contribute.

interactivellama commented 6 years ago

I did a fresh install this morning. Here is the gist from my terminal. http://localhost:9001/?selectedKind=SLDSAccordion&selectedStory=Base&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel does work on a fresh install from master branch for me.

If you are able to, please collect some resources (like blog posts) for setting up and running repositories like this on Windows that mention common issues and work arounds, and I'll put it in the backlog https://github.com/salesforce/design-system-react/milestone/20 somewhere. I'd love for you to contribute some fixes and make the codebase more robust, too. If you look at the commit log, it's just a few primary maintainers working on this project.

interactivellama commented 6 years ago

In the long term, I'd like set up an auto-deploy to an Azure Windows VM just to make sure things don't break in the future. It looks like for $12.41/month we could do this with Azure watching the master branch and auto deploying. Then, hopefully, I could get an email if the build fails.

@dougwilson Do you think an auto-deploy to a Windows VM would be the best check to make sure the repo is compatible with a Windows environment?

dougwilson commented 6 years ago

Depending on what the checks need to perform, it can probably just use AppVeyor CI, which is similar to Travis CI. This provides a Windows based CI environment for free for open source projects

hariprasad26091993 commented 6 years ago

@interactivellama Appreciate for your response on this issue. But am still stuck with the same problem. Plz, check this image https://ibb.co/bLoGwd in my windows terminal on npm start command. and the image showing the same errors in the storybook https://ibb.co/kLUWwd Hoping this may help you at point out, am i doing something wrong or any changes i need to make in the clone.

stale[bot] commented 6 years ago

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.

interactivellama commented 6 years ago

Reopening and prioritizing. This issue is limited to just getting Storybook running. Test suites + npm scripts should be managed with #1366.

We now have JSON imports in all our components which could be related to Doug's comments. https://github.com/salesforce/design-system-react/issues/1352#issuecomment-387438792

futuremint commented 6 years ago

This looks like its a bad version of babel-plugin-root-import that doesn't work on Windows. I'm able to fix this locally just by using the latest version of that plugin. I'll send a PR to fix this soon.

interactivellama commented 6 years ago

@hariprasad26091993 this should be fixed for npm start now. I haven't tested npm test yet though.

futuremint commented 6 years ago

npm test will not work until I also fix #1366 FYI.