Comments (17)
chrislais
commented on May 22, 2024
Please note: this project use the pnpm package manager. To install it, run:
npm install -g pnpm
Install dependencies:
pnpm i
Start the dev server:
pnpm dev
Storefront can be now accessed at http://localhost:3001/.
from storefront.
jiapei100
commented on May 22, 2024
Still buggy...
➜ myWebsite git:(master) ✗ pnpm i
WARN Unsupported engine: wanted: {"node":">=12 <15"} (current: {"node":"v16.15.0","pnpm":"6.11.0"})
WARN deprecated @types/[email protected]: This is a stub types definition. graphql provides its own type definitions, so you do not need this installed.
WARN deprecated @types/[email protected]: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
WARN deprecated @types/[email protected]: This is a stub types definition. dotenv provides its own type definitions, so you do not need this installed.
WARN deprecated @types/[email protected]: This is a stub types definition. react-svg provides its own type definitions, so you don't need this installed.
WARN deprecated @types/[email protected]: This is a stub types definition. nuka-carousel provides its own type definitions, so you do not need this installed.
WARN deprecated [email protected]: this package has been renamed to babel-plugin-formatjs
WARN deprecated @sentry/[email protected]: Please migrate to @sentry/tracing; see: https://www.npmjs.com/package/@sentry/apm
WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
WARN @storybook/addon-essentials > @storybook/addon-docs > @babel/plugin-transform-react-jsx: @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none was installed.
WARN @storybook/addon-essentials > @storybook/addon-docs: @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none was installed.
WARN @storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env: @babel/[email protected] requires a peer of @babel/core@^7.0.0 but none was installed.
WARN @storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env: @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.17.12 requires a peer of @babel/core@^7.0.0 but none was installed.
WARN 100 other warnings
Packages: +2696
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: ~/.pnpm-store/v3
Virtual store is at: node_modules/.pnpm
Progress: resolved 2607, reused 2607, downloaded 0, added 2696, done
node_modules/.pnpm/[email protected]/node_modules/core-js-pure: Running postinstall script, done in 166ms
node_modules/.pnpm/[email protected]/node_modules/cwebp-bin: Running postinstall script...
node_modules/.pnpm/[email protected]/node_modules/core-js: Running postinstall script, done in 164ms
node_modules/.pnpm/[email protected]/node_modules/core-js: Running postinstall script, done in 210ms
node_modules/.pnpm/[email protected]/node_modules/cwebp-bin: Running postinstall script, done in 524ms
node_modules/.pnpm/[email protected]/node_modules/mozjpeg: Running postinstall script...
node_modules/.pnpm/[email protected]/node_modules/cypress: Running postinstall script...
node_modules/.pnpm/[email protected]/node_modules/gifsicle: Running postinstall script, done in 302ms
node_modules/.pnpm/[email protected]/node_modules/mozjpeg: Running postinstall script, done in 311msy issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), ornode_modules/.pnpm/[email protected]/node_modules/cypress: Running postinstall script, done in 406ms
node_modules/.pnpm/[email protected]/node_modules/husky: Running install script, done in 128ms
node_modules/.pnpm/[email protected]/node_modules/husky: Running postinstall script, done in 99ms
node_modules/.pnpm/[email protected]/node_modules/node-sass: Running install script, done in 867ms
node_modules/.pnpm/[email protected]/node_modules/optipng-bin: Running postinstall script, done in 220ms
node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/styled-components: Running postinstall script, done in 130ms
node_modules/.pnpm/[email protected]/node_modules/pngquant-bin: Running postinstall script, done in 505ms
node_modules/.pnpm/[email protected]/node_modules/yarn: Running preinstall script, done in 66ms
node_modules/.pnpm/[email protected]/node_modules/node-sass: Running postinstall script, failed in 267ms
.../node_modules/node-sass postinstall$ node scripts/build.js
│ Building: /opt/node-v16.15.0-linux-x64/bin/node .../myWebsite/node_modules/.pnpm/[email protected]/
│ gyp info it worked if it ends with ok
│ gyp verb cli [
│ gyp verb cli '/opt/node-v16.15.0-linux-x64/bin/node',
│ gyp verb cli '.../myWebsite/node_modules/.pnpm/[email protected]/node_modules/node-gyp/bin/node-g
│ gyp verb cli 'rebuild',
│ gyp verb cli '--verbose',
│ gyp verb cli '--libsass_ext=',
│ gyp verb cli '--libsass_cflags=',
│ gyp verb cli '--libsass_ldflags=',
│ gyp verb cli '--libsass_library='
│ gyp verb cli ]
│ gyp info using [email protected]
│ gyp info using [email protected] | linux | x64
│ gyp verb command rebuild []
│ gyp verb command clean []
│ gyp verb clean removing "build" directory
│ gyp verb command configure []
│ gyp verb check python checking for Python executable "python2" in the PATH
│ gyp verb `which` failed Error: not found: python2
│ gyp verb `which` failed at getNotFoundError (.../myWebsite/node_modules/.pnpm/[email protected]/no
│ gyp verb `which` failed at F (.../myWebsite/node_modules/.pnpm/[email protected]/node_modules/whic
│ gyp verb `which` failed at E (.../myWebsite/node_modules/.pnpm/[email protected]/node_modules/whic
│ gyp verb `which` failed at .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/which/w
│ gyp verb `which` failed at .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/isexe/i
│ gyp verb `which` failed at .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/isexe/m
│ gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21)
│ gyp verb `which` failed python2 Error: not found: python2
│ gyp verb `which` failed at getNotFoundError (.../myWebsite/node_modules/.pnpm/[email protected]/no
│ gyp verb `which` failed at F (.../myWebsite/node_modules/.pnpm/[email protected]/node_modules/whic
│ gyp verb `which` failed at E (.../myWebsite/node_modules/.pnpm/[email protected]/node_modules/whic
│ gyp verb `which` failed at .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/which/w
│ gyp verb `which` failed at .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/isexe/i
│ gyp verb `which` failed at .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/isexe/m
│ gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) {
│ gyp verb `which` failed code: 'ENOENT'
│ gyp verb `which` failed }
│ gyp verb check python checking for Python executable "python" in the PATH
│ gyp verb `which` succeeded python /usr/bin/python
│ gyp ERR! configure error
│ gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
│ gyp ERR! stack File "<string>", line 1
│ gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
│ gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│ gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
│ gyp ERR! stack
│ gyp ERR! stack at ChildProcess.exithandler (node:child_process:398:12)
│ gyp ERR! stack at ChildProcess.emit (node:events:527:28)
│ gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
│ gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
│ gyp ERR! System Linux 5.15.0-33-generic
│ gyp ERR! command "/opt/node-v16.15.0-linux-x64/bin/node" ".../myWebsite/node_modules/.pnpm/node-
│ gyp ERR! cwd .../myWebsite/node_modules/.pnpm/[email protected]/node_modules/node-sass
│ gyp ERR! node -v v16.15.0
│ gyp ERR! node-gyp -v v3.8.0
│ gyp ERR! not ok
│ Build failed with error code: 1
└─ Failed in 268ms
ERROR Command failed with exit code 1.from storefront.
chrislais
commented on May 22, 2024
npm install -g [email protected]
from storefront.
wileyknight
commented on May 22, 2024
If you are running from windows there is a PowerShell command you need to use to install pnpm https://pnpm.io/installation follow the instructions from their website.
from storefront.
jiapei100
commented on May 22, 2024
@wileyknight
Well... I don't use Windows at all, at least 15 years...
from storefront.
wileyknight
commented on May 22, 2024
It looks like you are running npm/pnpm commands on the saleor core backend. [email protected]. To install the backend you'll need to run the python scripts. Follow the documentation for a windows install, it's roughly the same instructions for linux as it is on windows, if you want to manually install. (not recommended for beginners) https://docs.saleor.io/docs/3.x/developer/installation/windows Otherwise, follow the instructions to install with docker containers and the saleor platform. Until you are very comfortable with how this system works I would not tackle a manual install. Use docker compose https://docs.saleor.io/docs/3.x/developer/installation
The storefront is a javascript application in React/Next.js and uses pnpm as a package manager instead of the more common npm. Download this repository react-storefront. There is no python code in the storefront.
from storefront.
jiapei100
commented on May 22, 2024
Hi, @wileyknight
I actually followed https://github.com/saleor/saleor-storefront/blob/main/README.md . I really do NOT like to use a docker, that's why I didn't follow https://docs.saleor.io/docs/3.x/developer/installation .
So, is there a manual for non-docker installation??
from storefront.
wileyknight
commented on May 22, 2024
Follow the windows manual installation. It's exactly the same installation instructions on linux. I would however check the saleor-platform repository https://github.com/saleor/saleor-platform/blob/main/docker-compose.yml for the env variables you are going to want for saleor, saleor-dashboard and react-storefront.
To get the whole system running you are going to want to install saleor, saleor-dashboard and react-storefront.
For the first time running you are going to want to populate the database with dummy data.
You'll need to publish products to see them on the website. They will need to be in categories, have prices, and have available inventory stock this can be configured with variants. Spend some time getting to know the dashboard it looks very straightforward but it's more complex than it first appears.
To have the products show up on the react-storefront home page they will need to be added to the navbar. In the react-storefront example homepage the navbar menu is used as the collection of items to display on the homepage. In the dashboard you'll need to add categories to the "Configuration > Navigation > navbar". Add new items giving any name and then link them to the categories where the items you want displayed exist.
Alternatively, if you set your backend api to https://vercel.saleor.cloud/graphql/ this will let you see the dummy data. However, this will not reflect the data running locally. Your local backend api will be http://localhost:8000/graphql/
from storefront.
wileyknight
commented on May 22, 2024
Close this thread. It's not a python problem in the react-storefront.
from storefront.
jiapei100
commented on May 22, 2024
Hi, I actually created a storefront here: https://longervision.saleor.cloud/ . However,
-
from https://longervision.saleor.cloud/dashboard/site-settings, Company Information wouldn't let me update and it ALWAYS* complains that Country: This field is required. , even if I've already clearly selected Canada.
-
on Products page, https://longervision.saleor.cloud/dashboard/products/?asc=true&sort=name, Create Product wouldn't let me Save. The Save buton is ALWAYS grayed out.
That's why I started building everything from my own environment...
So, for now, I've got to install ALL:
- saleor
- saleor-dashboard
- react-storefront
? Right?
from storefront.
wileyknight
commented on May 22, 2024
That's correct.
from storefront.
jiapei100
commented on May 22, 2024
Still some questions:
- In
saleor/tox.ini, python3.9 is there by default . But my python is of version 3.10. Wondering if python version can be configured automatically? Instead of by specifying a FIXED version? - Is there a way to build ALL without docker ???
Thank you very much...
Oh, BTW, I finished building everything from scratch by using docker under Ubuntu22.04, with Python 3.10.4. And it looks everything is working properly...
Saleor Core (API) - http://localhost:8000/
Saleor React Storefront - http://localhost:3001/
Saleor Dashboard - http://localhost:9000/
Jaeger UI (APM) - http://localhost:16686/
Mailhog (Test email interface) - http://localhost:8025/How to deploy everything to my own hosting?
Anyway... let me try ...
from storefront.
wileyknight
commented on May 22, 2024
I am running python v 3.8.10 with no problems...
Running everything in a docker container is the recommended production way to deploy.
You can configure everything yourself using a proxy service and pointing to the running ports. Reference the docker-compose.yml file in the saleor platform to see the scripts used.
You don't need Jaeger or Mailhog to deploy. Everything else is standard to run and deploy.
If you are still having problems this might not be the best solution for you. This suite puts the developer first. It's very powerful but requires a fairly skilled developer to polish it off and deploy. You'll need to have a decent understanding node, next and react.
from storefront.
jiapei100
commented on May 22, 2024
But, how to register my Email to from local storefront ? http://localhost:3001/default-channel/en-US , as well as dashboard ? http://localhost:9000/
from storefront.
wileyknight
commented on May 22, 2024
There is a registration page on the storefront. You will probably have to change the button type from button to submit. I'm not sure if that was fixed yet.
You then need to set the user as active in the dashboard.
The storefront is a template. You need to put in a lot of work to finish it off. It's not a full turn-key solution. That's the beauty of using this store.
from storefront.
jiapei100
commented on May 22, 2024
- Where is the place I can replace
www.example.comtowww.mywebsite.comfor ALL occurences? - How to deploy the built storefront to
www.mywebsite.comhosting?
from storefront.
wileyknight
commented on May 22, 2024
You need to do your research. Learn how to host a node.js site. Your hosting company should be able to help. If you're self hosting than start learning nginx.
You shouldn't be trying to host this kind of solution if you don't know the basics. I've given you all the information you need. It's time to spend some time and get to understand the technology you want to use to become effective. It'll take months for a beginner to fully understand how this thing works. Read thru everything I've already told you and learn the tech.
from storefront.
Related Issues (20)
- Move billing and summary above "payment" button
- Fix spacing in checkout page
- Parametrize GraphQL queries to allow passing channel
- Pass current channel in URL HOT 2
- Order List: Finalise payments for non-paid orders
- Add Dockerfile HOT 1
- Migrate Auth to App Router in Storefront HOT 1
- Check metabase Slack notifiacations and define one for storefront
- Bug: `update types workflow` is missing `schema.graphql`
- Rename current channels to `us` and `eu`
- Can't build the container image during `pnpm build` HOT 8
- Cookie cause bug HOT 1
- The product is still Out Of Stock in a storefront, even if there is 1 item in each warehouse
- Add env variable for default channel HOT 2
- Account login not working HOT 2
- Docker Build Error ARG or ENV missing during build process NEXT_PUBLIC_SALEOR_API_URL HOT 3
- image src not correct
- how to set NEXT_PUBLIC_SALEOR_API_URL HOT 1
- Checkout with logged user from /login page not detected on checkout flow
- can not integrate Web3modal into saleor/storefront adding config file and context file from web3modal make the loading of checkout page fail
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storefront.