How to run a development server in Laravel Mix (standalone project) - npm

I'm trying to run a server to see my project on browser, the only way i can do it is running npx mix watch --hot, so after that my project start running at localhost:8080.
But the above command enable hot reload, i would like to know if there is some specific command to just run the server, without enabling hot reloading.
I tried npm mix watch but it not starts the server, just watch the files.
Tried calling manually webpack server with:
./node_modules/.bin/webpack serve --config="./node_modules/laravel-mix/setup/webpack.config.js"
This works (the server starts at localhost:8080 as well) but somehow it activates hot reloading too, idk why.
So, there is some way to just start the server? Without enabling hot reloading?
Here is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.sass('src/scss/app.scss', 'dist/css/')
.js('src/js/app.js', 'dist/js/').react()
.setPublicPath('public');
My package.json has just the default script:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

If you're using Composer you can run php artisan serve, this will start a local php server and serve your web pages to the browser Laravel installation.

Related

environmental variable not being read (NPM)

So I have a project running with nodejs, and an env file using multiple variables. For some reason one of these does not seem to be working though.
Here the code should be printing out the port and namespace/ip of that the env file should have specified
`==> API is running on port ${process.env.API_PORT}`,
'\n',
`==> Send requests to http://${process.env.API_HOST}:${process.env.API_PORT}`
But for some reason it is only finding the host, as this is what the console actually outputs
==> API is running on port undefined
==> Send requests to http://127.0.0.1:undefined
Here is the .env file entries for these two variables
API_PORT=8080
API_HOST=127.0.0.1
The only guidance I have found so far was that I had to include require('dotenv').config(); but this did not resolve anything either.
What could be blocking the API_PORT variable?
UPDATE: So it seems when I host the server using npm, it works, but when I try to run code coverage over it using chai is when this error pops up (still npm run test).
Fast solution at the moment
in your package.json
Put your envs in your scripts
"scripts": {
"dev": "API_PORT=8080 API_HOST=127.0.0.1 node index.js",
"test": "your script here"
},
npm run dev should work fine.

How to open two seperate nw.js apps

I am building a server and a client nwjs app, but I can't open both at the same time. I wonder if there is any way to do this. I run npm run dev on both of my opened VS Code but when I run this command on the second app it just won't open at all (doesn't matter which one is the second app I would like to run). I tried to build the client app and run it and after it run the server app but it's the same, the second app won't start.
This is my package.json file in both app, I don't know if this helps at all. Only the name is different in the apps (nwjs_client and nwjs_server)
{
"name": "nwjs_server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nw src/",
"prod": "nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"nw": "^0.49.1"
}
}
I'm willing to accept any answers, I don't know if it is even possible to run 2 different nwjs apps.
I'm confused by what you are trying to do.
If you are trying to run an NW.js that, instead of loading directly from a index.html, it loads displays a page from a local webserver:
Create an server.js that spins up a local web server on a specific port (like 4263 or something not super common).
If you need any node_modules for this (like express) make sure it is a dependency and not a devDependency.
Set your "main" in the package.json to "http://localhost:4263 using the same port as the server
set your "node-main" to "server.js", this will run in the node context before your window is displayed when starting the app.
Set your "node-remote" to "http://localhost:4263" using the same port also. This will allow Node commands to run on that URL when loaded in NW.js.
If you are wanting to run two commands at the same time you can:
npm install --save-dev concurrently wait-on. This will install two devDeps
Set your npm script to "start": "concurrently \"npm run serve\" \"wait-on http://localhost:4263 && nw .\""
This will run your npm run serve command, which presumably spins up a local webserver for development, if using something like webpack, this could take a minute. Then it waits until localhost:4263 actually returns a response. Then it launches NW.js
concurrently will also let you run any two (or more) commands at the same time.

create-react-app doesn't restart when changes happen in server code

using /src/setupProxy.js, I have import /server/index.js and start up a server api.
The trouble is that changes to files in /server/ directory do not restart the create-react-app so I don't see any of my changes until I kill it and restart it.
Is there a way to have create-react-app also watch the server directory for changes, or a way to use nodemon to run create-react-app?
it looks like you can do
nodemon create-react-app start
create-react-app does a better in place update in your browser when you make changes in the src directory, so you don't want nodemon triggering a restart in that case.
To avoid this, create a file called nodemon.json:
{
"ignore": ["src/*", "build/*"]
}
And then nodemon will only restart for non-react stuff updating.
I added the build directory too as it shouldn't be part of the restart.

Serve SPA before running tests on cypress js

With Cypress I can test my dev subdomain easily. I have an angular/react application where when I make a dist (including index.html), I want to run Cypress tests against the built files.
Unfortunately, I have no idea how to serve a dist folder, (like serve package of npm) before starting Cypress tests.
I know that I can serve the index.html on another terminal tab, but this is not going to happen on CircleCi (my CI).
Is there anyway that Cypress can replace the localhost and serve static files before starting the actual tests?
I used browser-sync to launch a server that distribute my static files.
You need to install 3 packages: cypress (obviously), browser-sync to launch a server, and npm-run-all to launch a server and cypress consecutively.
npm install --save-dev cypress
npm install --save-dev browser-sync
npm install --save-dev npm-run-all
Here is an example of the npm scripts configuration that you will need to add in your package.json. Don't forget to customize the <port> (ex: 4000) and <folder> that contains the path to your SPA (ex: public).
{
"scripts": {
"cypress": "cypress run",
"server": "browser-sync start --port <port> --server <folder> --no-open",
"test": "run-p -r server cypress"
}
}
Now you have to write your first Hello world test:
describe('My App', function() {
it('is up', function() {
cy.visit('http://localhost:4000');
cy.contains('Hello world!');
});
});
That's it! We can launch our test:
npm test
I did the following:
I installed
npm i serve
and added
serve: "serve -s <build-folder>"
to my package.json. And then in your e.g. travis.yml you add
- npm run serve &
- npm test
The & at the end of your command will make it run in the backend and thus the test can run right after it. Since serve is pretty fast serving the static files there is no need for the npm test to wait either AND you do not have to worry about stopping the npm run serve afterwards since most CI environments are cleaning up background processes automatically after your tests finished.
Most of the information above can also be found here.

Can't run express server and Vue app concurrently

My express server is set to run on port 8081. I start it up with nodemon server/start.js
My Vue app runs on port 8080. I run nodemon build/dev-server.js to start it.
The problem I have is if express server is running on 8081, I can't run Vue app. It just ends with this error:
Starting dev server...
[1] Killed
[nodemon] app crashed - waiting for file changes before starting...
I can start Vue if express is not running though.
I'm using NGINX btw.
It seems like there is a problem when you use nodemon to watch more than one file. You can follow this Gist. You can try to run one file with node.
As Tolsee mentioned, you can run both with a single command, just don't use nodemon for both files. Here is an example that is working for me with a Vue 2 app and an Express server:
"scripts": {
"dev": "node build/dev-server.js --hot | nodemon server.js", // this line
"start": "node build/dev-server.js",
"build": "node build/build.js"
}
Hopefully that helps anyone that has run into this problem :)
I also faced the same issue once So, instead of using nodemon I suggest you to use pm2. Checkout this blog on using pm2 to run the Backend server and the frontend dev server simultaneously Simultaneously Running Express and Webpack Dev Server by Henrik Fogelberg