Clients don't work

[datasmithadvtech]

Bug report

Describe the bug

I used VS plug-in to create project - i tried both clients using Java server Client doesn't work React - 2nd page not correctly render, no option to select other client is stuck on register page

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. start app
2. click register - not correctly render on React. Other client is stuck on register page

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS
• Browser (if applies) chrome
• Server environmentJava

Additional context

Add any other context about the problem here.

[cjavilla-stripe]

Thanks for the report @datasmithadvtech. Do you see any errors in the javascript console? Which use-case were you testing (fixed-price-subscriptions, per-seat-subscriptions, usage-based-subscriptions)?

[davidfeldt]

I'm in the process of implementing a new SaaS product that uses fixed-price subscriptions and was happy to find this repo with sample code.

I installed repo locally using stripe cli. Followed the READMe for both client and server. I'm using node and react, respectively.

When I npm start the server, I'm getting the following error: Error: ENOENT: no such file or directory, stat 'subscription-use-cases/client/register.html' on http://localhost:4242

When I run the client, I'm getting the register screen, I enter the email and click that and I see the new customer created successfully in my Stripe console. The prices screen loads but its blank. (http://localhost:3000/prices)

I added a few console.logs to see why it wasn't working - no errors shown in devtools console for either front-end or api (3000 and 4242, respectively).

[cjavilla-stripe]

Hey @davidfeldt,

It's odd that route (/register.html) is being used with the react client. I expect the root to load the react app and only call out to the node server via AJAX. Will take a look. Thanks!

[davidfeldt]

Great - thanks.

On Mon, Nov 15, 2021, at 11:22 AM, CJ Avilla wrote:

Hey @davidfeldt https://github.com/davidfeldt,

It's odd that route (/register.html) is being used with the react client. I expect the root to load the react app and only call out to the node server via AJAX. Will take a look. Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/stripe-samples/subscription-use-cases/issues/136#issuecomment-969078272, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAESF4MOVNKAONZUK7UHQR3UMEXVLANCNFSM5HJ7WREQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[blin17]

Any updates to this problem? I'm getting the same error where prices does not load

[hideokamoto-stripe]

I tried to reproduce this error.

Step to reproduce

Instalation

$ stripe samples create subscription-use-cases

? What type of integration would you like to use: 
    usage-based-subscriptions
  ▸ fixed-price-subscriptions

? Which client would you like to use: 
    vanillajs
  ▸ react

? What server would you like to use: 
    java
  ▸ node
    php-slim
    python
↓   ruby

setup app

$ yarn
yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 10.44s.

$ cd server
$ yarn
yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "postcss@^8.1.0".
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 7.22s.

Try to run the app

$ yarn start
yarn run v1.22.19
$ node server.js
Node server listening on port http://localhost:4242!

When I visit to http://localhost:4242, I got this error.

Error: ENOENT: no such file or directory, stat '/Users/stripe/samples/subscription-demo-from-cli/client/register.html'

Why we got the error

I opened the server/server.js file, the root path were written in these code:

app.get('/', (req, res) => {
  const path = resolve(process.env.STATIC_DIR + '/register.html');
  res.sendFile(path);
});

I think this code is for the vanillajs example.

https://github.com/stripe-samples/subscription-use-cases/blob/main/fixed-price-subscriptions/client/vanillajs/register.html

Workaround

In case of the react example, we need to run two application.

server/: API server

We need to use the server/ project just as a API server.

$ cd server
$ npm i
$ npm start

client/: Frontend application

Additionally, we need to start this React application to launch the frontend UI.

$ cd client
$ npm i
$ npm start

When we visit the http://localhost:3000 after launching two application, we can see this page.

[lydiastepanek]

I ran into this issue today and @hideokamoto-stripe's solution worked for me.

You can also run npm run build in the client directory to build static frontend assets if you don't want to run the frontend server.

Fix server/server.js like so:

diff --git a/server/server.js b/server/server.js
index c40354a..d98e7a4 100644
--- a/server/server.js
+++ b/server/server.js
@@ -57,7 +57,7 @@ app.use((req, res, next) => {
 });

 app.get('/', (req, res) => {
-  const path = resolve(process.env.STATIC_DIR + '/register.html');
+  const path = resolve(process.env.STATIC_DIR + '/index.html');
   res.sendFile(path);
 });

Run the following steps:

$ cd client
$ npm run build
// set STATIC_DIR="../client/build" in server/.env
$ cd ../server
$ npm start

Works as expected: