How to run Express-React project - reactjs

I`m trying to understand how to run this project, published on GitHub here
No idea how. I ran npm i, and then npm start, but I got these messages:
npm start
> fed-entry-level-exam-root#1.0.0 start C:\entry-level-exam_19\entry-level-exam
> lerna run start --parallel
lerna notice cli v3.22.1
lerna info Executing command in 2 packages: "npm run start"
#fed-exam/client: > #fed-exam/client#1.0.0 start C:\entry-level-exam_19\entry-level-exam\client
#fed-exam/client: > set CI=true && react-scripts start
#fed-exam/server: > #fed-exam/server#1.0.0 start C:\entry-level-exam_19\entry-level-exam\server
#fed-exam/server: > ts-node-dev index.ts
#fed-exam/server: [INFO] 21:51:34 ts-node-dev ver. 1.1.0 (using ts-node ver. 9.1.1, typescript ver. 3.9.9)
#fed-exam/server: starting server { serverAPIPort: 3232, APIPath: '/api/tickets' }
#fed-exam/server: server running 3232
#fed-exam/client: i 「wds」: Project is running at http://192.168.0.108/
#fed-exam/client: i 「wds」: webpack output is served from
#fed-exam/client: i 「wds」: Content not from webpack is served from C:\entry-level-exam_19\entry-level-exam\client\public
#fed-exam/client: i 「wds」: 404s will fallback to /
#fed-exam/client: Starting the development server...
I tried to open http://localhost:3232/ but I getting this error:
Cannot GET /
Also tried :
http://localhost:3000
Which is known for React localhost.
So far I don't know how to make it work.
Any help will be appreciated.

run the client and server separately,
after running npm install and npm start
open a new terminal and run npm start inside client/ directory

If you carefully read messages on the console you will notice where the api is running.
The lines
#fed-exam/server: starting server { serverAPIPort: 3232, APIPath: '/api/tickets' }
#fed-exam/server: server running 3232
Shows that server project is running at port 3232, but that api path starts at /api/tickets. So, for access the root of the api, access http://localhost:3232/api/tickets.
You could check how this works by checking the express app code on server folder.
And there is a problem with the client code that is related with react-scripts when trying to run projects using lerna package. The line
Content not from webpack is served from C:\entry-level-exam_19\entry-level-exam\client\public
Was previously reported as error here: Content not from webpack is served from /foo
Try to solve the issue using our colleagues suggestions.

Related

serve React build locally

I am currently learning React, to eventually pair with Ruby on Rails.
I am following the tutorial:
https://www.youtube.com/watch?v=w7ejDZ8SWv8
to get a handle on the language.
I have successfully compiled the build folder, running the command $ npm run build
I have also run the command $ sudo npm i -g serve in my terminal to install the npm serve
when running the build on localhost:8000, using the command $ serve - s -p 8000 in the terminal, it is serving using WEBrick::HTTPServer, throwing the following up in the terminal:
[2022-09-12 15:03:22] INFO WEBrick 1.7.0
[2022-09-12 15:03:22] INFO ruby 3.0.0 (2020-12-25) [x86_64-darwin19]
[2022-09-12 15:03:22] INFO WEBrick::HTTPServer#start: pid=5412 port=8000
which results in localhost:8000 showing:
My question:
Is there a way of altering this so I can serve my react build successfully, without causing issues when I go back to serving my RoR applications later?

Deploy React app with gh-pages after moving local folder

I'm having trouble deploying my React app with gh-pages since I moved my local directory from the main disk to a secondary disk on my laptop (I was running out of space).
Directory: https://github.com/jorislimonier/jorislimonier.github.io/
Here is the output of npm run deploy:
joris#joris-N751JK:/media/joris/projects/personal-website$ npm run deploy
> joris.limonier.github.io#0.1.0 predeploy
> npm run build
> joris.limonier.github.io#0.1.0 build
> react-scripts build
Creating an optimized production build...
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
Compiled successfully.
File sizes after gzip:
75.73 kB build/static/js/main.27c91ea0.js
12.63 kB build/static/css/main.5cfc2ee1.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
> joris.limonier.github.io#0.1.0 deploy
> gh-pages -d build
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
I tried:
git remote remove origin
git remote add origin https://github.com/jorislimonier/jorislimonier.github.io.git
Any idea?

sveltekit build port is always 3000 but it is not available in my server. How do you change port in svelte.config.js?

Port 3000 is occupied in my hosting server. Now I'm building a sveltekit app.
When I use
npm run dev --port 4000
or npm run build and then
npm run preview --port 4000
I'm able to start the sveltekit using localhost:4000
My npm run build is always pointing me to
skapp#0.0.1 preview
> svelte-kit preview
SvelteKit v1.0.0-next.260
network: not exposed
local: http://localhost:3000
after searching online some of the possible solutions available online is to change the port in the adapter-node config env like so:
const config = {
kit: {
adapter: adapter({
out : 'buildit',
env : {
port : 4000,
}
// vite : {
// server : {strictPort : false}
// }
}),
}
};
export default config;
I go back and build the sveltekit again then run the command npm run preview again, like so:
npm run build
npm run preview
but the it gives me the same 3000 port. Some of the discussion online pointed to the vite flag where you set the strictPort to false and it will look for the next available port but that didn't change the port and the build still fixated on port 3000.
When I use npm run build --port 4000, while another app is running on port 3000, I get an error.
Error: listen EADDRINUSE: address already in use 127.0.0.1:3000
at Server.setupListenHandle [as _listen2] (net.js:1318:16)
at listenInCluster (net.js:1366:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1503:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:8)
Emitted 'error' event on Server instance at:
at emitErrorNT (net.js:1345:8)
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
code: 'EADDRINUSE',
errno: -4091,
syscall: 'listen',
address: '127.0.0.1',
port: 3000
}
It seems like it is a server instance error. How to fix it?
It seems like fewer developers are interested in sveltekit because when I used to post a question about sapper, I used to get an answer within hours but I'm noticing that questions about sveltekit getting answered in days. Hopefully there are some developers out there keeping their eyes on sveltekit tag in stackoverflow.
So my question how to change the npm run build so the sveltekit app start using a different port. I'm not asking about npm run dev or npm run preview. My inquiry is about sveltekit to run on port 4000. How the npm run build could be used to build sveltekit app with a different port?
svelte-kit dev and svelte-kit preview are used for development and debugging purposes and should not be run for production builds.
when deploying to a server you run svelte-kit build to generate the final site (in your case that should be located in ./buildit)
i don't think that you can statically specify the port being used, but you can provide it when launching the server using an environment variable.
(i am using #sveltejs/adapter-node, so this might be different for other adapters)
PORT=1234 node buildit/index.js
i hope this is what you were asking for, to be honest i don't think i quite understood the question
change the port mentioned at the bottom on the index.js that was created in build folder...
After "npm run build", you can change the default port 3000 in the build\index.js file(Line 218).
const port = env('PORT', !path && '3000');
->
const port = env('PORT', !path && '1234');

React Script doesn't start when being launched from root

My react app is in the directory /home/ubuntu/my-app, the home directory being /home/ubuntu. I am using an AWS ec2 instance and I want the react script to execute whenever the server is starting. For this purpose, I wrote the following script:
#!/usr/bin/python3
import os
import time
import shlex, subprocess
time.sleep(20)
args = shlex.split('sudo su ubuntu -c "/usr/bin/npm start --prefix /home/ubuntu/my-app"')
subprocess.Popen(args)
When I run the script manually with ./react-start.py everything works just fine. However, when I reboot the AWS instance, I get the following log:
> my-app#0.1.0 start /home/ubuntu/my-app
> react-scripts start
^[[34mℹ^[[39m ^[[90m「wds」^[[39m: Project is running at http://172.31.14.57/
^[[34mℹ^[[39m ^[[90m「wds」^[[39m: webpack output is served from
^[[34mℹ^[[39m ^[[90m「wds」^[[39m: Content not from webpack is served from /home/>
^[[34mℹ^[[39m ^[[90m「wds」^[[39m: 404s will fallback to /
Starting the development server...
..and nothing happens.
I am using crontab to call the script at reboot by the way. Does anyone have an idea why it's not working? Thanks a lot!

Module not found: Can't resolve './.htaccss' after installing React-boilerplate Dandelion starter project

I have downloaded Dandelion starter-project and decompressed it on a local folder. I ran:
npm i
npm run build:dll
and then
npm start
then it complains:
> dandelion_pro#1.6.1 start /home/......./dandelion/starter-project
> cross-env NODE_ENV=development node server
Happy[js]: Version: 5.0.1. Threads: 5 (shared pool)
Server started ! ✓
Access URLs:
-----------------------------------
Localhost: http://localhost:3001
LAN: http://xxx.xxx.xxx.xxx:3001
-----------------------------------
Press CTRL-C to stop
Webpack is building script...
Happy[js]: All set; signaling webpack to proceed.
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
webpack built 920e70412c607c0d50a6 in 3600ms
✖ 「wdm」:
ERROR in ./app/app.js
Module not found: Error: Can't resolve './.htaccess' in '/home/......./dandelion/starter-project/app'
# ./app/app.js 27:0-48
# multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js
I have searched the web looking for a solution, but I was unable to find one. My system is a Ubuntu 18.04.3 based machine running Linux Mint 19.3, nodejs 12.15.0 and npm 6.13.4. How can I solve this?
Well folks after an endless unsuccessful search on the web I created an empty ´.htaccess´ file and placed it into the ´app´ folder. Maybe this is not the better or the elegantest way to do it, but it worked for me.
I am posting this hoping it might be helpful.

Resources