https://github.com/boonkuaeb/sf4-reactjs
Symfony4 and ReactJS boilerplate
https://github.com/boonkuaeb/sf4-reactjs
reactjs-boilerplate reactjs-es6 symfony4 webpack3
Last synced: about 2 months ago
JSON representation
Symfony4 and ReactJS boilerplate
- Host: GitHub
- URL: https://github.com/boonkuaeb/sf4-reactjs
- Owner: boonkuaeb
- Created: 2018-09-06T06:25:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-14T10:34:29.000Z (over 7 years ago)
- Last Synced: 2025-01-11T18:50:11.319Z (11 months ago)
- Topics: reactjs-boilerplate, reactjs-es6, symfony4, webpack3
- Language: PHP
- Homepage:
- Size: 837 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-From-Scratch.md
Awesome Lists containing this project
README
Symfony4 and React JS from scratch
=================================
To get it working, follow these steps:
##Setup Project
Set up symfony project
````
composer create-project symfony/website-skeleton sf4-reactjs
````
Create sf4-reactjs/src/Entity/User.php
**Setup the Database**
Open `.env` and make sure the `DATABASE_URL` setting is
correct for your system.
```
...
DATABASE_URL=mysql://root:mysecret@127.0.0.1:6667/sf4_reactjs_db
...
```
Then, create the database and the schema!
```
php bin/console doctrine:database:create
```
##Install FosUserBundle
```
composer require friendsofsymfony/user-bundle
```
Update sf4-reactjs/config/packages/framework.yaml
```
framework:
...
# just here until FOSUserBundle fully removes their templating dependency
templating:
engines: [twig]
```
Create User Entity file
```
{% block fos_user_content %}{% endblock %}
{% endblock %}
```
Create login page file `templates/bundles/FOSUserBundle/Security/login.html.twig`
```
{% extends '@FOSUser/layout.html.twig' %}
{% trans_default_domain 'FOSUserBundle' %}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% endblock %}
{% block fos_user_content %}
%20}})
Login! Start Lifting!
Don't know the login?
Sir or madam, might I recommend that you try the following login details:
Username
cindy_clawford
Password
pumpup
{% if error %}
{{ error.messageKey|trans }}
{% endif %}
Login
{% endblock fos_user_content %}
```
Create `/sf4-reactjs/assets/js/login.js`
```
'use strict';
import $ from 'jquery';
import '../css/login.css';
$(document).ready(function() {
$('.js-recommended-login').on('click', '.js-show-login', function(e) {
e.preventDefault();
$('.js-recommended-login-details').toggle();
});
$('.js-login-field-username').on('keydown', function(e) {
const $usernameInput = $(e.currentTarget);
// remove any existing warnings
$('.login-long-username-warning').remove();
if ($usernameInput.val().length >= 20) {
const $warning = $('
This is a really long username - are you sure that is right?');
$usernameInput.before($warning);
}
});
});
```
Update `webpack.config.js`
```$xslt
Encore
...
.createSharedEntry('layout', './assets/js/layout.js')
.addEntry('login', './assets/js/login.js')
```
Run `yarn watch` again.