I'm separating my project frontend from server side so I have the following folder structure:
- client
- server
Each folder has its own package.json to separate packages. Now from the client folder I have the following command:
webpack serve --progress --config webpack.config.development.js
And in the server command I have the following command:
nodemon server.js
I want to run both command at the same time, is there is a way to do this while keeping the same folder structure and separation of packages?
Making the folder structure like this:
Project/
├─ client/
├─ server/
├─ run.sh
run.sh:
cd server && nodemon server.js &;
cd ../client && webpack serve --progress --config webpack.config.development.js &;
run the command : ./run.sh
But because we run the applications in the background you need to kill it with ps -eaf ( for example ps -eaf | grep server.js to search within )
I think the best way to do all of this is to use a a process manager like PM2
Related
File Directory
Image
Dockerfile
FROM node:16
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
ENV PORT=5000
EXPOSE 5000
CMD [ "npm", "run", "dev" ]
running docker file locally
Login Succeeded
$ docker build -t $CI_DOCKER_REPO:$CI_COMMIT_SHORT_SHA -f ./cronTest/Dockerfile .
Step 1/9 : FROM node:16
---> e90654c39524
Step 2/9 : WORKDIR /app
---> Using cache
---> 4ffb8744c0c4
Step 3/9 : RUN ls
---> Running in 992c3cd680f3
Removing intermediate container 992c3cd680f3
---> 0124eea0f9e9
Step 4/9 : COPY package.json ./
COPY failed: file not found in build context or excluded by .dockerignore: stat package.json: file does not exist
Cleaning up project directory and file based variables
00:01
ERROR: Job failed: exit code 1
Even though the same file is used can anyone check this if something is wrong with my dockerfile
The local build and the pipeline build are launching from different paths, but both are provided with the same . relative build context, which means they resolve to different paths.
To emulate the local build, supply the equivalent "build context" paramater
docker build -t $CI_DOCKER_REPO:$CI_COMMIT_SHORT_SHA \
-f ./cronTest/Dockerfile \
./crontTest
Or move into the same directory
cd cronTest
docker build -t $CI_DOCKER_REPO:$CI_COMMIT_SHORT_SHA \
-f Dockerfile \
.
update to the following, but can't help much further without full context of structure
COPY ./package.json ./
I have a project with two folders, client and server, and I also have a package.json at the root of the project to manage starting and installing on the client and server from one place. The problem occurs when I try to install packages from the root using one of the install scripts I have:
"scripts": {
"install-server": "npm install --prefix server",
}
when I run the above script it not only creates a node_modules folder but also downloads additional files into the server folder, which I think are supposed to go into the node_modules folder.
But the following script works fine
"scripts": {
"install-server": "cd server && npm install",
}
why is that?
I have a MERN stack project where previously everything server related was at the root level, however issues with ESLINT, VSCODE and package.json files has meant that I'm moving everything related to the server into it own sub directory.
However this has meant that Heroku is now giving me errors that look related to Express not being able to serve the files. Please see screengrab of errors on Heroku log below.
Deploying the app on Heroku works fine with no build errors.
How Express is configured in my server.js file
// prod only, uses /public in dev env
app.use(express.static('index.html', { root: '../client/build' }) );
app.get('*', (req, res) => {
res.sendFile(`index.html`, { root: '../client/build' });
});
My directory structure
client/
src/
public/
build/
package.json
server/
routes/
models/
server.js
package.json
.gitignore
README.md
package.json // very small file only including scripts to satisfy Heroku
Root level package.json (entire contents of file)
{
"scripts": {
"start": "cd server && node server.js",
"build": "cd client && npm run build",
"install-server": "cd server && npm install",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-server && npm run install-client && npm run build"
}
}
Notes:
Express isn't having a problem serving the files when I start the project locally
Heroku requires a package.json file at the root directory if you're suing a Node.js type project. This is why I have a small package.json in my root that doesn't have much in it
As it turns out switching from this:
app.use(express.static('index.html', { root: '../client/build' }) );
To
app.use(express.static('/app/client/build'))
Solved the issue.
I did try app.use(express.static('index.html', { root: '/app/client/build' }) ); but that again broke the site.
I am new to using Docker, and I am trying to get a simple React app to work in Docker.
This is my file organization
/project-files
Dockerfile
../client
Inside client is a basic React app and this is my Dockerfile
FROM node:13.8.0-stretch
WORKDIR /client
COPY /client/package.json ./client/package.json
RUN npm install
COPY /client /client
EXPOSE 8080
CMD ["npm", "start"]
I run the following commands from :
docker build -t test .\project-files\
And it seems to build correctly. Then I run
docker run -p 8080:8080 test
And it seems to compile correctly. I get all the messages and warnings that you would see in a React app
> client#0.1.0 start /client
> react-scripts start
ℹ ｢wds｣: Project is running at http://172.17.0.2/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /client/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled with warnings.
./src/scenes/Home.js
Line 5:29: 'Card' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
But when I go to http://localhost:8080/ I get a "This page isn’t working, localhost didn’t send any data."
I just copied your Dockerfile contents and managed to get it to run (with create-react-app):
FROM node:13.8.0-stretch
WORKDIR /client
COPY ./client/package.json /client/package.json
RUN npm install
COPY ./client /client
EXPOSE 3000
CMD ["npm", "start"]
I made the following changes:
I changed some of the paths - I'm not entirely sure on your file structure but it didn't seem right to me. I changed both your COPY lines.
I change the exposed port from 8080 to 3000
I ran the following build command docker build -t test . when in the same directory as the Dockerfile
I used 3000 in the run command docker run -p 3000:3000 test
When I visited http://localhost:3000/ it showed my app.
In summary – I think it was your COPY paths and your EXPOSEd port
My file structure:
.
├── _Dockerfile
├── _client
| ├── package.json
| ├── package-lock.json
| ├── public
| └── src
I am doing a tutorial on React and I have made a youtube clone based on react. Now I wanted to upload this to my domain (hosted at one.com) but it doesn't work because bundle.js can't be found. Rather obvious since the app requires to run "npm start".
I've been googling and found that I somehow need to deploy the app by writing a deploy configuration for webpack, but I can't get it to work.
I've never understood this and I'd like to ask: how do I deploy a javascript/nodejs/webpack website to a server? Am I on the right track?
My project is based on this starter: https://github.com/StephenGrider/ReduxSimpleStarter
EDIT: So I've managed to get a bundle.js file by typing the following in cmd:
webpack ./src/index.js bundle.js
Uploaded that to the server
Now the problem is that it's looking for bundle and style in the root of the website.
Try bundling your application before running any deployment script. A package.json might have a script like this:
{
"name": "youtube-clone",
"scripts": {
"package": "webpack --config webpack.config.production.js --progress --colors",
"deploy": "npm run package && [your deployment script]"
}
}
So then you would have a file structure like this:
.
├── src/
├── .gitignore <= make sure your build files are ignored on source
├── package.json
├── webpack.config.development.js
└── webpack.config.production.js
Where one of your configs would be created for production and one for development