Unable to set up sample React project correctly? - node.js

I got an interview assessment next week and they provided me a sample code project of what to expect. The problem is I'm having a LOT of trouble simply setting it up to run as expected...
Edited: Removed project for privacy
I cloned the project and installed all dependencies.
Problem 1
I followed the README in which I created a Database called messenger and then created a .env file in the server directory. The problem is I can't retrieve any values from that .env file through process.env.REACT_APP_CUSTOM_VAR. Console.logging "process.env" does not show ANY custom variables. It's as if they weren't even created...
Problem 2
On the frontend side, it should have been simple (npm install and then npm start). When starting, I found that there was NO CSS applied (despite reading the code and there's Material UI used). When I inspected the page, I'm getting the error 'The server responded with a status of 431 (Request header fields too large).
I have a hard time believing the company gave me super broken code to the point where I can't even run the sample code properly... Can anyone please help me and try installing the code project above? Please let me know if you got the same problem or found any solutions!

Submit an issue requesting that they add .nvmrc and package-lock.json such that you can ensure your machine is prepared to absorb dependencies and properly posture with the correct version of node. It's a crap-shoot of testing various versions of node against their build otherwise.
Your best bet is to check the first publish date of the client (javascript) code against the latest versions of node from that time. It sucks, but that's what I would do.

The project runs fine.
Theres not really styling applied, but that seems to be intentional.
Most likely you would benefit from using whatever database you have access to that already works (in my case, mssql) by changing the db.js
const db = new Sequelize('dbname', 'user', 'password', {
host: 'host',
port: 1433,
logging: false,
dialect: 'mssql',
dialectOptions: {
encrypt: true,
},
});
What you should however not do if you want the job, is critique it. It works just fine as the baseline for a recruitment assignment. Your enviroment is the issue in this case.
Do not forget to run the seed on the backend.

For the problem 1 on the server, I've create an .env file on the ./server directory and logging process.env logged the variables from that file. Also, on the backend, you don't need the REACT_APP_CUSTOM_VAR prefix when accessing environment variables.
For the problem 2 on the frontend, after the instalation, the client loaded the css from mui properly. I'm using node 14.17.0.

Related

Problems Deploying Node App With Render.com

I would like to post a simple stripe integration on render. I apologize in advance for my ignorance on the topic but, since I'm more front-end oriented, it's the first time I've attempted to do such a thing so I would like to ask you
if the repository https://github.com/Luca-Liseros-Ferrari/stripe-example.git is ready to be published, if there is some error that can cause the deploy to fail or if some preliminary operation is required (in the server folder I also have an .env file with the stripe keys and I specified STATIC_DIR = "../client/")
In render.com after clicking on "new" - "web service" and connecting the github repository and considering that from the terminal I start the server.js with the following commands:
cd server
node server.js
how should I fill in the "root directory", "build command" and "start command" fields since it's still not clear to me? Is the root directory the folder that contains the server.js file inside? In my case it would be for example "folderName/server" or simply "server"?
I tried to upload the repository to render but i get the following error message
Failed - Exited with status 1 while running your code.
It also tells me "error cannot find module express"
then I reinstalled express in server folder with npm install express and verified it was already installed. I therefore believe that there is a path error in the phase in which I create the web service.
error snippet
I hope I have provided enough data and I thank anyone who is willing to give me a hand in advance
I solved the problem. I had to specify in render.com in advanced the key - value pairs of my .env file
I noticed it thanks to the Cyclic app which, after loading the repository, warned me that if the app doesn't work it could be because of that
I hope it will help someone

PG (Node-Postgres) Pool Hangs on Connect ... But Only Inside Gatsby?

NOTE: This is mainly a question about the pg or Node-PostgreSQL module. It has details from Gatsby and Postgraphile, but I don't need expertise in all three, just pg.
I have a database that works great with a PostGraphile-using Express server. I can also acces it via node at the command line ...
const { Pool } = require("pg");
const pool = new Pool({ connectionString: myDbUrl });
pool.connect().then(() => console.log('connected'));
// logs 'connected' immediately
The exact same database also previously worked great with Gatsby/PostGraphile via the gatsby-source-pg plug-in ... but recently I changed dev machines, and when I try to build or run a dev server, Gatsby hangs on the "source and transform nodes" step. When I debug it, it's hanging on a call to pool.connect().
So I literally have two codebases both using PostGraphile, both with the same config, and one works and the other doesn't. Even stranger, if I edit the source code of the Gatsby plug-in in node_modules, to make it use the exact same code (which I can run at the command line successfully) ... it still hangs.
The only thing I can think of is that some other Gatsby plug-in is using up all the connections and not releasing them, but as far as I can tell (eg. by grep-ing through node_modules) no other plug-in even uses pg.
So really I have two questions:
A) Can anyone help me understand why connect would hang? Bonus points if you can help me understand why it would do so with a known-good config and only inside Gatsby (after some environmental factor changed)?
B) Can anyone help me fix it? If it might be some sort of "previous code forgot to release connections" issue, is there any way I can test for that? If I could just log new Pool().areYouBroken() somehow that would be amazingly useful.
Try:
npm install pg#latest
This is what got my pool/connection to start working as expected.
Annoying answer: because of a bug (thank you #charmander). For further details see: https://github.com/brianc/node-postgres/issues/2300
P.S. I never did find any sort of new Pool().areYouBroken() function.

Implementing authentication with passport / node.js and getting error

I had already implemented authentication for the app I'm working on but am trying to refactor it based on a recent tutorial I did which I thought was very clear and also involved adding facebook / google / twitter auth which I would like to do.
So far, I've updated the user model and defined my local strategy for signup but when I go to try and run the app now, I'm getting an error. I have the app uploaded to github and wondered if somebody would be able to check it out and see where I'm going wrong. The error is pointing to a part of the index file until node_modules / express but I cannot work out what's up and I'd like to know before I proceed further.
Latest commit is under: https://github.com/DaveBage83/friendly-invention
Thanks!
A few things for you notice.
1 - Do not commit the node_modules folder. Once you have all your dependencies in the package.json file, the npm install will download all of for you again.
2 - This code is full of erros. I won't put everything here, I believe you find them by yourself. Otherwise, put the specific code here, so we can help you out.
About the question:
In you app.js file.
...
authRoutes = require('./routes/index')(app, passport)
...
If you look at the ./routes/index, you'll see that it is exporting a route object, witch does not expect the two parameters. (e.g. (app, passport)).
Hope it can still help you.

Relay/GraphQL Schema cache not updating when I update schema on server side

I have a React app using Relay and a remote GraphQL server. When I start the webpack server, I have it fetch the latest schema and feed it into the babel-relay-plugin.
It works great....except when I make a schema change. It appears React or Relay or webpack or something is caching the schema, because I'll get a Schema validation error in the browser console when I run the app. However, when I run the query manually against the GraphQL server using GraphIQL, the query is successful. So it would have to be some sort of cache on the react, relay, webpack side I'm thinking?
Things I've tried:
List item
Restarting webpack server
Removing node_modules and npm install
I've even tried restarting my computer (that actually seemed to work, but may be coincidence)
Thanks in advance for your help.
Turns out, of course, it was human error. I had cacheDirectory as true in my babel-loader query. You can read about it on the babel-loader readme (just do a find on page for 'cacheDirectory') https://github.com/babel/babel-loader
Once I changed that to false, which is the default. The problem went away. Hope that helps others.
This happened to me when I switched to Webpack 2.
The solution in my case was to move the babelRelayPlugin to be the first plugin to execute in .babelrc.
I'm not exactly sure on the why though.

How to test an AngularJS/SocketStream/Node.js app using Karma

I am working on an AngularJS application that is delivered by a SocketStream/node.js server.
I have an AngularJS service that calls api functions on the SocketStream server and progress has been good so far.
But now the time has come to start writing the first tests and the first testing framework that came to mind is Karma/Jasmine, since this is the recommend AngularJS set up.
So far so good, but since my AngularJS modules are imported using 'require' (SocketStream's version, not require.js) and server api calls are part of the test, I need to configure Karma to load SocketStream (at least its client side).
I took a good look at 'https://github.com/yiwang/angular-phonecat-livescript-socketstream' but when I run this example I get run time errors, possibly because I have later versions of variuous dependencies installed.
I managed to get 'required' resolved by packing my SocketStream app by adding 'ss.client.packAssets()' to app.js and run 'SS_PACK=1 node app.js', but when I start karma it logs an error message saying:
'Chrome 23.0 (Linux) ERROR
Uncaught TypeError: undefined is not a function
at /the...path/client/static/assets/app/1368026081351.js:25'
'1368026081351.js' is the SocketStream packed assets file. If I don't load it the error message is something like 'require is undefined', so my best guess is that the error is happening somewhere inside the SocketStream require code. Also because I run karma in DEBUG mode and can see all the files being served.
I have been trying different approaches as to find out what is happening but to now avail. So my questions are:
Is anybody else successfully testing AngularJS/SocketStream using Karma?
Does anybody have any suggestions as to how I can fix, or at least debug this problem?
Are there any alternatives/better solutions?
Time to answer, sort of, my own question:
Sort of, because I came to the conclusion that Karma and node.js/SocketStream have a lot of overlap, so I decided to see if I can omit Karma altogether and deliver the Jasmine testing platform through SocketStream. It turns out that that is possible and here's how I did it:
I defined a new SocketStream route and client in my 'app.js' file:
ss.client.define( 'test', {
view: 'SpecRunner.html',
css: ['libs/test'],
code: ['libs', 'tests', 'app'],
tmpl: 'none'
});
ss.http.route( '/test', function(req, res) {
res.serveClient( 'test' );
});
I downloaded jasmine-standalone-1.3.1.zip and copied 'SpecRunner.html' to the 'client/views' folder. I then edited it to make it load AngularJS and all SocketStream client files, like all other views:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<SocketStream/>
I removed the 'script' tags that import the sample source files ( 'Player.js' and 'Song.js' ) and specs but let the last 'script' block in place unmodified.
I then created a new folder inside 'client/css/libs' called 'test' and copied 'jasmine.css' in there unmodified.
Then I copied 'jasmine.js' and 'jasmine-html.js' renamed to '01-jasmine.js' and '02-jasmine-html.js' but otherwise unmodified, into '/client/code/libs'.
Now Jasmine is in place and will be invoked by using the '/test' route. The slightly unsatisfactory bit is that I haven't found an elegant place to store my spec files. They only work so far if I place them inside the 'libs' folder. Anywhere else and they are served by SocketStream as modules and are not run.
But I can live with that for now. I can run Jasmine tests without having to configure a special Karma setup.

Resources